Merge pull request #44 from tbela99/prefix_removal

fix merging rules, css selector validation, experimental prefix removal #43

Author: tbela99

.gitignore

@@ -1,6 +1,17 @@
 /errors.txt
 /syntax.txt
 /ROADMAP.draft.md
+/.idea
+/.DS_Store
+/ROADMAP.md
+/docs
+/package-lock.json
+test/*.ts
+test/*.js
+test/*.css
+test/*.html
+test/*.json
+test/*.md
 
 # Logs
 logs

.npmignore

@@ -18,4 +18,5 @@
 /.gitattributes
 /Writerside
 /validator
-/sw.js
+/sw.js
+/jsr.json

CHANGELOG.md

@@ -1,6 +1,26 @@
 # Changelog
 
+#v0.7.0
+
+- [x] fix merging rules
+- [ ] experimental CSS prefix removal
+    - [x] declaration name
+    - [ ] declaration value
+    - [ ] exclude -webkit-* gradients
+    - [x] css selector validation
+        - [x] pseudo element
+        - [x] partial pseudo class validation. does not validate parameters
+        - [x] attribute selector
+        - [x] combinator
+        - [x] simple selector
+        - [x] nested selector
+        - [x] strict vs permissive validation: allow unknown items such as pseudo classes
+            - [x] allow unknown pseudo classes
+            - [x] allow unknown attribute selectors
+- [x] strip universal selector when possible
+
 # v0.6.0
+
 - [x] light-dark() color
 - [x] system color
 
@@ -58,15 +78,16 @@ CSS color level 4 & 5
 - [x] gap
 
 ### Other
+
 - [x] renamed RenderOptions.colorConvert to RenderOptions.convertColor
 - [x] support none keyword in color
 - [x] css relative color syntax for rgb(), hsl() and hwb() colors https://www.w3.org/TR/css-color-5/#relative-colors
-  - [x] rgb
-  - [x] hex
-  - [x] hsl
-  - [x] hwb
-  - [x] calc()
-  - [x] calc() and inline var()
+    - [x] rgb
+    - [x] hex
+    - [x] hsl
+    - [x] hwb
+    - [x] calc()
+    - [x] calc() and inline var()
 
 ## v0.2.0
 
@@ -93,7 +114,7 @@ CSS color level 4 & 5
 ## v0.1.0
 
 - [x] sourcemap generation
-- [x] reduce calc(): 
+- [x] reduce calc():
 - [x] inline css variables
 - [x] configure duplicate declarations removal
 - [x] configure shorthand properties computation
@@ -104,7 +125,7 @@ CSS color level 4 & 5
 
 - [x] merge identical rules
 - [x] merge adjacent rules
-- [x] minify colors 
+- [x] minify colors
 - [x] minify numbers and Dimensions tokens
 - [x] compute shorthand: see the list below
 - [x] remove redundant declarations
@@ -113,12 +134,14 @@ CSS color level 4 & 5
 - [x] conditionally unwrap :is()
 - [x] automatic css nesting
 - [x] automatically wrap selectors using :is()
-- [x] multi-level shorthand properties (border - [border-width, border-color, border-style, etc.]) https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
+- [x] multi-level shorthand properties (
+  border - [border-width, border-color, border-style, etc.]) https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
 - [x] avoid reparsing (declarations, selectors, at-rule)
 - [x] node and browser versions
 - [x] decode and replace utf-8 escape sequence
 
 ### Computed shorthands
+
 - [x] background
 - [x] border
 - [x] border-bottom

README.md

@@ -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
 
@@ -145,17 +146,21 @@ 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
 
 - 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

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",