feat: support .css import from node_modules

This will enable the use of Origami "o3", which moves from Sass to CSS.

packages/dotcom-build-sass/package.json

@@ -22,10 +22,11 @@
   },
   "dependencies": {
     "autoprefixer": "^10.2.5",
-    "postcss": "^8.4.20",
     "css-loader": "^3.0.0",
     "cssnano": "^4.1.10",
     "mini-css-extract-plugin": "^0.12.0",
+    "postcss": "^8.4.20",
+    "postcss-import": "^16.1.0",
     "postcss-loader": "^4.0.0",
     "sass": "^1.77.2",
     "sass-embedded": "^1.77.2",
@@ -40,7 +41,10 @@
     "node": "18.x || 20.x",
     "npm": "8.x || 9.x || 10.x"
   },
-  "files": ["dist/", "src/"],
+  "files": [
+    "dist/",
+    "src/"
+  ],
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",

packages/dotcom-build-sass/src/index.ts

@@ -71,6 +71,9 @@ export class PageKitSassPlugin {
     const postcssLoaderOptions = {
       postcssOptions: {
         plugins: [
+          // Allow @import of CSS files from node_modules
+          // https://github.com/postcss/postcss-import
+          require('postcss-import')(),
           // Add vendor prefixes automatically using data from Can I Use
           // https://github.com/postcss/autoprefixer
           require('autoprefixer')(autoprefixerOptions),
@@ -84,6 +87,9 @@ export class PageKitSassPlugin {
     }
 
     const cssLoaderOptions = {
+      // sass-loader then postcss-loader run first
+      // https://github.com/webpack-contrib/css-loader/blob/22e16e2fc88f920571219570953d3da5702d4fdb/README.md?plain=1#L921
+      importLoaders: 2,
       // Allow css-loader to resolve @import because the sass-loader
       // does not successfully resolve files with a .css extension.
       import: true,