@tbela99/css-parser 0.2.0 → 0.4.0

package/{LICENSE → LICENSE.md}

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Thierry Bela
+Copyright (c) 2024 Thierry Bela
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,4 +1,4 @@
-[![npm](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Ftbela99%2Fcss-parser%2Fmaster%2Fpackage.json&query=version&logo=npm&label=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40tbela99%2Fcss-parser)](https://www.npmjs.com/package/@tbela99/css-parser) [![cov](https://tbela99.github.io/css-parser/badges/coverage.svg)](https://github.com/tbela99/css-parser/actions)
+[![npm](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Ftbela99%2Fcss-parser%2Fmaster%2Fpackage.json&query=version&logo=npm&label=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40tbela99%2Fcss-parser)](https://www.npmjs.com/package/@tbela99/css-parser) [![cov](https://tbela99.github.io/css-parser/badges/coverage.svg)](https://github.com/tbela99/css-parser/actions) [![NPM Downloads](https://img.shields.io/npm/dm/%40tbela99%2Fcss-parser)](https://www.npmjs.com/package/@tbela99/css-parser)
 
 # css-parser
 
@@ -12,16 +12,98 @@ $ npm install @tbela99/css-parser
 
 ## Features
 
+- no dependency
 - 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)
-- automatically generate nested css rules
+- efficient minification without unsafe transforms, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
+- minify colors. 
+- support css color level 4 & 5: color(), lab(), lch(), oklab(), oklch(), color-mix() and relative color
+- generate nested css rules
+- convert nested css rules to legacy syntax
 - generate sourcemap
-- compute css shorthands. see the list below
-- compute calc() expression
-- nested css expansion
+- compute css shorthands. see supported properties list below
+- evaluate calc()
+- inline css variables
 - remove duplicate properties
 - flatten @import rules
-- works the same way in node and web browser
+
+## Exports
+
+There are several ways to import the library into your application.
+
+### Node exports
+
+import as a module
+
+```javascript
+
+import {transform} from '@tbela99/css-parser';
+
+// ...
+```
+### Deno exports
+
+import as a module
+
+```javascript
+
+import {transform} from 'npm:@tbela99/css-parser';
+
+// ...
+```
+import as a CommonJS module
+
+```javascript
+
+const {transform} = require('@tbela99/css-parser/cjs');
+
+// ...
+```
+
+### Web export
+
+Programmatic import
+
+```javascript
+
+import {transform} from '@tbela99/css-parser/web';
+
+// ...
+```
+
+Javascript module from cdn
+
+```javascript
+
+<script type="module">
+
+    import {transform} from 'https://esm.sh/@tbela99/css-parser@0.4.0/web';
+
+
+    const css = `
+    .s {
+
+    background: color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow);
+}
+    `;
+
+    console.debug(await transform(css).then(r => r.code));
+
+</script>
+```
+
+Javascript module
+
+```javascript
+
+<script src="dist/web/index.js" type="module"></script>
+```
+
+Single Javascript file
+
+```javascript
+
+<script src="dist/index-umd-web.js"></script>
+```
 
 ## Transform
 
@@ -49,35 +131,49 @@ Include ParseOptions and RenderOptions
 
 #### ParseOptions
 
+> Minify Options
 - minify: boolean, optional. default to _true_. optimize ast.
-- src: string, optional. original css file location to be used with sourcemap.
-- sourcemap: boolean, optional. preserve node location data.
 - nestingRules: boolean, optional. automatically generated nested rules.
 - expandNestingRules: boolean, optional. convert nesting rules into separate rules. will automatically set nestingRules to false.
-- removeCharset: boolean, optional. remove @charset.
-- removeEmpty: boolean, optional. remove empty rule lists from the ast.
-- resolveUrls: boolean, optional. resolve css 'url()' according to the parameters 'src' and 'cwd'
-- resolveImport: boolean, optional. replace @import rule by the content of its referenced stylesheet.
-- cwd: string, optional. the current working directory. when specified url() are resolved using this value
 - removeDuplicateDeclarations: boolean, optional. remove duplicate declarations.
 - computeShorthand: boolean, optional. compute shorthand properties.
 - 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.
