diff --git a/.changeset/poor-grapes-fry.md b/.changeset/poor-grapes-fry.md new file mode 100644 index 000000000..e41b16d25 --- /dev/null +++ b/.changeset/poor-grapes-fry.md @@ -0,0 +1,5 @@ +--- +'sku': patch +--- + +Remove external CSS imports when running Jest diff --git a/fixtures/styling/src/components/BlueBlock.test.ts b/fixtures/styling/src/components/BlueBlock.test.ts index 6a77a582b..7aa732871 100644 --- a/fixtures/styling/src/components/BlueBlock.test.ts +++ b/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(); +}); diff --git a/packages/sku/config/babel/babelConfig.js b/packages/sku/config/babel/babelConfig.js index 8f88cb227..a698d013e 100644 --- a/packages/sku/config/babel/babelConfig.js +++ b/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'), diff --git a/packages/sku/package.json b/packages/sku/package.json index 721b43a1d..b7dbac9c2 100644 --- a/packages/sku/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2d117dbcb..5b4d5eb94 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -580,6 +580,9 @@ importers: babel-plugin-transform-react-remove-prop-types: specifier: ^0.4.24 version: 0.4.24 + babel-plugin-transform-remove-imports: + specifier: ^1.7.0 + version: 1.7.0(@babel/core@7.22.8) babel-plugin-unassert: specifier: ^3.1.0 version: 3.2.0 @@ -6789,6 +6792,14 @@ packages: resolution: {integrity: sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==} dev: false + /babel-plugin-transform-remove-imports@1.7.0(@babel/core@7.22.8): + resolution: {integrity: sha512-gprmWf6ry5qrnxMyiDaxZpXzZJP6R9FRA+p0AImLIWRmSEGtlKcFprHKeGMZYkII9rJR6Q1hYou+n1fk6rWf2g==} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.22.8 + dev: false + /babel-plugin-unassert@3.2.0: resolution: {integrity: sha512-dNeuFtaJ1zNDr59r24NjjIm4SsXXm409iNOVMIERp6ePciII+rTrdwsWcHDqDFUKpOoBNT4ZS63nPEbrANW7DQ==} dev: false