@tbela99/css-parser 0.6.0 → 0.7.1

package/README.md

@@ -1,4 +1,5 @@
-[![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) [![npm](https://img.shields.io/jsr/v/%40tbela99/css-parser?link=https%3A%2F%2Fjsr.io%2F%40tbela99%2Fcss-parser
+)](https://jsr.io/@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)
 
 # css-parser
 
@@ -6,9 +7,15 @@ CSS parser and minifier for node and the browser
 
 ## Installation
 
+From npm
 ```shell
 $ npm install @tbela99/css-parser
 ```
+from jsr
+```shell
+$ deno add @tbela99/css-parser
+```
+
 
 ## Features
 
@@ -25,6 +32,7 @@ $ npm install @tbela99/css-parser
 - inline css variables
 - remove duplicate properties
 - flatten @import rules
+- partial css validation: only css selector is validated
 
 ## Playground
 
@@ -145,9 +153,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 +167,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 +191,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 +328,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",