+- inlineCssVariables: boolean, optional. replace some css variables with their actual value. they must be declared once in the :root {} or html {} rule.
+- removeEmpty: boolean, optional. remove empty rule lists from the ast.
+
+> Sourcemap Options
+
+- src: string, optional. original css file location to be used with sourcemap.
+- sourcemap: boolean, optional. preserve node location data.
+
+> Misc Options
+
+- resolveUrls: boolean, optional. resolve css 'url()' according to the parameters 'src' and 'cwd'
+- resolveImport: boolean, optional. replace @import rule by the content of its referenced stylesheet.
+- removeCharset: boolean, optional. remove @charset.
+- cwd: string, optional. the current working directory. when specified url() are resolved using this value
 - visitor: VisitorNodeMap, optional. node visitor used to transform the ast.
 - signal: AbortSignal, optional. abort parsing.
 
 #### RenderOptions
 
+> Minify Options
+
 - minify: boolean, optional. default to _true_. minify css output.
 - expandNestingRules: boolean, optional. expand nesting rules.
-- sourcemap: boolean, optional. generate sourcemap
 - preserveLicense: boolean, force preserving comments starting with '/\*!' when minify is enabled.
-- sourcemap: boolean, optional. generate sourcemap.
-- indent: string, optional. css indention string. uses space character by default.
-- newLine: string, optional. new line character.
 - removeComments: boolean, remove comments in generated css.
 - colorConvert: boolean, convert colors to hex.
+
+> Sourcemap Options
+
+- sourcemap: boolean, optional. generate sourcemap
+
+> Misc Options
+
+- indent: string, optional. css indention string. uses space character by default.
+- newLine: string, optional. new line character.
 - output: string, optional. file where to store css. url() are resolved according to the specified value. no file is created though.
 - cwd: string, optional. value used as current working directory. when output is not provided, urls are resolved according to this value.
 
@@ -105,9 +201,12 @@ const {ast, errors, stats} = await parse(css);
 render(ast, RenderOptions = {});
 ```
 
-### Example
+### Examples
+
+Rendering ast
 
 ```javascript
+
 import {render} from '@tbela99/css-parser';
 
 // minified
@@ -116,67 +215,39 @@ const {code, stats} = render(ast, {minify: true});
 console.log(code);
 ```
 
-## Node Walker
-
-```javascript
-import {walk} from '@tbela99/css-parser';
+### Merge similar rules
 
-for (const {node, parent, root} of walk(ast)) {
-    
-    // do somehting
-}
-```
-
-## Exports
-
-There are several ways to import the library into your application.
-
-### Node exports
-
-import as a module
-
-```javascript
-
-import {transform} from '@tbela99/css-parser';
+CSS
 
-// ...
-```
-import as a CommonJS module
+```css
 
-```javascript
+.clear {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
 
-const {transform} = require('@tbela99/css-parser/cjs');
+.clearfix:before {
 
-// ...
+  height: 0;
+  width: 0;
+}
 ```
 
-### Web export
-
-Programmatic import
-
 ```javascript
 
-import {transform} from '@tbela99/css-parser/web';
-
-// ...
-```
-
-Javascript module
+import {transform} from '@tbela99/css-parser';
 
-```javascript
+const result = await transform(css);
 
-<script src="dist/web/index.js" type="module"></script>
 ```
 
-Single JavaScript file
-
-```javascript
+Result
 
-<script src="dist/index-umd-web.js"></script>
+```css
+.clear,.clearfix:before{height:0;width:0}.clear{color:#0000}
 ```
 
-## Example 1
-
 ### Automatic CSS Nesting
 
 CSS
@@ -224,8 +295,6 @@ table.colortable {
 }
 ```
 
-## Example 2
-
 ### Nested CSS Expansion
 
 CSS
@@ -248,14 +317,12 @@ table.colortable {
  }
 }
 ```
-
 Javascript
+
 ```javascript
 import {parse, render} from '@tbela99/css-parser';
 
-
 const options = {minify: true};
-
 const {code} = await parse(css, options).then(result => render(result.ast, {minify: false, expandNestingRules: true}));
 //
 console.debug(code);
@@ -281,8 +348,6 @@ table.colortable th {
 }
 ```
 
-### Example 3
-
 ### Calc() resolution
 
 ```javascript
