Skip to content

media query list parser #659

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
df43911
wip
romainmenke Oct 13, 2022
412d6be
wip
romainmenke Oct 17, 2022
37f7184
Merge remote-tracking branch 'origin/postcss-custom-media--affectiona…
romainmenke Oct 18, 2022
ccf0b59
wip
romainmenke Oct 19, 2022
f327ff4
wip
romainmenke Oct 20, 2022
343a2ab
wip
romainmenke Oct 21, 2022
1c82f16
finish range
romainmenke Oct 22, 2022
23fd568
more work
romainmenke Oct 23, 2022
c18208e
lint
romainmenke Oct 23, 2022
2942574
fix ranges
romainmenke Oct 23, 2022
ff0fa64
more work
romainmenke Oct 23, 2022
48cd40f
media lists
romainmenke Oct 23, 2022
9849e99
finish parser
romainmenke Oct 23, 2022
2148f11
toJSON
romainmenke Oct 23, 2022
84eaddd
Merge remote-tracking branch 'origin/postcss-custom-media--affectiona…
romainmenke Oct 24, 2022
972f24f
add a test suite
romainmenke Oct 24, 2022
48c6218
more tests
romainmenke Oct 25, 2022
ac8814f
wip
romainmenke Oct 26, 2022
5567384
lint
romainmenke Oct 26, 2022
8ebe988
more tests
romainmenke Oct 26, 2022
406d5e3
wip
romainmenke Oct 26, 2022
92dd445
fix range parsing
romainmenke Oct 26, 2022
757bd0d
docs
romainmenke Oct 26, 2022
854f850
add ancestry utility
romainmenke Oct 26, 2022
a0f81a3
fixes
romainmenke Oct 27, 2022
41bbb22
fixes
romainmenke Oct 27, 2022
0f73632
allow parsing from tokens
romainmenke Oct 27, 2022
0e52392
add some convenience methods
romainmenke Nov 1, 2022
d98c883
fixes
romainmenke Nov 1, 2022
b93b9da
more migration
romainmenke Nov 1, 2022
9282014
more convenience methods
romainmenke Nov 2, 2022
94969a9
more type predicates
romainmenke Nov 3, 2022
7d9e518
Merge remote-tracking branch 'origin/postcss-custom-media--affectiona…
romainmenke Nov 5, 2022
1aa990c
wip
romainmenke Nov 5, 2022
f70a9ff
fix
romainmenke Nov 5, 2022
092b246
fix
romainmenke Nov 5, 2022
15556df
finish up
romainmenke Nov 5, 2022
b9b9b8d
lets get rid of those build errors
romainmenke Nov 5, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ jobs:
# - without requiring postinstall scripts from dependencies to run
- name: build
run: |
npm run build --if-present $MODIFIED_WORKSPACES
npm run build --if-present

- name: lint
run: npm run lint --if-present $MODIFIED_WORKSPACES
Expand Down
103 changes: 101 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
"node": "^14 || ^16 || >=18"
},
"workspaces": [
"packages/css-tokenizer",
"packages/css-parser-algorithms",
"packages/media-query-list-parser",
"packages/*",
"plugins/postcss-progressive-custom-properties",
"plugins/*",
Expand Down
7 changes: 7 additions & 0 deletions packages/css-parser-algorithms/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
node_modules
package-lock.json
yarn.lock
*.result.css
*.result.css.map
*.result.json
dist/*
1 change: 1 addition & 0 deletions packages/css-parser-algorithms/.nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
v16.13.1
3 changes: 3 additions & 0 deletions packages/css-parser-algorithms/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
### 1.0.0

- Initial version
20 changes: 20 additions & 0 deletions packages/css-parser-algorithms/LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
The MIT License (MIT)

Copyright 2022 Romain Menke, Antonio Laguna <antonio@laguna.es>

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
120 changes: 120 additions & 0 deletions packages/css-parser-algorithms/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
# CSS Parser Algorithms

[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/css-parser-algorithms.svg" height="20">][npm-url]
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]

Implemented from : https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/

## Usage

Add [CSS Parser Algorithms] to your project:

```bash
npm install postcss @csstools/css-parser-algorithms --save-dev
```

[CSS Parser Algorithms] only accepts tokenized CSS.
It must be used together with `@csstools/css-tokenizer`.


```js
import { tokenizer, TokenType } from '@csstools/css-tokenizer';
import { parseComponentValue } from '@csstools/css-parser-algorithms';

const myCSS = `@media only screen and (min-width: 768rem) {
.foo {
content: 'Some content!' !important;
}
}
`;

const t = tokenizer({
css: myCSS,
});

const tokens = [];

{
while (!t.endOfFile()) {
tokens.push(t.nextToken());
}

tokens.push(t.nextToken()); // EOF-token
}

const options = {
onParseError: ((err) => {
throw new Error(JSON.stringify(err));
}),
};

const result = parseComponentValue(tokens, options);

console.log(result);
```

### Available functions

- [`parseComponentValue`](https://www.w3.org/TR/css-syntax-3/#parse-component-value)
- [`parseListOfComponentValues`](https://www.w3.org/TR/css-syntax-3/#parse-list-of-component-values)
- [`parseCommaSeparatedListOfComponentValues`](https://www.w3.org/TR/css-syntax-3/#parse-comma-separated-list-of-component-values)

### Utilities

#### `gatherNodeAncestry`

The AST does not expose the entire ancestry of each node.
The walker methods do provide access to the current parent, but also not the entire ancestry.

To gather the entire ancestry for a a given sub tree of the AST you can use `gatherNodeAncestry`.
The result is a `Map` with the child nodes as keys and the parents as values.
This allows you to lookup any ancestor of any node.

```css
import { parseComponentValue } from '@csstools/css-parser-algorithms';

const result = parseComponentValue(tokens, options);
const ancestry = gatherNodeAncestry(result);
```

### Options

```ts
{
onParseError?: (error: ParserError) => void
}
```

#### `onParseError`

The parser algorithms are forgiving and won't stop when a parse error is encountered.
Parse errors also aren't tokens.

To receive parsing error information you can set a callback.

Parser errors will try to inform you about the point in the parsing logic the error happened.
This tells you the kind of error.

`start` and `end` are the location in your CSS source code.

`UnclosedSimpleBlockNode` and `UnclosedFunctionNode` entries will be added to the output.
This allows you to recover from errors and/or show warnings.

## Goals and non-goals

Things this package aims to be:
- specification compliant CSS parser
- a reliable low level package to be used in CSS sub-grammars

What it is not:
- opinionated
- fast
- small
- a replacement for PostCSS (PostCSS is fast and also an ecosystem)

[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/@csstools/css-parser-algorithms

[CSS Parser Algorithms]: https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms
Loading