fix: ignore import of CSS files inside vanilla-extract files

.changeset/silly-spoons-explode.md

@@ -0,0 +1,5 @@
+---
+'@tabula/forge': patch
+---
+
+ignore import of CSS files inside `vanilla-extract` files

README.md

@@ -126,6 +126,8 @@ We support the [vanilla-extract](https://vanilla-extract.style/).
 
 This is zero-runtime CSS-in-JS solution with TypeScript support.
 
+**IMPORTANT**: All imports of CSS files in `*.css.ts` files is ignored.
+
 ### SVGR
 
 We support the [SVGR](https://react-svgr.com/) to allow to use SVG images not

src/plugins/vanillaExtractPlugin/vanillaExtractPlugin.ts

@@ -1,3 +1,4 @@
+import { stat } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 
 import { vanillaExtractPlugin as officialPlugin } from '@vanilla-extract/esbuild-plugin';
@@ -20,12 +21,23 @@ export function vanillaExtractPlugin(): Plugin {
           name: 'vanilla-extract-plugin/static',
 
           setup({ onLoad, onResolve }) {
-            onResolve(staticOptions, ({ importer, path }) => ({
-              path: resolve(dirname(importer), path),
-              pluginData: {
-                importPath: path,
-              },
-            }));
+            onResolve(staticOptions, async ({ importer, path }) => {
+              const resolvedPath = resolve(dirname(importer), path);
+
+              // NOTE: Ignores imports of `vanilla-extract` files itself.
+              try {
+                await stat(resolvedPath);
+              } catch {
+                return null;
+              }
+
+              return {
+                path: resolve(dirname(importer), path),
+                pluginData: {
+                  importPath: path,
+                },
+              };
+            });
 
             onLoad(staticOptions, ({ pluginData }) => ({
               contents: `export default ${JSON.stringify((pluginData as PluginData).importPath)};`,

tests/browser.test.ts

@@ -555,6 +555,8 @@ it(
     production: false,
   },
   async (t, c) => {
+    t.false(await c.isExists('lib/assets'));
+
     t.snapshot(await c.read('lib/index.css'));
   },
 );
@@ -584,6 +586,19 @@ it(
   },
 );
 
+it(
+  'ignores import of css files from `vanilla-extract` files',
+  {
+    dependencies: ['@vanilla-extract/css'],
+    name: 'browser-vanilla-extract-css',
+    platform: 'browser',
+    production: false,
+  },
+  async (t, c) => {
+    t.snapshot(await c.read('lib/index.css'));
+  },
+);
+
 // ----- Storybook
 
 it(

tests/fixtures/browser-vanilla-extract-css/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "browser-vanilla-extract-static",
+  "version": "1.0.0",
+  "type": "module",
+  "module": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js"
+    }
+  },
+  "files": [
+    "lib"
+  ]
+}

tests/fixtures/browser-vanilla-extract-css/src/assets/font.eot

@@ -0,0 +1 @@
+eot

tests/fixtures/browser-vanilla-extract-css/src/assets/font.otf

@@ -0,0 +1 @@
+otf

tests/fixtures/browser-vanilla-extract-css/src/assets/font.ttf

@@ -0,0 +1 @@
+ttf

tests/fixtures/browser-vanilla-extract-css/src/assets/font.woff

@@ -0,0 +1 @@
+woff

tests/fixtures/browser-vanilla-extract-css/src/assets/font.woff2

@@ -0,0 +1 @@
+woff2

tests/fixtures/browser-vanilla-extract-css/src/assets/image.bmp

@@ -0,0 +1 @@
+bmp

tests/fixtures/browser-vanilla-extract-css/src/assets/image.ico

@@ -0,0 +1 @@
+ico

tests/fixtures/browser-vanilla-extract-css/src/assets/image.webp

@@ -0,0 +1 @@
+webp

tests/fixtures/browser-vanilla-extract-css/src/index.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+import { color } from './vars.css';
+
+export const root = style({
+  color,
+});

tests/fixtures/browser-vanilla-extract-css/src/index.ts

@@ -0,0 +1,3 @@
+import { root } from './index.css';
+
+document.body.classList.add(root);

tests/fixtures/browser-vanilla-extract-css/src/reboot.css

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: VanillaExtract;
+  src: url('./assets/font.eot'), url('./assets/font.otf') format('opentype'),
+    url('./assets/font.ttf') format('truetype'), url('./assets/font.woff') format('woff'),
+    url('./assets/font.woff2') format('woff2');
+}
+
+.bmp {
+  background-image: url('./assets/image.bmp');
+}
+
+.gif {
+  background-image: url('./assets/image.gif');
+}
+
+.ico {
+  background-image: url('./assets/image.ico');
+}
+
+.jpeg {
+  background-image: url('./assets/image.jpeg');
+}
+
+.jpg {
+  background-image: url('./assets/image.jpg');
+}
+
+.png {
+  background-image: url('./assets/image.png');
+}
+
+.svg {
+  background-image: url('./assets/image.svg');
+}
+
+.webp {
+  background-image: url('./assets/image.webp');
+}

tests/fixtures/browser-vanilla-extract-css/src/vars.css.ts

@@ -0,0 +1,3 @@
+import './reboot.css';
+
+export const color = 'red';

tests/fixtures/browser-vanilla-extract-css/tsconfig.forge.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@tabula/typescript-config/tsconfig.browser.json",
+
+  "include": ["src"]
+}

tests/snapshots/browser.test.ts.md

@@ -4,22 +4,6 @@ The actual snapshot is saved in `browser.test.ts.snap`.
 
 Generated by [AVA](https://avajs.dev).
 
-## resolves paths in SCSS with conditional exports
-
-> Snapshot 1
-
-    `/* src/index.module.scss?css-module */␊
-    .browser-scss--src-index-module__scssModule ul {␊
-      background-color: red;␊
-    }␊
-    ␊
-    /* src/index.scss */␊
-    .scssRoot ul {␊
-      background: red;␊
-    }␊
-    /*# sourceMappingURL=index.css.map */␊
-    `
-
 ## generates source maps
 
 > Snapshot 1
@@ -274,6 +258,22 @@ Generated by [AVA](https://avajs.dev).
 
 ## resolves paths in SCSS
 
+> Snapshot 1
+
+    `/* src/index.module.scss?css-module */␊
+    .browser-scss--src-index-module__scssModule ul {␊
+      background-color: red;␊
+    }␊
+    ␊
+    /* src/index.scss */␊
+    .scssRoot ul {␊
+      background: red;␊
+    }␊
+    /*# sourceMappingURL=index.css.map */␊
+    `
+
+## resolves paths in SCSS with conditional exports
+
 > Snapshot 1
 
     `/* src/index.module.scss?css-module */␊
@@ -845,6 +845,17 @@ Generated by [AVA](https://avajs.dev).
     /*# sourceMappingURL=index.css.map */␊
     `
 
+## ignores import of css files from `vanilla-extract` files
+
+> Snapshot 1
+
+    `/* vanilla-extract-css-ns:src/index.css.ts.vanilla.css?source=LnNyY19yb290X18xZ2F0MzY0MCB7CiAgY29sb3I6IHJlZDsKfQ== */␊
+    .src_root__1gat3640 {␊
+      color: red;␊
+    }␊
+    /*# sourceMappingURL=index.css.map */␊
+    `
+
 ## doesn't generate documentation by default
 
 > Snapshot 1