https://github.com/azareal/bqcss2js
A little experiment to transpile a simplified version of EQCSS to JavaScript in Golang.
https://github.com/azareal/bqcss2js
Last synced: about 1 month ago
JSON representation
A little experiment to transpile a simplified version of EQCSS to JavaScript in Golang.
- Host: GitHub
- URL: https://github.com/azareal/bqcss2js
- Owner: Azareal
- License: gpl-3.0
- Created: 2018-07-16T10:13:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-20T23:43:03.000Z (almost 8 years ago)
- Last Synced: 2025-02-26T05:41:34.709Z (over 1 year ago)
- Language: Go
- Homepage:
- Size: 22.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Box Query CSS to JavaScript
A little experiment to transpile my element query motivated oqcss format to JavaScript in Golang.
Bqcss aka Box Query CSS is like Eqcss, but several changes rules have been made to help simplify the format to both improve performance, reduce the complexity, and to reduce the cognitive burden the format imposes on the writer.
This is currently under construction and not functional yet, but feel free to keep an eye on this repo!
```css
/* only run this query when the width of .sidebar is at-least 50 pixels */
@element .sidebar and (min-width: 50px) {
.row {
background-color: red;
}
}
/* this rule applies to .sidebar when the width of it is at-least 50 pixels, try to avoid using this as it's easy to create a cycle */
@element .sidebar and (min-width: 50px) {
background-color: red;
}
```
As you can see, the format is fairly similar to EQCSS.js, but unlike there, every rule is scoped to $this, unless otherwise specified, this is to reduce the amount of boilerplate needed and to avoid incentivizing patterns which are harder to optimise and reason about.