@tbela99/css-parser 0.1.0 → 0.2.0

package/README.md

@@ -13,7 +13,7 @@ $ npm install @tbela99/css-parser
 ## Features
 
 - fault-tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
-- efficient minification, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html), see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
+- efficient minification, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
 - automatically generate nested css rules
 - generate sourcemap
 - compute css shorthands. see the list below
@@ -64,6 +64,8 @@ Include ParseOptions and RenderOptions
 - inlineCssVariables: boolean, optional. replace css variables with their current value.
 - computeCalcExpression: boolean, optional. evaluate calc() expression
 - inlineCssVariables: boolean, optional. replace some css variables with their actual value. they must be declared once in the :root {} rule.
+- visitor: VisitorNodeMap, optional. node visitor used to transform the ast.
+- signal: AbortSignal, optional. abort parsing.
 
 #### RenderOptions
 
@@ -100,7 +102,7 @@ const {ast, errors, stats} = await parse(css);
 ### Usage
 
 ```javascript
-doRender(ast, RenderOptions = {});
+render(ast, RenderOptions = {});
 ```
 
 ### Example
@@ -394,6 +396,7 @@ result
 - [x] decode and replace utf-8 escape sequence
 
 ## Computed shorthands properties
+- [x] animation
 - [x] background
 - [x] border
 - [x] border-bottom
@@ -406,16 +409,216 @@ result
 - [x] border-width
 - [x] font
 - [x] inset
+- [x] list-style
 - [x] margin
 - [x] outline
 - [x] overflow
 - [x] padding
 - [x] text-decoration
+- [x] text-emphasis
+- [x] transition
 
 ## Performance
 
 - [x] flatten @import
 
