Remove external CSS imports when running Jest (#865)

.changeset/poor-grapes-fry.md

@@ -0,0 +1,5 @@
+---
+'sku': patch
+---
+
+Remove external CSS imports when running Jest

fixtures/styling/src/components/BlueBlock.test.ts

@@ -1,6 +1,17 @@
+import BlueBlock from './BlueBlock';
 import lessStyles from './styles.less';
+import * as styles from './BlueBlock.css';
 
 test('LESS styles', () => {
   expect(lessStyles.root).toEqual('styles__root');
   expect(lessStyles.nested).toEqual('styles__nested');
 });
+
+test('Vanilla Extract styles', () => {
+  expect(styles.root).toEqual(expect.stringContaining('BlueBlock_root'));
+  expect(styles.border).toEqual(expect.stringContaining('BlueBlock_border'));
+});
+
+test('external CSS loaded without errors', () => {
+  expect(BlueBlock).toBeDefined();
+});

packages/sku/config/babel/babelConfig.js

@@ -10,6 +10,7 @@ module.exports = ({
   rootResolution = false,
 }) => {
   const isBrowser = target === 'browser';
+  const isJest = target === 'jest';
   const isProductionBuild = process.env.NODE_ENV === 'production';
 
   const plugins = [
@@ -32,6 +33,16 @@ module.exports = ({
     ]);
   }
 
+  if (isJest) {
+    plugins.push([
+      require.resolve('babel-plugin-transform-remove-imports'),
+      {
+        test: /\.css$/,
+        remove: 'effects',
+      },
+    ]);
+  }
+
   if (isProductionBuild) {
     plugins.push(
       require.resolve('@babel/plugin-transform-react-inline-elements'),

packages/sku/package.json

@@ -61,6 +61,7 @@
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "babel-plugin-transform-remove-imports": "^1.7.0",
     "babel-plugin-unassert": "^3.1.0",
     "browserslist": "^4.16.1",
     "browserslist-config-seek": "^2.1.0",