From 62d37b544f5ad828849ca068efc4f8da14735b3d Mon Sep 17 00:00:00 2001 From: Kara Brightwell Date: Thu, 24 Apr 2025 12:46:57 +0100 Subject: [PATCH 1/4] fix(dotcom-build-css): prevent importing CSS from JS files --- packages/dotcom-build-css/src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/dotcom-build-css/src/index.ts b/packages/dotcom-build-css/src/index.ts index 00f08a835..cab28cb07 100644 --- a/packages/dotcom-build-css/src/index.ts +++ b/packages/dotcom-build-css/src/index.ts @@ -34,6 +34,9 @@ export class PageKitCssPlugin { compiler.options.module.rules.push({ test: [/\.css$/], + issuer: { + not: [/\.(js|ts)x?$/], + }, use: cssRule() }) From 297813ed32ee8b23738c08e429580f93f5170f0e Mon Sep 17 00:00:00 2001 From: Kara Brightwell Date: Thu, 24 Apr 2025 12:47:52 +0100 Subject: [PATCH 2/4] fix(dotcom-build-sass): prevent importing Sass from JS files --- packages/dotcom-build-sass/src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/dotcom-build-sass/src/index.ts b/packages/dotcom-build-sass/src/index.ts index f662311a3..0df6a3b22 100644 --- a/packages/dotcom-build-sass/src/index.ts +++ b/packages/dotcom-build-sass/src/index.ts @@ -53,6 +53,9 @@ export class PageKitSassPlugin { compiler.options.module.rules.push({ test: [/\.sass|scss$/], + issuer: { + not: [/\.(js|ts)x?$/], + }, use: [ // Load generated CSS using the same logic as // @financial-times/dotcom-build-css From effa89151d39ced60223c656e41cb33c6ca1621f Mon Sep 17 00:00:00 2001 From: Kara Brightwell Date: Thu, 24 Apr 2025 12:49:14 +0100 Subject: [PATCH 3/4] docs(dotcom-build-sass): document preventing sass imports from js --- packages/dotcom-build-sass/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dotcom-build-sass/README.md b/packages/dotcom-build-sass/README.md index 23fdf781e..a3eea24e8 100644 --- a/packages/dotcom-build-sass/README.md +++ b/packages/dotcom-build-sass/README.md @@ -47,7 +47,7 @@ Sass supports both relative paths and paths that can be resolved within your `no new PageKitSassPlugin({ includePaths: [path.resolve('./path-to-sass-files')] }) ``` -The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently. +The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently. We also prevent importing Sass from Javascript files, as that's incompatible with the Asset Loader in production. [rule]: https://webpack.js.org/configuration/module/#rule [@financial-times/dotcom-build-css]: ../dotcom-build-css From 58e281b81bec3155f1544b7f65b800ef2c70a75d Mon Sep 17 00:00:00 2001 From: Kara Brightwell Date: Thu, 24 Apr 2025 12:49:48 +0100 Subject: [PATCH 4/4] docs(dotcom-build-css): document preventing css imports from js --- packages/dotcom-build-css/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dotcom-build-css/README.md b/packages/dotcom-build-css/README.md index cc24806ac..c4f712aaa 100644 --- a/packages/dotcom-build-css/README.md +++ b/packages/dotcom-build-css/README.md @@ -39,7 +39,7 @@ module.exports = { This plugin adds a [rule] to the Webpack configuration to handle `.css` files. It calls the [css-loader] package to load and parse the source files. The CSS is optimised using [css-minimizer-webpack-plugin], which runs [cssnano] under the hood. The [mini-css-extract-plugin] is added to generate `.css` files and the [webpack-fix-style-only-entries] to clean up any empty JavaScript bundles. -The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently. +The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently. We also prevent importing CSS from Javascript files, as that's incompatible with the Asset Loader in production. [rule]: https://webpack.js.org/configuration/module/#rule [css-loader]: https://github.com/webpack-contrib/css-loader