@tbela99/css-parser 0.0.1-rc4 → 0.0.1-rc6

package/README.md

@@ -16,6 +16,7 @@ $ npm install @tbela99/css-parser
 - efficient minification, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
 - replace @import at-rules with actual css content of the imported rule
 - automatically generate nested css rules
+- expand nested css
 - works the same way in node and web browser
 
 ### Performance
@@ -160,7 +161,7 @@ Single JavaScript file
 <script src="dist/index-umd-web.js"></script>
 ```
 
-## Example
+## Example 1
 
 ### Automatic CSS Nesting
 
@@ -216,6 +217,63 @@ table.colortable {
 }
 ```
 
+## Example 2
+
+### Nested CSS Expansion
+
+CSS
+
+```css
+table.colortable {
+ & td {
+  text-align: center;
+  &.c {
+   text-transform: uppercase
+  }
+  &:first-child,&:first-child+td {
+   border: 1px solid #000
+  }
+ }
+ & th {
+  text-align: center;
+  background: #000;
+  color: #fff
+ }
+}
+```
+
+Javascript
+```javascript
+import {parse, render} from '@tbela99/css-parser';
+
+
+const options = {minify: true};
+
+const {code} = await parse(css, options).then(result => render(result.ast, {minify: false, expandNestingRules: true}));
+//
+console.debug(code);
+```
+
+Result
+
+```css
+
+table.colortable td {
+  text-align:center;
+}
+table.colortable td.c {
+  text-transform:uppercase;
+}
+table.colortable td:first-child, table.colortable td:first-child+td {
+  border:1px solid black;
+}
+table.colortable th {
+  text-align:center;
+  background:black;
+  color:white;
+}
+```
+
 ## AST
 
 ### Comment

package/dist/config.json.js

@@ -297,6 +297,55 @@ var map = {
 	"border-width": {
 		shorthand: "border"
 	},
+	overflow: {
+		shorthand: "overflow",
+		pattern: "overflow-x overflow-y",
+		keywords: [
+			"auto",
+			"visible",
+			"hidden",
+			"clip",
+			"scroll"
+		],
+		"default": [
+		],
+		mapping: {
+			"visible visible": "visible",
+			"auto auto": "auto",
+			"hidden hidden": "hidden",
+			"scroll scroll": "scroll"
+		},
+		properties: {
+			"overflow-x": {
+				"default": [
+				],
+				keywords: [
+					"auto",
+					"visible",
+					"hidden",
+					"clip",
+					"scroll"
+				]
+			},
+			"overflow-y": {
+				"default": [
+				],
+				keywords: [
+					"auto",
+					"visible",
+					"hidden",
+					"clip",
+					"scroll"
+				]
+			}
+		}
+	},
+	"overflow-x": {
+		shorthand: "overflow"
+	},
+	"overflow-y": {
+		shorthand: "overflow"
+	},
 	outline: {
 		shorthand: "outline",
 		pattern: "outline-color outline-style outline-width",