#19 select 4 selector attribute parsing

.gitattributes

@@ -1,5 +1,7 @@
 /test/ export-ignore
 /docs/ export-ignore
+/build.sh export-ignore
+/Writerside export-ignore
 /benchmark
 /tools/ export-ignore
 /happydom.ts export-ignore

.github/workflows/node.yml

@@ -15,8 +15,9 @@ jobs:
     runs-on: ubuntu-latest
 
     strategy:
+      fail-fast: false
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [18.x, 20.x, 21.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -26,5 +27,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install
+    - run: npx playwright install
    # - run: npm run build
     - run: npm test

.npmignore

@@ -1,6 +1,8 @@
 /happydom.ts
 /bunfig.toml
 /test
+/build.sh
+/docs
 /benchmark
 /tools
 /ROADMAP.md
@@ -13,4 +15,5 @@
 /node_modules
 /coverage
 /.github
-/.gitattributes
+/.gitattributes
+/Writerside

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## v0.2.0
+
+- [x] cancellable parser promise using abortSignal
+- [x] node visitor (callback) :
+    - [x] Declaration visitor
+    - [x] selector visitor
+    - [x] at-rule visitor
+- [x] support mixing units with calc()
+
+# shorthands
+
+- [x] transition
+- [x] list-style
+- [x] text-emphasis
+- [x] animation
+
+### Minification
+
+- [x] parsing column combinator
+- [x] css selector level 4 attribute modifiers
+- [x] selector-4 parsing https://www.w3.org/TR/selectors-4/
+
 ## v0.1.0
 
 - [x] sourcemap generation

README.md

@@ -13,7 +13,7 @@ $ npm install @tbela99/css-parser
 ## Features
 
 - fault-tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
-- efficient minification, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html), see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
+- efficient minification, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
 - automatically generate nested css rules
 - generate sourcemap
 - compute css shorthands. see the list below
@@ -64,6 +64,8 @@ Include ParseOptions and RenderOptions
 - inlineCssVariables: boolean, optional. replace css variables with their current value.
 - computeCalcExpression: boolean, optional. evaluate calc() expression
 - inlineCssVariables: boolean, optional. replace some css variables with their actual value. they must be declared once in the :root {} rule.
+- visitor: VisitorNodeMap, optional. node visitor used to transform the ast.
+- signal: AbortSignal, optional. abort parsing.
 
 #### RenderOptions
 
@@ -100,7 +102,7 @@ const {ast, errors, stats} = await parse(css);
 ### Usage
 
 ```javascript
-doRender(ast, RenderOptions = {});
+render(ast, RenderOptions = {});
 ```
 
 ### Example
@@ -416,6 +418,203 @@ result
 
 - [x] flatten @import
 
