Merge pull request #32 from tbela99/next

- [x] render node with parents
- [x] fix relative color from xyz
- [x] fix bug when inlineCss is true bug no css variable exists
- [x] compute more shorthands
- [x] (web) fetch imported css files from external domains using cors
- [x] create a playground page

Author: tbela99

.github/workflows/node.yml

@@ -17,7 +17,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [ 18.x, 20.x, 21.x ]
+        node-version: [ 18.x, 20.x, 22.x ]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.npmignore

@@ -17,4 +17,5 @@
 /.github
 /.gitattributes
 /Writerside
-/validator
+/validator
+/sw.js

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## V0.5.0
+- [x] render node with parents
+- [x] fix relative color from xyz
+- [x] fix bug when inlineCss is true bug no css variable exists
+- [x] compute more shorthands
+- [x] (web) fetch imported css files from external domains using cors
+
+## V0.4.1
+
+no code change
+
 ## V0.4.0
 
 Parsing

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 Downloads](https://img.shields.io/npm/dm/%40tbela99%2Fcss-parser)](https://www.npmjs.com/package/@tbela99/css-parser)
+[![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/dy/%40tbela99%2Fcss-parser)](https://www.npmjs.com/package/@tbela99/css-parser)
 
 # css-parser
 
@@ -14,8 +14,8 @@ $ npm install @tbela99/css-parser
 
 - no dependency
 - fault-tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
-- efficient minification without unsafe transforms, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
-- minify colors. 
+- fast and 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
@@ -26,6 +26,10 @@ $ npm install @tbela99/css-parser
 - remove duplicate properties
 - flatten @import rules
 
+## Playground
+
+Try it [online](https://tbela99.github.io/css-parser/playground/)
+
 ## Exports
 
 There are several ways to import the library into your application.
@@ -137,7 +141,6 @@ Include ParseOptions and RenderOptions
 - expandNestingRules: boolean, optional. convert nesting rules into separate rules. will automatically set nestingRules to false.
 - 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 {} or html {} rule.
 - removeEmpty: boolean, optional. remove empty rule lists from the ast.
@@ -161,10 +164,11 @@ Include ParseOptions and RenderOptions
 > Minify Options
 
 - minify: boolean, optional. default to _true_. minify css output.
+- withParents: boolean, optional. render this node and its parents.
 - expandNestingRules: boolean, optional. expand nesting rules.
 - preserveLicense: boolean, force preserving comments starting with '/\*!' when minify is enabled.
 - removeComments: boolean, remove comments in generated css.
-- colorConvert: boolean, convert colors to hex.
+- convertColor: boolean, convert colors to hex.
 
 > Sourcemap Options
 
@@ -206,13 +210,30 @@ render(ast, RenderOptions = {});
 Rendering ast
 
 ```javascript
+import {parse, render} from '@tbela99/css-parser';
+
+const css = `
+@media screen and (min-width: 40em) {
+    .featurette-heading {
+        font-size: 50px;
+    }
+    .a {
+        color: red;
+        width: 3px;
+    }
+}
+`;
 
-import {render} from '@tbela99/css-parser';
+const result = await parse(css, options);
 
-// minified
-const {code, stats} = render(ast, {minify: true});
+// print declaration without parents
+console.error(render(result.ast.chi[0].chi[1].chi[1], {withParents: false}));
+// -> width:3px
+
+// print declaration with parents
+console.debug(render(result.ast.chi[0].chi[1].chi[1], {withParents: true}));
+// -> @media screen and (min-width:40em){.a{width:3px}}
 
-console.log(code);
 ```
 
 ### Merge similar rules
@@ -434,9 +455,34 @@ result
     color: navy
 }
 
+```
+### CSS variable inlining and relative color
+
+```javascript
+
+import {parse, render} from '@tbela99/css-parser';
+
+const css = `
+
+html { --bluegreen:  oklab(54.3% -22.5% -5%); }
+.overlay {
+  background:  oklab(from var(--bluegreen) calc(1.0 - l) calc(a * 0.8) b);
+}
+`
+
+const prettyPrint = await parse(css, {inlineCssVariables: true}).then(result => render(result.ast, {minify: false}).code);
+
+```
+result
+
+```css
+.overlay {
+    background: #0c6464
+}
+
 ```
 
-## Node Walker
+# Node Walker
 
 ```javascript
 import {walk} from '@tbela99/css-parser';
@@ -500,7 +546,7 @@ for (const {node, parent, root} of walk(ast)) {
 
 ## Computed shorthands properties
 
-- ~all~
+- [ ] ~all~
 - [x] animation
 - [x] background
 - [x] border
@@ -560,6 +606,8 @@ Ast can be transformed using node visitors
 
 ### Exemple 1: Declaration
 
+the visitor is called for any declaration encountered
+
 ```typescript
 
 import {AstDeclaration, ParserOptions} from "../src/@types";
@@ -592,6 +640,8 @@ console.debug(await transform(css, options));
 
 ### Exemple 2: Declaration
 
+the visitor is called only on 'height' declarations
+
 ```typescript
 
 import {AstDeclaration, LengthToken, ParserOptions} from "../src/@types";
@@ -646,6 +696,8 @@ console.debug(await transform(css, options));
 
 ### Exemple 3: At-Rule
 
+the visitor is called on any at-rule
+
 ```typescript
 
 import {AstAtRule, ParserOptions} from "../src/@types";
@@ -685,6 +737,8 @@ console.debug(await transform(css, options));
 
 ### Exemple 4: At-Rule
 
+the visitor is called only for at-rule media
+
 ```typescript
 
 import {AstAtRule, ParserOptions} from "../src/@types";
@@ -723,6 +777,8 @@ console.debug(await transform(css, options));
 
 ### Exemple 5: Rule
 
+the visitor is called on any Rule
+
 ```typescript
 
 import {AstAtRule, ParserOptions} from "../src/@types";
@@ -755,9 +811,10 @@ console.debug(await transform(css, options));
 ```
 ### Exemple 6: Rule
 
-Adding declarations
+Adding declarations to any rule
 
 ```typescript
+
 import {transform} from "../src/node";
 import {AstRule, ParserOptions} from "../src/@types";
 import {parseDeclarations} from "../src/lib";

dist/config.json.js

@@ -353,18 +353,18 @@ var map = {
 			"initial"
 		],
 		"default": [
-			"0",
-			"0 1",
-			"0 auto",
-			"0 1 auto"
 		],
+		mapping: {
+			"0 1 auto": "initial",
+			"0 0 auto": "none",
+			"1 1 auto": "auto"
+		},
 		properties: {
 			"flex-grow": {
 				required: true,
 				keywords: [
 				],
 				"default": [
-					"0"
 				],
 				types: [
 					"Number"
@@ -374,7 +374,6 @@ var map = {
 				keywords: [
 				],
 				"default": [
-					"1"
 				],
 				types: [
 					"Number"
@@ -390,7 +389,6 @@ var map = {
 					"auto"
 				],
 				"default": [
-					"auto"
 				],
 				types: [
 					"Length",
@@ -1050,8 +1048,8 @@ var map = {
 					"Number"
 				],
 				"default": [
-					"normal",
-					"400"
+					"400",
+					"normal"
 				],
 				keywords: [
 					"normal",
@@ -1406,6 +1404,8 @@ var map = {
 					left: "0",
 					top: "0",
 					center: "50%",
+					"center center": "50%",
+					"50% 50%": "50%",
 					bottom: "100%",
 					right: "100%"
 				},