Merge pull request #3 from oddbird/data-model

First walkthrough, initializing data model

Author: Sana Javed

package-lock.json

@@ -1,6 +1,8 @@
 node_modules
+dist
 package-lock.json
 yarn.lock
+*.log*
 *.result.css
 *.result.css.map
 dist/*

plugins/postcss-cascade-layers/.gitignore

@@ -48,5 +48,8 @@
   },
   "volta": {
     "extends": "../../package.json"
+  },
+  "devDependencies": {
+    "postcss-tape": "^6.0.1"
   }
 }

plugins/postcss-cascade-layers/package.json

@@ -1,38 +1,35 @@
-import type { Container } from 'postcss';
+import { Container } from "postcss";
 
 function postcssCascadeLayers(opts) {
 	return {
-		postcssPlugin: 'postcss-cascade-layers',
+		postcssPlugin: "postcss-cascade-layers",
 		Once(root: Container) {
-			root.walkAtRules((atRule) => {
-				if (atRule.name !== 'layer') {
-					return;
-				}
+			let layerCount = 0;
+			let layerOrder = {};
 
-				// if layer anon, name
-				if(atRule.params === '') {
-					atRule.params = ` anon${(Math.random()).toString()}`;
+			// 1st walkthrough to rename anon layers and store state (no modification of layer styles)
+			root.walkAtRules("layer", (atRule) => {
+				// give anonymous layers a name
+				if (!atRule.params) {
+					atRule.params = `anon${layerCount}`;
 				}
 
-				if (atRule.nodes && atRule.nodes.length) {
-					const atRuleClone = atRule.clone();
-					atRuleClone.nodes.forEach((node) => {
-						const modifiedSelectors = node.selectors.map((selector) => {
-							return `${selector}:not(<N times #foo>)`;
-						});
-						atRule.parent.insertBefore(atRule, node.clone({ selectors: modifiedSelectors }));
-					});
-
-					console.log('nodes', atRule.nodes);
-				} else {
-					console.log(atRule.name, atRule.params);
-					// parse .params as list of layer names
-				/*
-					pattern:
-					@layer foo foo.baz;
-				*/
-				}
+				layerCount += 1;
+				layerOrder[atRule.params] = layerCount;
 			});
+
+			// 2nd walkthrough to transform unlayered styles - need highest specificity (layerCount + 1)
+			// root.walkRules((rule) => {
+			// 	console.log(rule, "second walkthrough");
+			// });
+
+			// 3rd walkthrough to transform layered styles:
+			//  - move out styles from atRule, insert before: https://postcss.org/api/#container-insertbefore
+			//  - delete empty atRule
+			//  - give selectors the specifity they need based on layerPriority state
+			// root.walkAtRules((atRule) => {
+			// 	console.log(atRule, "third walkthrough");
+			// });
 		},
 	};
 }

plugins/postcss-cascade-layers/src/index.ts

@@ -0,0 +1,27 @@
+@layer A {
+	target {
+		color: red;
+	}
+}
+
+@layer B {
+	target {
+		color: orange;
+	}
+}
+
+@layer C {
+	target {
+		color: yellow;
+	}
+}
+
+@layer {
+	target {
+		color: green;
+	}
+}
+
+target {
+	color: purple;
+}

plugins/postcss-cascade-layers/test/anon.layer.css

@@ -0,0 +1,19 @@
+target:not(#something #something #something #something #something) {
+	color: purple;
+}
+
+target:not(#something #something #something #something) {
+	color: green;
+}
+
+target:not(#something #something #something) {
+	color: yellow;
+}
+
+target:not(#something #something) {
+	color: orange;
+}
+
+target:not(#something #something #something) {
+	color: red;
+}