+## Node Transformation
+
+Ast can be transformed using node visitors
+
+### Exemple 1: Declaration
+
+```typescript
+
+import {AstDeclaration, ParserOptions} from "../src/@types";
+
+const options: ParserOptions = {
+
+    visitor: {
+
+        Declaration: (node: AstDeclaration) => {
+
+            if (node.nam == '-webkit-transform') {
+
+                node.nam = 'transform'
+            }
+        }
+    }
+}
+
+const css = `
+
+.foo {
+    -webkit-transform: scale(calc(100 * 2/ 15));
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{transform:scale(calc(40/3))}
+```
+
+### Exemple 2: Declaration
+
+```typescript
+
+import {AstDeclaration, LengthToken, ParserOptions} from "../src/@types";
+import {EnumToken, NodeType} from "../src/lib";
+import {transform} from "../src/node";
+
+const options: ParserOptions = {
+
+    visitor: {
+
+        Declaration: {
+
+            // called only for height declaration
+            height: (node: AstDeclaration): AstDeclaration[] => {
+
+
+                return [
+                    node,
+                    {
+
+                        typ: NodeType.DeclarationNodeType,
+                        nam: 'width',
+                        val: [
+                            <LengthToken>{
+                                typ: EnumToken.Length,
+                                val: '3',
+                                unit: 'px'
+                            }
+                        ]
+                    }
+                ];
+            }
+        }
+    }
+};
+
+const css = `
+
+.foo {
+    height: calc(100px * 2/ 15);
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{height:calc(40px/3);width:3px}
+
+```
+
+### Exemple 3: At-Rule
+
+```typescript
+
+import {AstAtRule, ParserOptions} from "../src/@types";
+import {transform} from "../src/node";
+
+
+const options: ParserOptions = {
+
+    visitor: {
+
+        AtRule: (node: AstAtRule): AstAtRule => {
+            
+            if (node.nam == 'media') {
+
+                return {...node, val: 'all'}
+            }
+        }
+    }
+};
+
+const css = `
+
+@media screen {
+       
+    .foo {
+
+            height: calc(100px * 2/ 15);    
+    } 
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{height:calc(40px/3)}
+
+```
+
+### Exemple 4: At-Rule
+
+```typescript
+
+import {AstAtRule, ParserOptions} from "../src/@types";
+import {transform} from "../src/node";
+
+const options: ParserOptions = {
+
+    visitor: {
+
+        AtRule: {
+
+            media: (node: AstAtRule): AstAtRule => {
+
+                return {...node, val: 'all'}
+            }
+        }
+    }
+};
+
+const css = `
+
+@media screen {
+       
+    .foo {
+
+            height: calc(100px * 2/ 15);    
+    } 
+}
+`;
+
+console.debug(await transform(css, options));
+
+// .foo{height:calc(40px/3)}
+
+```
+
+### Exemple 5: Rule
+
+```typescript
+
+import {AstAtRule, ParserOptions} from "../src/@types";
+import {transform} from "../src/node";
+
+const options: ParserOptions = {
+
+    visitor: {
+
+
+        Rule (node: AstRule): AstRule {
+
+            return {...node, sel: '.foo,.bar,.fubar'};
+        }
+    }
+};
+
+const css = `
+
+    .foo {
+
+            height: calc(100px * 2/ 15);    
+    } 
+`;
+
+console.debug(await transform(css, options));
+
+// .foo,.bar,.fubar{height:calc(40px/3)}
+
+```
+
 ---
 
 Thanks to [Jetbrains](https://jetbrains.com) for sponsoring this project with a free license

package/dist/config.json.js

@@ -232,6 +232,317 @@ var properties = {
 	}
 };
 var map = {
+	transition: {
+		shorthand: "transition",
+		multiple: true,
+		separator: ",",
+		pattern: "transition-property transition-duration transition-timing-function transition-delay transition-behavior",
+		keywords: [
+			"none",
+			"all"
+		],
+		"default": [
+			"0s",
+			"0ms",
+			"all",
+			"ease",
+			"none",
+			"normal"
+		],
+		properties: {
+			"transition-property": {
+				keywords: [
+					"none",
+					"all"
+				],
+				"default": [
+				],
+				types: [
+					"Iden"
+				]
+			},
+			"transition-duration": {
+				keywords: [
+				],
+				"default": [
+					"0s",
+					"0ms",
+					"normal"
+				],
+				types: [
+					"Time"
+				]
+			},
+			"transition-timing-function": {
+				keywords: [
+					"ease",
+					"ease-in",
+					"ease-out",
+					"ease-in-out",
+					"linear",
+					"step-start",
+					"step-end"
+				],
+				"default": [
+					"ease"
+				],
+				types: [
+					"TimingFunction"
+				],
+				mapping: {
+					"cubic-bezier(.25,.1,.25,1)": "ease",
+					"cubic-bezier(0,0,1,1)": "linear",
+					"cubic-bezier(.42,0,1,1)": "ease-in",
+					"cubic-bezier(0,0,.58,1)": "ease-out",
+					"cubic-bezier(.42,0,.58,.42)": "ease-in-out"
+				}
+			},
+			"transition-delay": {
+				keywords: [
+				],
+				"default": [
+					"0s"
+				],
+				types: [
+					"Time"
+				]
+			},
+			"transition-behavior": {
+				keywords: [
+					"normal",
+					"allow-discrete"
+				],
+				"default": [
+					"normal"
+				],
+				types: [
+				]
+			}
+		}
+	},
+	"transition-property": {
+		shorthand: "transition"
+	},
+	"transition-duration": {
+		shorthand: "transition"
+	},
+	"transition-timing-function": {
+		shorthand: "transition"
+	},
+	"transition-delay": {
+		shorthand: "transition"
+	},
+	"transition-behavior": {
+		shorthand: "transition"
+	},
+	animation: {
+		shorthand: "animation",
+		pattern: "animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-timeline",
+		"default": [
+			"1",
+			"0s",
+			"0ms",
+			"none",
+			"ease",
+			"normal",
+			"running",
+			"auto"
+		],
+		properties: {
+			"animation-name": {
+				keywords: [
+					"none"
+				],
+				"default": [
+					"none"
+				],
+				types: [
+					"Iden"
+				]
+			},
+			"animation-duration": {
+				keywords: [
+					"auto"
+				],
+				"default": [
+					"0s",
+					"0ms",
+					"auto"
+				],
+				types: [
+					"Time"
+				],
+				mapping: {
+					auto: "0s"
+				}
+			},
+			"animation-timing-function": {
+				keywords: [
+					"ease",
+					"ease-in",
+					"ease-out",
+					"ease-in-out",
+					"linear",
+					"step-start",
+					"step-end"
+				],
+				"default": [
+					"ease"
+				],
+				types: [
+					"TimingFunction"
+				],
+				mapping: {
+					"cubic-bezier(.25,.1,.25,1)": "ease",
+					"cubic-bezier(0,0,1,1)": "linear",
+					"cubic-bezier(.42,0,1,1)": "ease-in",
+					"cubic-bezier(0,0,.58,1)": "ease-out",
+					"cubic-bezier(.42,0,.58,.42)": "ease-in-out"
+				}
+			},
+			"animation-delay": {
+				keywords: [
+				],
+				"default": [
+					"0s",
+					"0ms"
+				],
+				types: [
+					"Time"
+				]
+			},
+			"animation-iteration-count": {
+				keywords: [
+					"infinite"
+				],
+				"default": [
+					"1"
+				],
+				types: [
+					"Number"
+				]
+			},
+			"animation-direction": {
+				keywords: [
+					"normal",
+					"reverse",
+					"alternate",
+					"alternate-reverse"
+				],
+				"default": [
+					"normal"
+				],
+				types: [
+				]
+			},
+			"animation-fill-mode": {
+				keywords: [
+					"none",
+					"forwards",
+					"backwards",
+					"both"
+				],
+				"default": [
+					"none"
+				],
+				types: [
+				]
+			},
+			"animation-play-state": {
+				keywords: [
+					"running",
+					"paused"
+				],
+				"default": [
+					"running"
+				],
+				types: [
+				]
+			},
+			"animation-timeline": {
+				keywords: [
+					"none",
+					"auto"
+				],
+				"default": [
+					"auto"
+				],
+				types: [
+					"DashedIden",
+					"TimelineFunction"
+				]
+			}
+		}
+	},
+	"animation-name": {
+		shorthand: "animation"
+	},
+	"animation-duration": {
+		shorthand: "animation"
+	},
+	"animation-timing-function": {
+		shorthand: "animation"
+	},
+	"animation-delay": {
+		shorthand: "animation"
+	},
+	"animation-iteration-count": {
+		shorthand: "animation"
+	},
+	"animation-direction": {
+		shorthand: "animation"
+	},
+	"animation-fill-mode": {
+		shorthand: "animation"
+	},
+	"animation-play-state": {
+		shorthand: "animation"
+	},
+	"animation-timeline": {
+		shorthand: "animation"
+	},
+	"text-emphasis": {
+		shorthand: "text-emphasis",
+		pattern: "text-emphasis-color text-emphasis-style",
+		"default": [
+			"none",
+			"currentcolor"
+		],
+		properties: {
+			"text-emphasis-style": {
+				keywords: [
+					"none",
+					"filled",
+					"open",
+					"dot",
+					"circle",
+					"double-circle",
+					"triangle",
+					"sesame"
+				],
+				"default": [
+					"none"
+				],
+				types: [
+					"String"
+				]
+			},
+			"text-emphasis-color": {
+				"default": [
+					"currentcolor"
+				],
+				types: [
+					"Color"
+				]
+			}
+		}
+	},
+	"text-emphasis-style": {
+		shorthand: "text-emphasis"
+	},
+	"text-emphasis-color": {
+		shorthand: "text-emphasis"
+	},
 	border: {
 		shorthand: "border",
 		pattern: "border-color border-style border-width",
@@ -297,6 +608,75 @@ var map = {
 	"border-width": {
 		shorthand: "border"
 	},
+	"list-style": {
+		shorthand: "list-style",
+		pattern: "list-style-type list-style-position list-style-image",
+		keywords: [
+			"none",
+			"outside"
+		],
+		"default": [
+			"none",
+			"outside"
+		],
+		properties: {
+			"list-style-position": {
+				types: [
+				],
+				"default": [
+					"outside"
+				],
+				keywords: [
+					"inside",
+					"outside"
+				]
+			},
+			"list-style-image": {
+				"default": [
+					"none"
+				],
+				keywords: [
+					"node"
+				],
+				types: [
+					"UrlFunc",
+					"ImageFunc"
+				]
+			},
+			"list-style-type": {
+				types: [
+					"String",
+					"Iden",
+					"Symbols"
+				],
+				"default": [
+					"disc"
+				],
+				keywords: [
+					"disc",
+					"circle",
+					"square",
+					"decimal",
+					"decimal-leading-zero",
+					"lower-roman",
+					"upper-roman",
+					"lower-greek",
+					"lower-latin",
+					"upper-latin",
+					"none"
+				]
+			}
+		}
+	},
+	"list-style-position": {
+		shorthand: "list-style"
+	},
+	"list-style-image": {
+		shorthand: "list-style"
+	},
+	"list-style-type": {
+		shorthand: "list-style"
+	},
 	overflow: {
 		shorthand: "overflow",
 		pattern: "overflow-x overflow-y",
@@ -354,7 +734,8 @@ var map = {
 		],
 		"default": [
 			"0",
-			"none"
+			"none",
+			"currentcolor"
 		],
 		properties: {
 			"outline-color": {
@@ -362,10 +743,10 @@ var map = {
 					"Color"
 				],
 				"default": [
-					"currentColor"
+					"currentcolor"
 				],
 				keywords: [
-					"currentColor"
+					"currentcolor"
 				]
 			},
 			"outline-style": {
@@ -709,7 +1090,8 @@ var map = {
 			},
 			"background-image": {
 				types: [
-					"UrlFunc"
+					"UrlFunc",
+					"ImageFunc"
 				],
 				"default": [
 					"none"