sku 12.2.0 → 12.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # sku
 
+## 12.3.0
+
+### Minor Changes
+
+- Allow importing external CSS from `node_modules`. ([#861](https://github.com/seek-oss/sku/pull/861))
+
+  CSS from third-party dependencies can be loaded using a side-effect import, e.g.
+
+  ```tsx
+  import { SomeComponent } from 'some-package';
+
+  import 'some-package/dist/styles.css';
+
+  export const MyComponent = () => {
+    return <SomeComponent>{/* ... */}</SomeComponent>;
+  };
+  ```
+
 ## 12.2.0
 
 ### Minor Changes

package/config/storybook/storybookWebpackConfig.js

@@ -26,7 +26,8 @@ module.exports = ({ config }, { isDevServer }) => {
           : [previousExclude]), // Ensure we don't clobber any existing exclusions
         ...paths.src,
         ...paths.compilePackages.map(resolvePackage),
-        /\.vanilla\.css$/,
+        /\.vanilla\.css$/, // Vanilla Extract virtual modules
+        /\.css$/, // external CSS
       ];
     });
   }

package/config/webpack/plugins/sku-webpack-plugin/index.js

@@ -5,7 +5,7 @@ const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 const {
   makeJsLoaders,
   makeCssLoaders,
-  makeVanillaCssLoaders,
+  makeExternalCssLoaders,
   makeSvgLoaders,
   TYPESCRIPT,
   JAVASCRIPT,
@@ -148,18 +148,35 @@ class SkuWebpackPlugin {
           }),
       },
       {
-        // All CSS created by vanilla-extract
-        test: /\.vanilla.css$/i,
-        // Don't process vanilla files from Playroom as they are handled separately.
-        // Virtual file paths will look more realistic in the future allowing
-        // more standard handling of include/exclude path matching.
-        exclude: /node_modules\/playroom/,
-        use: makeVanillaCssLoaders({
-          isProductionBuild,
-          MiniCssExtractPlugin,
-          hot,
-          browserslist,
-        }),
+        test: /\.css$/i,
+        oneOf: [
+          {
+            // All CSS created by vanilla-extract
+            test: /\.vanilla\.css$/i,
+            // Don't process vanilla files from Playroom as they are handled separately.
+            // Virtual file paths will look more realistic in the future allowing
+            // more standard handling of include/exclude path matching.
+            exclude: /node_modules\/playroom/,
+            use: makeExternalCssLoaders({
+              isProductionBuild,
+              MiniCssExtractPlugin,
+              hot,
+              browserslist,
+            }),
+          },
+          {
+            test: /\.css$/i,
+            include: /node_modules/,
+            exclude: /node_modules\/playroom/,
+            use: makeExternalCssLoaders({
+              target,
+              isProductionBuild,
+              MiniCssExtractPlugin,
+              hot,
+              browserslist,
+            }),
+          },
+        ],
       },
       {
         test: IMAGE,

package/config/webpack/utils/loaders.js

@@ -91,18 +91,18 @@ const makeCssLoaders = (options = {}) => {
           },
         ]
       : []),
-
     {
       loader: require.resolve('less-loader'),
     },
   ];
 };
 
-const makeVanillaCssLoaders = (options = {}) => {
-  const { isProductionBuild, MiniCssExtractPlugin, browserslist } = options;
+const makeExternalCssLoaders = (options = {}) => {
+  const { target, isProductionBuild, MiniCssExtractPlugin, browserslist } =
+    options;
 
   return [
-    MiniCssExtractPlugin.loader,
+    ...(!target || target === 'browser' ? [MiniCssExtractPlugin.loader] : []),
     {
       loader: require.resolve('css-loader'),
       options: {
@@ -162,6 +162,6 @@ const makeSvgLoaders = () => [
 module.exports = {
   makeJsLoaders,
   makeCssLoaders,
-  makeVanillaCssLoaders,
+  makeExternalCssLoaders,
   makeSvgLoaders,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {