v1.6.5

CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+# v1.6.5
+
+## New
+
+- [x] Added fine-grained minification parameters:
+  - [x] RenderOptions#minifyValues: minify CSS values such as numbers and dimension tokens
+  - [x] ParseOptions#minifyAST: minify the AST.
+
+## Improvement
+
+```css
+  .footer{
+     grid-row:4;
+     grid-column:1;
+     grid-column-end:2;
+  }
+```
+
+is now computed as 
+
+```css
+.footer {
+ grid-area: 4/1/auto/2
+}
+```
+
+## Fixes
+
+- [x] fix a98-rgb, hwb color color space handling in color-mix()
+- [x] fix percentage handling in relative rgb color
+
+```css
+ .c {
+color: rgb(from rgb(20% 40%  60% / 80%) r g b / calc(alpha / 2));
+```
+is now computed as 
+
+```css
+.c {
+ color: #3696
+}
+```
+
 # v1.6.4
 
 ## New

README.md

@@ -68,6 +68,49 @@ A sample result:
 On the [complete benchmark suite](https://tbela99.github.io/css-parser/benchmark/index.html), css-parser generated a total output size of 2,158,698 bytes, compared to 2,494,113 bytes for Lightning CSS and larger outputs for all other tested minifiers. 
 While some tools prioritize raw execution speed, css-parser focuses on maximizing compression while preserving stylesheet semantics, resulting in consistently smaller production bundles.
 
+## Minification performance vs execution speed
+
+`css-parser` is designed for maximum minification performance, but the optimal configuration depends on what matters most for your workload.
+
+The parser provides settings that let you choose the balance between minification performance and execution speed:
+
+- Minification performance: prioritize the quality and efficiency of the minification process, allowing the parser to perform additional work when generating the minimized output.
+
+- Execution speed: minimize the amount of work performed during parsing and minification to achieve the fastest possible execution time.
+
+However, the available settings allow you to shift the balance toward execution speed when minimizing runtime is more important than performing every available minification optimization.
+
+The example below demonstrates a balanced configuration that improves execution speed by disabling advanced minification features.
+
+```ts
+
+import {transformSync} from "@tbela99/css-parser";
+
+const css = `...`;
+
+const result = transformSync({
+                  input: css,
+                  minify: false,
+                  beautify: false,
+                  removeEmpty: true,
+                  removeComments: true,
+                  convertColor: true,
+                  minifyValues: true,
+                });
+
+console.debug(result.code);
+console.debug(result.stats);
+```
+
+Performance vs execution speed comparison
+
+
+| File:  tailwind.css   | Speed optimization | Minification optimization |
+| --------------------- | ------------------ | ------------------------- |
+| Size: 2,380,419 bytes | 1,890,728 bytes    | 1,633,188 bytes           |
+| Time                  | 205.91 ms          | 471.89 ms                 |
+| Size reduction        | -20.6%             | -31.4%                    |
+
 ## Playground
 
 Try it [online](https://tbela99.github.io/css-parser/playground/)
@@ -196,3 +239,64 @@ Try it [online](https://tbela99.github.io/css-parser/playground/)
 ## Performance
 
 - [x] Bundle file referenced by the @import statement.
+
+# Architecture
+
+```mermaid
+flowchart TD
+    %% --- Transform ---
+    Input(["CSS input"])
+
+
+    %% The Grouped Container
+    subgraph Group10["Transform step"]
+
+        transform["transform()/transformSync()"]
+
+
+        %% The Grouped Container
+        subgraph Group1 ["Parse step"]
+
+            %% --- Parse step ---
+            parse["parse()/parseSync()"]
+            tokenize(["tokenize()"])
+            parseNode(["parse and validate token stream"])
+            visitors(["visitors"])
+            minify(["minify AST"])
+            cssModules(["generate CSS module"])
+            parseResult["Parse result"]
+        end
+
+        %% The Grouped Container
+        subgraph Group2 ["Render step"]
+
+            %% --- Render step ---
+            renderAst(["Render AST"])
+            sourcemap([Sourcemap generation])
+
+        end
+
+        %% --- Result step ---
+        transformResult["Transform result"]
+    end 
+
+    %% --- Routing step ---
+    Input --> transform
+    transform --> parse
+    parse --> tokenize
+    tokenize --> parseNode
+    parseNode -- "Visitors set?"  --> visitors
+    visitors -- "Minify AST?"  --> minify
+    minify -- "CSS module?"  --> cssModules
+    visitors -- "CSS module?"  --> cssModules
+    cssModules --> parseResult
+    parseNode -- "CSS module?" --> cssModules
+    parseNode -- "Minify AST?"  --> minify
+    parseNode --> parseResult
+    visitors --> parseResult
+    minify --> parseResult
+    parseResult --> renderAst
+    renderAst -- "Sourcemap?" --> sourcemap
+    renderAst --> transformResult
+    sourcemap --> transformResult
+```

benchmark/package.json

@@ -10,8 +10,8 @@
     "all": "npm run sizes && npm run bench; npm run report"
   },
   "dependencies": {
-    "@tbela99/css-parser": "^1.6.3",
-    "@tbela99/css-parser2": "github:tbela99/css-parser#04832c9",
+    "@tbela99/css-parser": "^1.6.5",
+    "@tbela99/css-parser2": "github:tbela99/css-parser#b74aa264",
     "clean-css": "^5.3.3",
     "css-tree": "^3.2.1",
     "cssnano": "^9.0.5",
@@ -21,4 +21,4 @@
     "postcss": "^8.5.28",
     "vitest": "^5.0.1"
   }
-}
+}