+## Node Transformation
+
+Ast can be transformed using node visitors
+
+### Exemple 1: Declaration
+
+```typescript
+
+import {AstDeclaration, ParserOptions} from "../src/@types";
+
+const options: ParserOptions = {
+
+    visitor: {
+
+        Declaration: (node: AstDeclaration) => {
+
+            if (node.nam == '-webkit-transform') {
+
+                node.nam = 'transform'
+            }
+        }
+    }
+}
+
+const css = `
+
+.foo {
+    -webkit-transform: scale(calc(100 * 2/ 15));
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{transform:scale(calc(40/3))}
+```
+
+### Exemple 2: Declaration
+
+```typescript
+
+import {AstDeclaration, LengthToken, ParserOptions} from "../src/@types";
+import {EnumToken, NodeType} from "../src/lib";
+import {transform} from "../src/node";
+
+const options: ParserOptions = {
+
+    visitor: {
+
+        Declaration: {
+
+            // called only for height declaration
+            height: (node: AstDeclaration): AstDeclaration[] => {
+
+
+                return [
+                    node,
+                    {
+
+                        typ: NodeType.DeclarationNodeType,
+                        nam: 'width',
+                        val: [
+                            <LengthToken>{
+                                typ: EnumToken.Length,
+                                val: '3',
+                                unit: 'px'
+                            }
+                        ]
+                    }
+                ];
+            }
+        }
+    }
+};
+
+const css = `
+
+.foo {
+    height: calc(100px * 2/ 15);
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{height:calc(40px/3);width:3px}
+
+```
+
+### Exemple 3: At-Rule
+
+```typescript
+
+import {AstAtRule, ParserOptions} from "../src/@types";
+import {transform} from "../src/node";
+
+
+const options: ParserOptions = {
+
+    visitor: {
+
+        AtRule: (node: AstAtRule): AstAtRule => {
+
+            if (node.nam == 'media') {
+
+                return {...node, val: 'all'}
+            }
+        }
+    }
+};
+
+const css = `
+
+@media screen {
+
+    .foo {
+
+            height: calc(100px * 2/ 15);    
+    } 
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{height:calc(40px/3)}
+
+```
+
+### Exemple 4: At-Rule
+
+```typescript
+
+import {AstAtRule, ParserOptions} from "../src/@types";
+import {transform} from "../src/node";
+
+const options: ParserOptions = {
+
+    visitor: {
+
+        AtRule: {
+
+            media: (node: AstAtRule): AstAtRule => {
+
+                return {...node, val: 'all'}
+            }
+        }
+    }
+};
+
+const css = `
+
+@media screen {
+
+    .foo {
+
+            height: calc(100px * 2/ 15);    
+    } 
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{height:calc(40px/3)}
+
+```
+
+### Exemple 5: Rule
+
+```typescript
+
+import {AstAtRule, ParserOptions} from "../src/@types";
+import {transform} from "../src/node";
+
+const options: ParserOptions = {
+
+    visitor: {
+
+
+        Rule (node: AstRule): AstRule {
+
+            return {...node, sel: '.foo,.bar,.fubar'};
+        }
+    }
+};
+
+const css = `
+
+    .foo {
+
+            height: calc(100px * 2/ 15);    
+    } 
+`;
+
+console.debug(await transform(css, options));
+
+// .foo,.bar,.fubar{height:calc(40px/3)}
+
+```
+
 ---
 
 Thanks to [Jetbrains](https://jetbrains.com) for sponsoring this project with a free license

Writerside/c.list

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE categories
+        SYSTEM "https://resources.jetbrains.com/writerside/1.0/categories.dtd">
+<categories>
+    <category id="wrs" name="Writerside documentation" order="1"/>
+</categories>

Writerside/cfg/buildprofiles.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<buildprofiles xsi:noNamespaceSchemaLocation="https://resources.jetbrains.com/writerside/1.0/build-profiles.xsd"
+               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+
+    <variables></variables>
+    <build-profile instance="in">
+        <variables>
+            <noindex-content>false</noindex-content>
+        </variables>
+    </build-profile>
+
+</buildprofiles>

Writerside/in.tree

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE instance-profile
+        SYSTEM "https://resources.jetbrains.com/writerside/1.0/product-profile.dtd">
+
+<instance-profile id="in"
+                  name="Instance Name" start-page="index.md">
+
+    <toc-element topic="index.md"/>
+    <toc-element topic="Reference.topic"/>
+    <toc-element topic="rendering.md"/>
+    <toc-element topic="traversing.md"/>
+    <toc-element topic="parsing.md"/>
+    <toc-element topic="ast.md"/>
+</instance-profile>

Writerside/topics/Reference.topic

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE topic
+        SYSTEM "https://resources.jetbrains.com/writerside/1.0/xhtml-entities.dtd">
+<topic xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+       xsi:noNamespaceSchemaLocation="https://resources.jetbrains.com/writerside/1.0/topic.v2.xsd"
+       title="Reference" id="Reference">
+
+    <p>
+        A reference article is information-oriented.
+        It provides a structured description of a product:
+        its APIs, classes, functions, configuration options, actions, and so on.
+        Start with a summary of what this reference article is about, and what the items you are describing are used for.
+    </p>
+
+    <chapter title="Command" id="command">
+        <p>Syntax:</p>
+
+        <code-block lang="shell">
+            cmd [OPTIONS]
+        </code-block>
+    </chapter>
+
+    <chapter title="Options" id="options">
+        <p>Describe what each option is used for:</p>
+
+        <deflist type="medium">
+            <def title="-o, --open">
+                Opens a file.
+            </def>
+            <def title="-c, --close">
+                Closes a file.
+            </def>
+            <def title="-v --version">
+                Displays version information.
+            </def>
+            <def title="-h, --help">
+                Displays help.
+            </def>
+        </deflist>
+    </chapter>
+
+    <seealso>
+        <!--Provide links to related how-to guides, overviews, and tutorials.-->
+    </seealso>
+</topic>

Writerside/v.list

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE vars SYSTEM "https://resources.jetbrains.com/writerside/1.0/vars.dtd">
+<vars>
+    <var name="product" value="Writerside"/>
+</vars>