adding tests

Author: williamlark

.changeset/violet-lions-greet.md

@@ -0,0 +1,5 @@
+---
+'sku': patch
+---
+
+vite: make vanilla-extract dep scan resolve path aliases for `css.ts` imports

fixtures/path-aliases/package.json

@@ -2,18 +2,19 @@
   "name": "@sku-fixtures/custom-output-target",
   "private": true,
   "type": "module",
+  "scripts": {
+    "build:vite": "sku build --config sku.config.vite.ts",
+    "start:vite": "sku start --config sku.config.vite.ts"
+  },
   "dependencies": {
     "react": "catalog:",
     "react-dom": "catalog:"
   },
-  "scripts": {
-    "start:vite": "sku start --config sku.config.vite.ts",
-    "build:vite": "sku build --config sku.config.vite.ts"
-  },
   "devDependencies": {
     "@sku-private/test-utils": "workspace:*",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@vanilla-extract/css": "catalog:",
     "sku": "workspace:*"
   }
 }

fixtures/path-aliases/sku.config.vite.ts

@@ -8,6 +8,14 @@ export default {
   pathAliases: {
     '@components/*': './src/components/*',
     '@utils/*': './src/utils/*',
+    '#styles/*': './src/styles/*',
   },
-  dangerouslySetViteConfig: makeStableViteHashes,
+  dangerouslySetViteConfig: () => ({
+    ...makeStableViteHashes(),
+    optimizeDeps: {
+      // css resolution issues only occur during the first optimization.
+      // Forcing a re-optimization to be able to test the error consistently.
+      force: true,
+    },
+  }),
 } satisfies SkuConfig;

fixtures/path-aliases/src/App.tsx

@@ -1,9 +1,17 @@
 import { Button } from '@components/Button';
 import { add } from 'src/utils/add';
 
+// This does not get picked up by the vanilla-extract css filter since it doesn't have a ts/js extension (e.g., "foo.css.ts")
+import * as stylesCss from '#styles/root.css';
+
+// This _does_ get picked up by the vanilla-extract css filter so we need to make sure that it resolves correctly.
+// The internal resolve (`this.resolve`) is used in that plugin to make sure it resolves aliases.
+import * as stylesCssTs from '#styles/root.css.ts';
+
 export default () => (
   <div>
-    <p>6 + 9 = {add(6, 9)}</p>
+    <p className={stylesCss.paragraph}>6 + 9 = {add(6, 9)}</p>
+    <p className={stylesCssTs.paragraph}>this text is red</p>
     <Button />
   </div>
 );

fixtures/path-aliases/src/styles/root.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const paragraph = style({
+  color: 'red',
+});

pnpm-lock.yaml

@@ -31,6 +31,7 @@ describe('pathAliases', () => {
         'src/*': ['./src/*'],
         '@components/*': ['./src/components/*'],
         '@utils/*': ['./src/utils/*'],
+        '#styles/*': ['./src/styles/*'],
       });
     });
 
@@ -83,6 +84,8 @@ describe('pathAliases', () => {
         start.queryByError('The plugin "vite-tsconfig-paths" is detected.'),
       ).not.toBeInTheConsole();
 
+      expect(start.queryByError('PLUGIN_ERROR')).not.toBeInTheConsole();
+
       expect(
         start.queryByError(
           "Cannot find module '@components/Button'",