benchmark/src/generate-report.js

@@ -72,7 +72,7 @@ for (const m of minifiers) {
 totalRow += `</tr>\n`;
 
 const headerCells = minifiers
-    .map((m) => `<th>${m.url != null ? `<a href="${m.url}" target="_top">${m.label}</a>` : m.label}</th>`)
+    .map((m) => `<th>${m.url != null ? `<a href="${m.url}" target="_top"${m.title != null ? ` title="${m.title}"` : ""}>${m.label}</a>` : m.label}</th>`)
     .join("\n");
 
 const html = `<!DOCTYPE html>

benchmark/src/minifiers.js

@@ -10,9 +10,9 @@ import cssnano from "cssnano";
 import * as csso from "csso";
 import * as csstree from "css-tree";
 import * as esbuild from "esbuild";
-import { transform as lightningTransform } from "lightningcss";
-import { transform as tbelaTransform } from "@tbela99/css-parser";
-import {transformSync as tbelaDevTransform} from "@tbela99/css-parser2";
+import { transform } from "lightningcss";
+import { transformSync as tbelaTransform } from "@tbela99/css-parser";
+import { transformSync as tbelaDevTransform } from "@tbela99/css-parser2";
 
 function pkgVersion(name, pathToPkgJson) {
     const { version, repository } = JSON.parse(
@@ -39,16 +39,14 @@ function pkgVersion(name, pathToPkgJson) {
             const githubShorthand = url.match(/^github:([^/]+\/[^/]+)$/);
             if (githubShorthand) {
                 url = `https://github.com/${githubShorthand[1]}`;
-            }
-
-            else {
+            } else {
                 url = url
                     .replace(/^git\+/, "")
                     .replace(/^git@github\.com:/, "https://github.com/")
                     .replace(/^ssh:\/\/git@github\.com\//, "https://github.com/")
                     .replace(/\.git$/, "");
             }
-            
+
             if (!url.match(/[a-zA-Z]+:/)) {
                 url = "https://github.com/" + url;
             }
@@ -99,15 +97,15 @@ export const minifiers = [
         minify: (css) => csso.minify(css).css,
     },
     // infinite loop bug
-    // {
-    //     id: "css-tree",
-    //     url: versions["css-tree"].url,
-    //     label: `css-tree - ${versions["css-tree"].version}`,
-    //     // css-tree has no dedicated minifier API; parse+generate already
-    //     // drops whitespace/comments, which is how the official benchmark
-    //     // treats it too (no property-level optimization, just compact output).
-    //     minify: (css) => csstree.generate(csstree.parse(css)),
-    // },
+    {
+        id: "css-tree",
+        url: versions["css-tree"].url,
+        label: `css-tree - ${versions["css-tree"].version}`,
+        // css-tree has no dedicated minifier API; parse+generate already
+        // drops whitespace/comments, which is how the official benchmark
+        // treats it too (no property-level optimization, just compact output).
+        minify: (css) => csstree.generate(csstree.parse(css)),
+    },
     {
         id: "esbuild",
         url: versions.esbuild.url,
@@ -118,19 +116,28 @@ export const minifiers = [
         id: "lightningcss",
         url: versions.lightningcss.url,
         label: `lightningcss - ${versions.lightningcss.version}`,
-        minify: (css) =>
-            lightningTransform({ filename: "style.css", code: Buffer.from(css), minify: true }).code.toString(),
+        minify: (css) => transform({ filename: "style.css", code: Buffer.from(css), minify: true }).code.toString(),
     },
     {
         id: "css-parser",
         url: versions["css-parser"].url,
-        label: `@tbela99/css-parser - ${versions["css-parser"].version}`,
-        minify: async (css) => (await tbelaTransform(css, { minify: true })).code,
+        label: `@tbela99/css-parser (speed) - ${versions["css-parser"].version}`,
+        title: `settings: { minify: false, beautify: false, removeEmpty: true, removeComments: true, convertColor: true }`,
+        minify: async (css) =>
+            tbelaTransform({
+                input: css,
+                minify: false,
+                beautify: false,
+                removeEmpty: true,
+                removeComments: true,
+                convertColor: true,
+                // minifyValues: true,
+            }).code,
     },
     {
         id: "css-parser-dev",
         url: versions["css-parser-dev"].url,
-        label: `@tbela99/css-parser-dev - ${versions["css-parser-dev"].version}`,
-        minify: async (css) => (await tbelaDevTransform(css, { minify: true })).code,
+        label: `@tbela99/css-parser-dev (default) - ${versions["css-parser-dev"].version}`,
+        minify: async (css) => tbelaDevTransform({ input: css }).code,
     },
 ];