diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..39f9d77 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,13 @@ +# These are supported funding model platforms + +github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +patreon: # Replace with a single Patreon username +open_collective: stylis +ko_fi: # thysultan +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry +custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml index 5960524..3485cfa 100644 --- a/.github/workflows/main.yaml +++ b/.github/workflows/main.yaml @@ -8,9 +8,9 @@ jobs: node-version: [11.4.0] steps: - name: checkout - uses: actions/checkout@v1 + uses: actions/checkout@v3 - name: setup ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - name: test @@ -18,7 +18,7 @@ jobs: npm install npm test - name: report - uses: coverallsapp/github-action@v1.0.1 + uses: coverallsapp/github-action@v2 with: github-token: ${{ secrets.GITHUB_TOKEN }} - path-to-lcov: ./coverage/lcov.info + file: ./coverage/lcov.info diff --git a/.gitignore b/.gitignore index 315b335..763d7ce 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,4 @@ coverage .nyc_output dist/ package-lock.json +yarn.lock diff --git a/README.md b/README.md index 98098e3..fc02749 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@ A Light–weight CSS Preprocessor. [![Coverage](https://coveralls.io/repos/github/thysultan/stylis.js/badge.svg?branch=master)](https://coveralls.io/github/thysultan/stylis.js) [![Size](https://badgen.net/bundlephobia/minzip/stylis)](https://bundlephobia.com/result?p=stylis) -[![Licence](https://badgen.net/badge/license/MIT/blue)](https://github.com/dyo/dyo/blob/master/LICENSE.md) -[![NPM](https://badgen.net/npm/v/dyo)](https://www.npmjs.com/package/dyo) +[![Licence](https://badgen.net/badge/license/MIT/blue)](https://github.com/thysultan/stylis.js/blob/master/LICENSE) +[![NPM](https://badgen.net/npm/v/stylis)](https://www.npmjs.com/package/stylis) ## Installation @@ -87,9 +87,18 @@ tokenize('h1 h2 h3 [h4 h5] fn(args) "a b c"') === ['h1', 'h2', 'h3', '[h4 h5]', serialize(compile('h1{all:unset}'), stringify) ``` +### Vendor Prefixing + +```js +import {compile, serialize, stringify, middleware, prefixer } from 'stylis'; + +serialize(compile('div{display:flex;}'), middleware([prefixer, stringify])) +``` + + ## Middleware -The middleware helper is a convinent helper utility, that for all intensive purposes you can do without if you intend to implement your own traversal logic. The `stringify` middleware is one such middleware that can be used in conjunction with it. +The middleware helper is a convenient helper utility, that for all intents and purposes you can do without if you intend to implement your own traversal logic. The `stringify` middleware is one such middleware that can be used in conjunction with it. Elements passed to middlewares have a `root` property that is the immediate root/parent of the current element **in the compiled output**, so it references the parent in the already expanded CSS-like structure. Elements have also `parent` property that is the immediate parent of the current element **from the input structure** (structure representing the input string). @@ -129,6 +138,20 @@ serialize(compile('h1{all:unset}'), middleware([stringify, (element, index, chil The middlewares in [src/Middleware.js](src/Middleware.js) dive into tangible examples of how you might implement a middleware, alternatively you could also create your own middleware system as `compile` returns all the nessessary structure to fork from. +## Variables + +CSS variables are supported but a note should be made about the exotic use of css variables. The css spec mentions the following + +>The allowed syntax for custom properties is extremely permissive. The production matches any sequence of one or more tokens, so long as the sequence does not contain , , unmatched <)-token>, <]-token>, or <}-token>, or top-level tokens or tokens with a value of "!". + +That is to say css variables according to the spec allows: `--foo: if(x > 5) this.width = 10;` and while this value is obviously useless as a variable, and would be invalid in any normal property, it still might be read and acted on by JavaScript and this is supported by Stylis, however things become slightly undefined when we start to include the `{` and `}` productions in our use of exotic css variables. + +For example consider the following: `--foo: {};` + +While this is valid CSS and supported. It is unclear what should happen when the rule collides with the implicit block termination rule that allows i.e `h1{color:red}`(notice the omitted semicolon) to also be a valid CSS production. This results in the following contradiction in: `h1{--example: {}` is it to be treated as `h1{--foo:{;}` or `h1{--foo:{}` the later of which is an unterminated block or in the following: `h1{--foo:{} h1{color:red;}` should it be `h1 {--foo:{}h1{color:red;};` where `{}h1{color:red;` is part of the css variable `--foo` and not a new rule or should it be something else? + +Nevertheless Stylis still supports the exotic forms highlighted in the spec, however you should consider it as a general rule to delimit such exotic uses of variables in strings or parentheses i.e: `h1{--foo:'{'}` or `h1{--foo:({)}`. + ## Benchmark Stylis is at-least 2X faster than its predecesor. diff --git a/docs/index.html b/docs/index.html index d7fa47c..8860a36 100644 --- a/docs/index.html +++ b/docs/index.html @@ -47,7 +47,10 @@