@tbela99/css-parser 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v1.3.4
+
+- [x] make streaming optional #109
+- [x] patch at-rule syntax for @font-feature-value #110
+- [x] support percentage in transform() and scale() #111
+- [x] allow arrays in visitor definition #112
+
+## v1.3.3
+
+- [x] relative color computation bug #105
+- [x] allow duplicated declarations of whitelisted properties #106
+
 ## v1.3.2
 
 - [x] add missing return type

package/README.md

@@ -4,7 +4,7 @@
 
 # css-parser
 
-CSS parser and minifier for node and the browser
+CSS parser, minifier and validator for node and the browser
 
 ## Installation
 
@@ -41,6 +41,10 @@ $ deno add @tbela99/css-parser
 - flatten @import rules
 - experimental CSS prefix removal
 
+## Online documentation
+
+See the full documentation at the [CSS Parser](https://tbela99.github.io/css-parser/docs) documentation site
+
 ## Playground
 
 Try it [online](https://tbela99.github.io/css-parser/playground/)
@@ -97,8 +101,7 @@ Javascript module from cdn
 
 <script type="module">
 
-    import {transform} from 'https://esm.sh/@tbela99/css-parser@1.3.1/web';
-
+    import {transform} from 'https://esm.sh/@tbela99/css-parser@1.3.4/web';
 
     const css = `
     .s {
@@ -119,11 +122,44 @@ Javascript module
 <script src="dist/web.js" type="module"></script>
 ```
 
-Single Javascript file
+Javascript umd module from cdn
 
-```javascript
+```html
+
+<script src="https://unpkg.com/@tbela99/css-parser@1.3.4/dist/index-umd-web.js"></script>
+<script>
+
+    (async () => {
+
+        const css = `
+
+.table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.table td, .table th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
 
-<script src="dist/index-umd-web.js"></script>
+.table tr:nth-child(even){background-color: #f2f2f2;}
+
+.table tr:hover {background-color: #ddd;}
+
+.table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: left;
+    background-color: #4CAF50;
+    color: white;
+}
+    `;
+
+        console.debug(await CSSParser.transform(css, {beautify: true, convertColor: CSSParser.ColorType.OKLCH}).then(r => r.code));
+    })();
+
+</script>
 ```
 
 ## Transform
@@ -728,6 +764,7 @@ result
 # Node Walker
 
 ```javascript
+
 import {walk} from '@tbela99/css-parser';
 
 for (const {node, parent, root} of walk(ast)) {
@@ -887,7 +924,8 @@ const css = `
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{transform:scale(calc(40/3))}
 ```
@@ -898,9 +936,7 @@ the visitor is called only on 'height' declarations
 
 ```typescript
 
-import {AstDeclaration, LengthToken, ParserOptions} from "../src/@types";
-import {EnumToken} from "../src/lib";
-import {transform} from "../src/node";
+import {AstDeclaration, EnumToken, LengthToken, ParserOptions, transform} from '@tbela99/css-parser';
 
 const options: ParserOptions = {
 
@@ -942,7 +978,8 @@ color: lch(from peru calc(l * 0.8) calc(c * 0.7) calc(h + 180))
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{height:calc(40px/3);width:3px}.selector{color:#0880b0}
 
@@ -983,7 +1020,8 @@ const css = `
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{height:calc(40px/3)}
 
@@ -1024,7 +1062,8 @@ const css = `
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{height:calc(40px/3)}
 
@@ -1043,10 +1082,10 @@ const options: ParserOptions = {
 
     visitor: {
 
-
         Rule(node: AstRule): AstRule {
 
-            return {...node, sel: '.foo,.bar,.fubar'};
+            node.sel = '.foo,.bar,.fubar'
+            return node;
         }
     }
 };
@@ -1059,7 +1098,8 @@ const css = `
     } 
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo,.bar,.fubar{height:calc(40px/3)}
 
@@ -1071,9 +1111,7 @@ Adding declarations to any rule
 
 ```typescript
 
-import {transform} from "../src/node";
-import {AstRule, ParserOptions} from "../src/@types";
-import {parseDeclarations} from "../src/lib";
+import {AstRule, parseDeclarations, ParserOptions, transform} from '@tbela99/css-parser';
 
 const options: ParserOptions = {
 
@@ -1099,7 +1137,8 @@ const css = `
 }
 `;
 
-console.debug(await transform(css, options));
+const result = await transform(css, options);
+console.debug(result.code);
 
 // .foo{width:3px}