@tbela99/css-parser 0.2.0 → 0.3.0

package/README.md

@@ -18,6 +18,8 @@ $ npm install @tbela99/css-parser
 - generate sourcemap
 - compute css shorthands. see the list below
 - compute calc() expression
+- inline css variables
+- relative css colors using rgb(), hsl() and hwb()
 - nested css expansion
 - remove duplicate properties
 - flatten @import rules
@@ -344,6 +346,37 @@ result
 
 ```
 
+### Example 5
+
+### CSS variable inlining and relative color
+
+```javascript
+
+import {parse, render} from '@tbela99/css-parser';
+
+const css = `
+
+:root {
+--color: green;
+}
+._19_u :focus {
+    color:  hsl(from var(--color) calc(h * 2) s l);
+
+}
+`
+
+const prettyPrint = await parse(css, {inlineCssVariables: true}).then(result => render(result.ast, {minify: false}).code);
+
+```
+result
+
+```css
+._19_u :focus {
+    color: navy
+}
+
+```
+
 ## AST
 
 ### Comment
@@ -396,24 +429,53 @@ result
 - [x] decode and replace utf-8 escape sequence
 
 ## Computed shorthands properties
+
+- ~all~
 - [x] animation
 - [x] background
 - [x] border
+- [ ] border-block-end
+- [ ] border-block-start
 - [x] border-bottom
 - [x] border-color
+- [ ] border-image
+- [ ] border-inline-end
+- [ ] border-inline-start
 - [x] border-left
 - [x] border-radius
 - [x] border-right
 - [x] border-style
 - [x] border-top
 - [x] border-width
+- [x] column-rule
+- [x] columns
+- [x] container
+- [ ] contain-intrinsic-size
+- [x] flex
+- [x] flex-flow
 - [x] font
+- [ ] font-synthesis
+- [ ] font-variant
+- [x] gap
+- [ ] grid
+- [ ] grid-area
+- [ ] grid-column
+- [ ] grid-row
+- [ ] grid-template
 - [x] inset
 - [x] list-style
 - [x] margin
+- [ ] mask
+- [ ] offset
 - [x] outline
 - [x] overflow
 - [x] padding
+- [ ] place-content
+- [ ] place-items
+- [ ] place-self
+- [ ] scroll-margin
+- [ ] scroll-padding
+- [ ] scroll-timeline
 - [x] text-decoration
 - [x] text-emphasis
 - [x] transition

package/dist/config.json.js

@@ -1,4 +1,26 @@
 var properties = {
+	gap: {
+		shorthand: "gap",
+		properties: [
+			"row-gap",
+			"column-gap"
+		],
+		types: [
+			"Length",
+			"Perc"
+		],
+		multiple: false,
+		separator: null,
+		keywords: [
+			"normal"
+		]
+	},
+	"row-gap": {
+		shorthand: "gap"
+	},
+	"column-gap": {
+		shorthand: "gap"
+	},
 	inset: {
 		shorthand: "inset",
 		properties: [
@@ -232,6 +254,201 @@ var properties = {
 	}
 };
 var map = {
+	"flex-flow": {
+		shorthand: "flex-flow",
+		pattern: "flex-direction flex-wrap",
+		keywords: [
+		],
+		"default": [
+			"row",
+			"nowrap"
+		],
+		properties: {
+			"flex-direction": {
+				keywords: [
+					"row",
+					"row-reverse",
+					"column",
+					"column-reverse"
+				],
+				"default": [
+					"row"
+				],
+				types: [
+				]
+			},
+			"flex-wrap": {
+				keywords: [
+					"wrap",
+					"nowrap",
+					"wrap-reverse"
+				],
+				"default": [
+					"nowrap"
+				],
+				types: [
+				]
+			}
+		}
+	},
+	"flex-direction": {
+		shorthand: "flex-flow"
+	},
+	"flex-wrap": {
+		shorthand: "flex-flow"
+	},
+	container: {
+		shorthand: "container",
+		pattern: "container-name container-type",
+		keywords: [
+		],
+		"default": [
+		],
+		properties: {
+			"container-name": {
+				required: true,
+				multiple: true,
+				keywords: [
+					"none"
+				],
+				"default": [
+					"none"
+				],
+				types: [
+					"Iden",
+					"DashedIden"
+				]
+			},
+			"container-type": {
+				previous: "container-name",
+				prefix: {
+					typ: "Literal",
+					val: "/"
+				},
+				keywords: [
+					"size",
+					"inline-size",
+					"normal"
+				],
+				"default": [
+					"normal"
+				],
+				types: [
+				]
+			}
+		}
+	},
+	"container-name": {
+		shorthand: "container"
+	},
+	"container-type": {
+		shorthand: "container"
+	},
+	flex: {
+		shorthand: "flex",
+		pattern: "flex-grow flex-shrink flex-basis",
+		keywords: [
+			"auto",
+			"none",
+			"initial"
+		],
+		"default": [
+			"0",
+			"0 1",
+			"0 auto",
+			"0 1 auto"
+		],
+		properties: {
+			"flex-grow": {
+				required: true,
+				keywords: [
+				],
+				"default": [
+					"0"
+				],
+				types: [
+					"Number"
+				]
+			},
+			"flex-shrink": {
+				keywords: [
+				],
+				"default": [
+					"1"
+				],
+				types: [
+					"Number"
+				]
+			},
+			"flex-basis": {
+				keywords: [
+					"max-content",
+					"min-content",
+					"fit-content",
+					"fit-content",
+					"content",
+					"auto"
+				],
+				"default": [
+					"auto"
+				],
+				types: [
+					"Length",
+					"Perc"
+				]
+			}
+		}
+	},
+	"flex-grow": {
+		shorthand: "flex"
+	},
+	"flex-shrink": {
+		shorthand: "flex"
+	},
+	"flex-basis": {
+		shorthand: "flex"
+	},
+	columns: {
+		shorthand: "columns",
+		pattern: "column-count column-width",
+		keywords: [
+			"auto"
+		],
+		"default": [
+			"auto",
+			"auto auto"
+		],
+		properties: {
+			"column-count": {
+				keywords: [
+					"auto"
+				],
+				"default": [
+					"auto"
+				],
+				types: [
+					"Number"
+				]
+			},
+			"column-width": {
+				keywords: [
+					"auto"
+				],
+				"default": [
+					"auto"
+				],
+				types: [
+					"Length"
+				]
+			}
+		}
+	},
+	"column-count": {
+		shorthand: "columns"
+	},
+	"column-width": {
+		shorthand: "columns"
+	},
 	transition: {
 		shorthand: "transition",
 		multiple: true,
@@ -249,6 +466,13 @@ var map = {
 			"none",
 			"normal"
 		],
+		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"
+		},
 		properties: {
 			"transition-property": {
 				keywords: [
@@ -256,6 +480,7 @@ var map = {
 					"all"
 				],
 				"default": [
+					"all"
 				],
 				types: [
 					"Iden"