Merge pull request #102 from willofindie/fix/issue-97-import-failures

[Fix] import error for incomplete node_module paths

Author: phoenisx

TASKS.md

@@ -15,6 +15,7 @@
   - Doing this still shows `open-props/open-props.min.css` in the autocomplete/definition-provider list.
 - Support variable defaults syntax as well, like the following:
   - `color: var(--color, #333)`, this is a valid syntax.
+- `cssvar.enable` disables the extension entirely. It is not scoped for each root folder.
 
 
 ## Notes:

examples/basics/local.css

@@ -14,4 +14,5 @@ body {
 .container {
   width: var(--container-size);
   padding: var(--container-padding);
+  background-color: var(--test-custom-selector);
 }

examples/basics/theme.css

@@ -13,3 +13,15 @@
     --container-padding: 1rem;
   }
 }
+
+/* CSS with new at-rules */
+
+@custom-selector :--root :root, :after, :before;
+
+@layer variables {
+  @layer colors {
+    :--root {
+      --test-custom-selector: rgba(17, 17, 17, 1);
+    }
+  }
+}

examples/css-imports/index.css

@@ -10,7 +10,9 @@
 /* Following is very specific to webpack/react projects */
 /* I won't be supporting this in this extension, as a user can import */
 /* such css files from extension settings */
-/* @import '~open-props/open-props.min.css' */
+/* But's it's wise to ignore such imports */
+@import '~open-props/open-props.min.css';
+@import 'modern-normalize/modern-normalize.css';
 
 @import url('node_modules/open-props/red.min.css') layer(utilities) print, screen;
 
@@ -29,4 +31,5 @@ body {
   background-color: var(--c-blue);
   border-top-color: var(--orange-2);
   box-shadow: 0 0 3px 0 var(--violet-2);
+  margin: var(--size-10);
 }

examples/recursion/testing-temp.css

@@ -0,0 +1,9 @@
+:root {
+   --pop: violet;
+   --chop1: var(--pop);
+   --chop2: var(--chop1);
+}
+
+body {
+   color: var(--chop2);
+}

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

@@ -1,6 +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" }]
+    ["@tokencss/postcss", { "cwd": "config" }]
   ]
 }

examples/tokencss-plugin/index.css

@@ -1,4 +1,5 @@
 body {
   color: var(--color-red-2);
+  background-color: var(--color-blue-4);
   padding: var(--space-2xl);
 }

src/parser.ts

@@ -290,7 +290,9 @@ const parseFile = async function (
             }, {} as CSSVarLocation);
           }
           if (acceptedFile && !allLocalFiles.includes(acceptedFile.local)) {
-            resolvedPaths.push(acceptedFile);
+            if (Object.keys(acceptedFile).length !== 0) {
+              resolvedPaths.push(acceptedFile);
+            }
           }
         }
       }

src/utils.ts

@@ -401,11 +401,11 @@ export async function postcssPluginResolver(
   const { lookupPaths, cwd, ...rest } = options;
   switch (name) {
     case "@tokencss/postcss": {
-      if (!cwd || !existsSync(resolve(cwd, "token.config.json"))) {
+      const _cwd = resolve(CACHE.activeRootPath, cwd);
+      if (!cwd || !existsSync(resolve(_cwd, "token.config.json"))) {
         LOGGER.error("TokenCSS Config not found in: ", resolve(cwd));
         return null;
       }
-      const _cwd = resolve(cwd);
       // VSCode/Electron does not support ESM modules, thus it becomes important to bundle them
       // with the code to make it work.
       try {