@@ -311,8 +376,6 @@ result
 }
 ```
 
-### Example 4
-
 ### CSS variable inlining
 
 ```javascript
@@ -344,6 +407,46 @@ result
 
 ```
 
+### CSS variable inlining and relative color
+
+```javascript
+
+import {parse, render} from '@tbela99/css-parser';
+
+const css = `
+
+:root {
+--color: green;
+}
+._19_u :focus {
+    color:  hsl(from var(--color) calc(h * 2) s l);
+
+}
+`
+
+const prettyPrint = await parse(css, {inlineCssVariables: true}).then(result => render(result.ast, {minify: false}).code);
+
+```
+result
+
+```css
+._19_u :focus {
+    color: navy
+}
+
+```
+
+## Node Walker
+
+```javascript
+import {walk} from '@tbela99/css-parser';
+
+for (const {node, parent, root} of walk(ast)) {
+    
+    // do something
+}
+```
+
 ## AST
 
 ### Comment
@@ -396,24 +499,53 @@ result
 - [x] decode and replace utf-8 escape sequence
 
 ## Computed shorthands properties
+
+- ~all~
 - [x] animation
 - [x] background
 - [x] border
+- [ ] border-block-end
+- [ ] border-block-start
 - [x] border-bottom
 - [x] border-color
+- [ ] border-image
+- [ ] border-inline-end
+- [ ] border-inline-start
 - [x] border-left
 - [x] border-radius
 - [x] border-right
 - [x] border-style
 - [x] border-top
 - [x] border-width
+- [x] column-rule
+- [x] columns
+- [x] container
+- [ ] contain-intrinsic-size
+- [x] flex
+- [x] flex-flow
 - [x] font
+- [ ] font-synthesis
+- [ ] font-variant
+- [x] gap
+- [ ] grid
+- [ ] grid-area
+- [ ] grid-column
+- [ ] grid-row
+- [ ] grid-template
 - [x] inset
 - [x] list-style
 - [x] margin
+- [ ] mask
+- [ ] offset
 - [x] outline
 - [x] overflow
 - [x] padding
+- [ ] place-content
+- [ ] place-items
+- [ ] place-self
+- [ ] scroll-margin
+- [ ] scroll-padding
+- [ ] scroll-timeline
 - [x] text-decoration
 - [x] text-emphasis
 - [x] transition
@@ -463,7 +595,7 @@ console.debug(await transform(css, options));
 ```typescript
 
 import {AstDeclaration, LengthToken, ParserOptions} from "../src/@types";
-import {EnumToken, NodeType} from "../src/lib";
+import {EnumToken, EnumToken} from "../src/lib";
 import {transform} from "../src/node";
 
 const options: ParserOptions = {
@@ -480,7 +612,7 @@ const options: ParserOptions = {
                     node,
                     {
 
-                        typ: NodeType.DeclarationNodeType,
+                        typ: EnumToken.DeclarationNodeType,
                         nam: 'width',
                         val: [
                             <LengthToken>{
@@ -501,11 +633,14 @@ const css = `
 .foo {
     height: calc(100px * 2/ 15);
 }
+.selector {
+color: lch(from peru calc(l * 0.8) calc(c * 0.7) calc(h + 180)) 
+}
 `;
 
 console.debug(await transform(css, options));
 
-// .foo{height:calc(40px/3);width:3px}
+// .foo{height:calc(40px/3);width:3px}.selector{color:#0880b0}
 
 ```
 
@@ -617,6 +752,44 @@ console.debug(await transform(css, options));
 
 // .foo,.bar,.fubar{height:calc(40px/3)}
 
+```
+### Exemple 6: Rule
+
+Adding declarations
+
+```typescript
+import {transform} from "../src/node";
+import {AstRule, ParserOptions} from "../src/@types";
+import {parseDeclarations} from "../src/lib";
+
+const options: ParserOptions = {
+
+    removeEmpty: false,
+    visitor: {
+
+        Rule: async (node: AstRule): Promise<AstRule | null> => {
+
+            if (node.sel == '.foo') {
+
+                node.chi.push(...await parseDeclarations('width: 3px'));
+                return node;
+            }
+
+            return null;
+        }
+    }
+};
+
+const css = `
+
+.foo {
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{width:3px}
+
 ```
 
 ---