feat: update examples

Author: phoenisx

examples/multi-root/proj-1/index.css

@@ -7,6 +7,9 @@
   color: var(--color-1);
   background-color: var(--color-2);
 
+  /* LOL!! I didn't know adding a var() in the comment makes it visible for diagnostics */
+  /* FIXME(phoenisx) When var() function is used with default values, the regex doesn't */
+  /* work as expected */
   /* Non declared variable test */
   color: var(--space-2, 2rem);
 }

examples/multi-root/proj-3/index.css

@@ -2,6 +2,8 @@
 @import "./theme.dark.css";
 
 body {
+  /* FIXME(phoenisx) Not working. It was working before */
+  /* It started working after reload */
   color: var(--primary-text);
   background-color: var(--primary-bg);
   padding: var(--container-spacing);

examples/recursion/.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cssvar.files": ["testing.css"],
+  "cssvar.files": ["testing-*.css"],
 }

examples/recursion/02-var-fn-not-evaluated.css

@@ -7,8 +7,8 @@
 }
 
 .test {
-  /* This needs to be fixed, and will be fixed once stop using object mapping in */
-  /* done to single value in v3.0 */
+  /* --foo should point to #f00, but it isn't righ now */
+  /* Need to find a way to set recursive value to previously declared variable */
   background: var(--foo);
 }
 

examples/recursion/testing-base.css

@@ -0,0 +1,12 @@
+:root {
+  --fuzz: #fff;
+
+  --fuzz-large: var(--fuzz);
+  --boo: var(--not-defined);
+}
+
+@media (min-width: 768px) {
+  :root {
+    --boo: 48px;
+  }
+}

examples/recursion/testing-index.css

@@ -0,0 +1,10 @@
+.card {
+  background: var(--fuzz);
+  padding: var(--not-defined);
+}
+
+/* Just updating variables instead of having to re-define each property */
+.card--large {
+  --fuzz: var(--fuzz-large);
+  --not-defined: var(--boo);
+}

examples/recursion/testing-solo.css

@@ -0,0 +1,16 @@
+/* Folllowing is valid css */
+:root {
+  --bar: var(--foo);
+}
+
+.test {
+  background: var(--foo);
+}
+
+.test--two {
+  --foo: var(--bar);
+}
+
+.test--two.define {
+  --foo: lightgreen;
+}

examples/recursion/testing.css

@@ -1,5 +1,6 @@
 {
   "cssvar.postcssPlugins": [
+    // `cwd` option is required only if tokencss config is not declared directly under project root
     ["@tokencss/postcss", { "cwd": "examples/tokencss-plugin/config" }]
   ]
 }

examples/tokencss-plugin/.vscode/settings.json

@@ -223,8 +223,3 @@ describe("Test Extension Main", () => {
     });
   });
 });
-
-// Need to work on this later.
-test.skip("setup() should map user config to in-mem Config object", () => {
-
-});