@tbela99/css-parser 0.5.4 → 0.7.0

package/README.md

@@ -16,7 +16,7 @@ $ npm install @tbela99/css-parser
 - fault-tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
 - 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
+- support css color level 4 & 5: color(), lab(), lch(), oklab(), oklch(), color-mix(), light-dark(), system colors and relative color
 - generate nested css rules
 - convert nested css rules to legacy syntax
 - generate sourcemap
@@ -25,6 +25,7 @@ $ npm install @tbela99/css-parser
 - inline css variables
 - remove duplicate properties
 - flatten @import rules
+- partial css validation: only css selector is validated
 
 ## Playground
 
@@ -76,7 +77,7 @@ import {transform} from '@tbela99/css-parser/web';
 
 Javascript module from cdn
 
-```javascript
+```html
 
 <script type="module">
 
@@ -145,9 +146,13 @@ Include ParseOptions and RenderOptions
 - 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.
 
+> Minify Options
+
+- validation: boolean, optional. enable strict css validation using (mdn data)[https://github.com/mdn/data]. only the selector is validated at this time.
+
 > Sourcemap Options
 
-- src: string, optional. original css file location to be used with sourcemap.
+- src: string, optional. original css file location to be used with sourcemap, also used to resolve url().
 - sourcemap: boolean, optional. preserve node location data.
 
 > Misc Options
@@ -155,7 +160,7 @@ Include ParseOptions and RenderOptions
 - 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
+- cwd: string, optional. destination directory used to resolve url().
 - visitor: VisitorNodeMap, optional. node visitor used to transform the ast.
 - signal: AbortSignal, optional. abort parsing.
 
@@ -179,7 +184,7 @@ Include ParseOptions and RenderOptions
 - 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.
+- cwd: string, optional. destination directory used to resolve url().
 
 ## Parsing
 
@@ -316,6 +321,104 @@ table.colortable {
 }
 ```
 
+### CSS Validation
+
+CSS
+
+```css
+
+#404 {
+--animate-duration: 1s;
+}
+
+.s, #404 {
+--animate-duration: 1s;
+}
+
+.s [type="text" {
+--animate-duration: 1s;
+}
+
+.s [type="text"]] {
+--animate-duration: 1s;
+}
+
+.s [type="text"] {
+--animate-duration: 1s;
+}
+
+.s [type="text" i] {
+--animate-duration: 1s;
+}
+
+.s [type="text" s] {
+--animate-duration: 1s;
+}
+
+.s [type="text" b] {
+--animate-duration: 1s;
+}
+
+.s [type="text" b], {
+--animate-duration: 1s;
+}
+
+.s [type="text" b]+ {
+--animate-duration: 1s;
+}
+
+.s [type="text" b]+ b {
+--animate-duration: 1s;
+}
+
+.s [type="text" i]+ b {
+--animate-duration: 1s;
+}
+
+
+.s [type="text"())] {
+--animate-duration: 1s;
+}
+.s() {
+--animate-duration: 1s;
+}
+.s:focus {
+--animate-duration: 1s;
+}
+```
+
+with validation enabled
+
+```javascript
+import {parse, render} from '@tbela99/css-parser';
+const options = {minify: true, validate: true};
+const {code} = await parse(css, options).then(result => render(result.ast, {minify: false}));
+//
+console.debug(code);
+```
+
+```css
+.s:is([type=text],[type=text i],[type=text s],[type=text i]+b,:focus) {
+ --animate-duration: 1s
+}
+```
+
+with validation disabled
+
+```javascript   
+import {parse, render} from '@tbela99/css-parser';
+const options = {minify: true, validate: false};
+const {code} = await parse(css, options).then(result => render(result.ast, {minify: false}));
+//
+console.debug(code);
+```
+
+```css
+.s:is([type=text],[type=text i],[type=text s],[type=text b],[type=text b]+b,[type=text i]+b,:focus) {
+    --animate-duration: 1s
+}
+```
+
 ### Nested CSS Expansion
 
 CSS

package/dist/config.json.js

@@ -450,7 +450,9 @@ var map = {
 	transition: {
 		shorthand: "transition",
 		multiple: true,
-		separator: ",",
+		separator: {
+			typ: "Comma"
+		},
 		pattern: "transition-property transition-duration transition-timing-function transition-delay transition-behavior",
 		keywords: [
 			"none",