@tbela99/css-parser 1.4.1 → 1.4.3

package/.nyc_output/4874b20e-6f53-4d7a-be5a-cf68316925f2.json

@@ -0,0 +1 @@
+{"/Users/thierrybela/web/WebstormProjects/css/src/lib/validation/json.ts":{"path":"/Users/thierrybela/web/WebstormProjects/css/src/lib/validation/json.ts","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"all":true},"/Users/thierrybela/web/WebstormProjects/css/src/lib/parser/utils/at-rule-token.ts":{"path":"/Users/thierrybela/web/WebstormProjects/css/src/lib/parser/utils/at-rule-token.ts","statementMap":{},"fnMap":{"0":{"name":"parseAtRuleToken","decl":{"start":{"line":3,"column":16},"end":{"line":3,"column":32}},"loc":{"start":{"line":3,"column":35},"end":{"line":5,"column":1}},"line":3}},"branchMap":{},"s":{},"f":{"0":0},"b":{},"all":true},"/Users/thierrybela/web/WebstormProjects/css/src/lib/ast/features/index.ts":{"path":"/Users/thierrybela/web/WebstormProjects/css/src/lib/ast/features/index.ts","statementMap":{},"fnMap":{},"branchMap":{},"s":{},"f":{},"b":{},"all":true}}

package/.nyc_output/6193bc4c-6f5f-4898-8950-c628825e6342.json

@@ -0,0 +1 @@
+{}

package/.nyc_output/processinfo/4874b20e-6f53-4d7a-be5a-cf68316925f2.json

@@ -0,0 +1 @@
+{"parent":null,"pid":30852,"argv":["/Users/thierrybela/.nvm/versions/node/v25.9.0/bin/node","/Users/thierrybela/web/WebstormProjects/css/node_modules/.bin/nyc","test/specs/node.spec.js"],"execArgv":[],"cwd":"/Users/thierrybela/web/WebstormProjects/css","time":1778344578772,"ppid":30830,"coverageFilename":"/Users/thierrybela/web/WebstormProjects/css/.nyc_output/4874b20e-6f53-4d7a-be5a-cf68316925f2.json","externalId":"","uuid":"4874b20e-6f53-4d7a-be5a-cf68316925f2","files":["/Users/thierrybela/web/WebstormProjects/css/src/lib/validation/json.ts","/Users/thierrybela/web/WebstormProjects/css/src/lib/parser/utils/at-rule-token.ts","/Users/thierrybela/web/WebstormProjects/css/src/lib/ast/features/index.ts"]}

package/.nyc_output/processinfo/6193bc4c-6f5f-4898-8950-c628825e6342.json

@@ -0,0 +1 @@
+{"parent":null,"pid":30856,"argv":["/Users/thierrybela/.nvm/versions/node/v25.9.0/bin/node","undefined"],"execArgv":["-e","\nconst pid = parseInt(process.argv[1], 10)\nprocess.title = 'node (foreground-child watchdog pid=' + pid + ')'\nif (!isNaN(pid)) {\n  let barked = false\n  // keepalive\n  const interval = setInterval(() => {}, 60000)\n  const bark = () => {\n    clearInterval(interval)\n    if (barked) return\n    barked = true\n    process.removeListener('SIGHUP', bark)\n    setTimeout(() => {\n      try {\n        process.kill(pid, 'SIGKILL')\n        setTimeout(() => process.exit(), 200)\n      } catch (_) {}\n    }, 500)\n  })\n  process.on('SIGHUP', bark)\n}\n"],"cwd":"/Users/thierrybela/web/WebstormProjects/css","time":1778344579338,"ppid":1,"coverageFilename":"/Users/thierrybela/web/WebstormProjects/css/.nyc_output/6193bc4c-6f5f-4898-8950-c628825e6342.json","externalId":"","uuid":"6193bc4c-6f5f-4898-8950-c628825e6342","files":[]}

package/.repl_history

@@ -0,0 +1,4 @@
+exit()
+exit
+quit()
+quit

package/CHANGELOG.md

@@ -1,11 +1,175 @@
 # Changelog
 
+## v1.4.3
+
+
+### CSS Modules
+
+- [x] Add css module scope 'shortest' to produce short scoped names
+
+```typescript
+
+result = await transform(css, {
+
+    beautify: true,
+    module: {scoped: ModuleScopeEnumOptions.Shortest
+    }
+
+});
+
+console.log(result.code);
+```
+
+output
+
+```css
+.a {
+    background: red;
+    color: #ff0
+}
+.b {
+    background: blue
+}
+```
+
+### CSS if() function
+
+- [x] support if() css function syntax https://drafts.csswg.org/css-values-5/#if-notation
+- [x] convert css if() function into legacy syntax
+
+```typescript
+
+const css = `
+button {
+	background: linear-gradient(
+		if(media(min-width: 768px): to right; else: to bottom),
+		if(style(--dark-mode): #333; else: #fff),
+		if(style(--dark-mode): #000; else: #ccc)
+	);
+}`;
+
+result = await transform(css, {
+
+    beautify: true,
+    expandIfSyntax: true
+    }
+
+});
+
+console.log(result.code);
+```
+
+output
+
+```css
+button {
+ background: linear-gradient(to bottom,#fff,#ccc);
+ @media (min-width:768px) {
+  background: linear-gradient(to right,#fff,#ccc);
+  @container style(--dark-mode) {
+   background: linear-gradient(to right,#333,#000)
+  }
+ }
+ @container style(--dark-mode) {
+  background: linear-gradient(to bottom,#333,#000)
+ }
+}
+```
+
+
+### CSS Color Module Level 5 (Draft)
+- [x] support contrast-color() https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color
+- [x] custom color space in color() https://drafts.csswg.org/css-color-5/#custom-color
+    - [x] relative color syntax
+    - [x] color syntax
+
+### Media Queries
+- [x] media queries validation
+- [x] automatically generate range media query
+- [x] add at-rule() and named-feature() to @support-condition syntax https://drafts.csswg.org/css-conditional-5/#changes-from-L4
+- [x] support calc() in media features
+
+
+```typescript
+
+const css = `
+
+@media (width >= calc(1024px + 50px)) {
+  h1 {
+    color: Highlight;
+  }
+}`;
+
+result = await transform(css, {
+
+    beautify: true,
+    validation: true
+    }
+
+});
+
+console.log(result.code);
+```
+
+output
+
+```css
+@media (width>=1074px) {
+ h1 {
+  color: Highlight
+ }
+}
+```
+
+### Ast
+
+- [x] add ast search functions
+  - [x] find() search the ast tree and return the first match
+  - [x] findAll() search the ast tree and return all matches
+  - [x] findLast() search the ast tree and return the last match
+  - [x] findByValue() search the ast tree by checking each node's value and return the first match
+
+### Other Changes
+- [x] fix parsing bugs
+- [x] automatically rename standard declaration names : color-adjust => print-color-adjust
+- [x] rewrite parsing and validation logic
+    - [x] selector
+    - [x] declaration
+    - [x] at-rules
+        - [x] @charset
+        - [x] @color-profile
+        - [x] @container
+        - [x] @counter-style
+        - [x] @custom-media
+        - [x] @document
+        - [x] @font-face
+        - [x] @font-feature-values
+        - [x] @font-palette-values
+        - [x] @import
+        - [x] @keyframes
+        - [x] @layer
+        - [x] @media 
+        - [x] @namespace
+        - [x] @page
+        - [x] @position-try
+        - [x] @property
+        - [x] @scope
+        - [x] @starting-style
+        - [x] @supports
+        - [x] @view-transition
+- [x] introduce rawToken type to capture unparseable tokens
+
+## v1.4.2
+
+- [x] add css-conditional-5 @support at-rule(<at-keyword-token>) function
+- [x] fix bug when using remove prefix #120
+
 ## v1.4.0
 
 ### CSS Module support
 
 - [x] scoped name generation
-- composes:
+- [x] composes:
   - [x] compose from local selector
   - [x] compose from other files
   - [x] compose from global selector
@@ -20,17 +184,17 @@
 - [x] css at-rule value
 - [x] keyframe animations
 - [x] grid
-- naming
+- [x] naming
   - [x] ignore
   - [x] camelCase
   - [x] camelCaseOnly
   - [x] dashCase
   - [x] dashCaseOnly
-- default mode
+- [x] default mode
   - [x] global
   - [x] local
   - [x] pure(at least one class or id)
-  - icss
+  - [x] icss
     - [x] :import
     - [x] :export
 

package/README.md

@@ -33,6 +33,7 @@ $ deno add @tbela99/css-parser
 - color conversion to any supported color format
 - automatic nested css rules generation
 - nested css rules conversion to legacy syntax
+- convert css if() function to legacy syntax
 - sourcemap generation
 - css shorthands computation. see the supported properties list below
 - css transform functions minification
@@ -221,6 +222,7 @@ Include ParseOptions and RenderOptions
 - nestingRules: boolean, optional. automatically generated nested rules.
 - expandNestingRules: boolean, optional. convert nesting rules into separate rules. will automatically set nestingRules
   to false.
+- expandIfSyntax: experimental, convert css if() function into legacy syntax.
 - removeDuplicateDeclarations: boolean, optional. remove duplicate declarations.
 - computeTransform: boolean, optional. compute css transform functions.
 - computeShorthand: boolean, optional. compute shorthand properties.
@@ -365,6 +367,45 @@ console.debug(render(result.ast.chi[0].chi[1].chi[1], {withParents: true}));
 
 ```
 
+### CSS Modules
+
+CSS modules features are fully supported. refer to the [CSS modules](https://tbela99.github.io/css-parser/docs/documents/Guide.CSS_modules.html) documentation for more information.
+
+```javascript
+import {transform} from '@tbela99/css-parser';
+
+const css = `
+.table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.table td, .table th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+.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;
+}
+`;
+
+const result = await transform(css, {module: true});
+
+// css code
+console.log(result.code);
+// css mapping
+console.log(result.mapping);
+```
+
 ### Convert colors
 
 ```javascript
@@ -649,6 +690,47 @@ table.colortable th {
 }
 ```
 
+### CSS if() function expansion
+
+```typescript
+
+const css = `
+button {
+	background: linear-gradient(
+		if(media(min-width: 768px): to right; else: to bottom),
+		if(style(--dark-mode): #333; else: #fff),
+		if(style(--dark-mode): #000; else: #ccc)
+	);
+}`;
+
+result = await transform(css, {
+
+    beautify: true,
+    expandIfSyntax: true
+    }
+
+});
+
+console.log(result.code);
+```
+
+output
+
+```css
+button {
+ background: linear-gradient(to bottom,#fff,#ccc);
+ @media (min-width:768px) {
+  background: linear-gradient(to right,#fff,#ccc);
+  @container style(--dark-mode) {
+   background: linear-gradient(to right,#333,#000)
+  }
+ }
+ @container style(--dark-mode) {
+  background: linear-gradient(to bottom,#333,#000)
+ }
+}
+```
+
 ### Calc() resolution
 
 ```javascript

package/badges/coverage.svg

@@ -0,0 +1,20 @@
+<svg width="114.3" height="20" viewBox="0 0 1143 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="coverage: 85.25%">
+  <title>coverage: 85.25%</title>
+  <linearGradient id="AQOpN" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="sgbWQ"><rect width="1143" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#sgbWQ)">
+    <rect width="603" height="200" fill="#555"/>
+    <rect width="540" height="200" fill="#F73" x="603"/>
+    <rect width="1143" height="200" fill="url(#AQOpN)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="60" y="148" textLength="503" fill="#000" opacity="0.25">coverage</text>
+    <text x="50" y="138" textLength="503">coverage</text>
+    <text x="658" y="148" textLength="440" fill="#000" opacity="0.25">85.25%</text>
+    <text x="648" y="138" textLength="440">85.25%</text>
+  </g>
+  
+</svg>