@tbela99/css-parser 0.3.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,18 +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
+- compute css shorthands. see supported properties list below
+- evaluate calc()
 - inline css variables
-- relative css colors using rgb(), hsl() and hwb()
-- nested css expansion
 - 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
 
@@ -51,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.
 
@@ -107,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
@@ -118,67 +215,39 @@ const {code, stats} = render(ast, {minify: true});
 console.log(code);
 ```
 
-## Node Walker
-
-```javascript
-import {walk} from '@tbela99/css-parser';
-
-for (const {node, parent, root} of walk(ast)) {
-    
-    // do somehting
-}
-```
-
-## Exports
+### Merge similar rules
 
-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
@@ -226,8 +295,6 @@ table.colortable {
 }
 ```
 
-## Example 2
-
 ### Nested CSS Expansion
 
 CSS
@@ -250,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);
@@ -283,8 +348,6 @@ table.colortable th {
 }
 ```
 
-### Example 3
-
 ### Calc() resolution
 
 ```javascript
@@ -313,8 +376,6 @@ result
 }
 ```
 
-### Example 4
-
 ### CSS variable inlining
 
 ```javascript
@@ -346,8 +407,6 @@ result
 
 ```
 
-### Example 5
-
 ### CSS variable inlining and relative color
 
 ```javascript
@@ -377,6 +436,17 @@ result
 
 ```
 
+## Node Walker
+
+```javascript
+import {walk} from '@tbela99/css-parser';
+
+for (const {node, parent, root} of walk(ast)) {
+    
+    // do something
+}
+```
+
 ## AST
 
 ### Comment
@@ -525,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 = {
@@ -542,7 +612,7 @@ const options: ParserOptions = {
                     node,
                     {
 
-                        typ: NodeType.DeclarationNodeType,
+                        typ: EnumToken.DeclarationNodeType,
                         nam: 'width',
                         val: [
                             <LengthToken>{
@@ -563,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}
 
 ```
 
@@ -679,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}
+
 ```
 
 ---

package/dist/config.json.js

@@ -924,6 +924,8 @@ var map = {
 			"overflow-x": {
 				"default": [
 				],
+				types: [
+				],
 				keywords: [
 					"auto",
 					"visible",
@@ -935,6 +937,8 @@ var map = {
 			"overflow-y": {
 				"default": [
 				],
+				types: [
+				],
 				keywords: [
 					"auto",
 					"visible",
@@ -1267,13 +1271,27 @@ var map = {
 	},
 	background: {
 		shorthand: "background",
-		pattern: "background-repeat background-color background-image background-attachment background-clip background-origin background-position background-size",
+		pattern: "background-attachment background-origin background-clip background-color background-image background-repeat background-position background-size",
 		keywords: [
 			"none"
 		],
 		"default": [
+			"0 0",
+			"none",
+			"auto",
+			"repeat",
+			"transparent",
+			"#0000",
+			"scroll",
+			"padding-box",
+			"border-box"
 		],
 		multiple: true,
+		set: {
+			"background-origin": [
+				"background-clip"
+			]
+		},
 		separator: {
 			typ: "Comma"
 		},
@@ -1307,6 +1325,7 @@ var map = {
 					"Color"
 				],
 				"default": [
+					"#0000",
 					"transparent"
 				],
 				multiple: true,