Merge pull request #1123 from Financial-Times/unpostcss

CPP-2222 Use Webpack's native import resolution for S/CSS and drop Postcss

examples/building-sass-files/README.md

@@ -1,6 +1,6 @@
 # Building Sass Files Example
 
-This example demonstrates how to compile Sass source code using the [Page Kit CLI] and the [Sass plugin]. It also shows some of the useful optimisations provided by PostCSS.
+This example demonstrates how to compile Sass source code using the [Page Kit CLI] and the [Sass plugin]. It also shows some of the useful optimisations provided by cssnano.
 
 Source files are stored in the `src/` directory and the output will be stored in a directory named `public/`. To run the build script run `npm run build`.
 

examples/building-sass-files/__test__/integration.test.js

@@ -20,7 +20,7 @@ describe('examples/building-sass-files', () => {
     })
   })
 
-  describe('PostCSS', () => {
+  describe('Optimisation', () => {
     it('uses cssnano to minify the output', () => {
       const result = outputContents.match(/\.selector/g)
       expect(result.length).toBe(1)

examples/building-sass-files/src/main.scss

@@ -9,7 +9,7 @@ $bg-color: #fff1e5;
   background: $bg-color;
 }
 
-// This ruleset should be de-duplicated by PostCSS minification
+// This ruleset should be de-duplicated by minification
 .selector {
   color: $text-color;
   background: $bg-color;

examples/ft-ui/webpack.config.js

@@ -9,11 +9,5 @@ module.exports = {
     styles: './client/main.scss',
     'page-kit-layout-styles': require.resolve('@financial-times/dotcom-ui-layout/styles.scss')
   },
-  plugins: [
-    new PageKitBasePlugin(),
-    new PageKitJsPlugin(),
-    new PageKitSassPlugin({
-      includePaths: [path.resolve('../../node_modules')]
-    })
-  ]
+  plugins: [new PageKitBasePlugin(), new PageKitJsPlugin(), new PageKitSassPlugin()]
 }

examples/kitchen-sink/webpack.config.js

@@ -15,8 +15,6 @@ module.exports = {
     new PageKitBasePlugin(),
     new PageKitJsPlugin(),
     new PageKitCodeSplittingPlugin(),
-    new PageKitSassPlugin({
-      includePaths: [path.resolve('../../node_modules')]
-    })
+    new PageKitSassPlugin()
   ]
 }

packages/dotcom-build-sass/README.md

@@ -39,26 +39,22 @@ module.exports = {
 
 ## Scope
 
-This plugin adds a [rule] to the Webpack configuration to handle `.scss` files. It first uses the [sass-loader] to transpile Sass source code, then sends the output through to the [postcss-loader] for optimisations, and finally the [css-loader]. 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.
+This plugin adds a [rule] to the Webpack configuration to handle `.scss` files. It first uses the [sass-loader] to transpile Sass source code, and then the [css-loader] to handle native CSS files that have been imported. 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.
 
-Sass has been configured to find packages installed with npm by looking in the `'node_modules/@financial-times'` directories. It can be configured to look in additional locations by passing the relevant paths to the plugin as absolute paths.
+Sass supports both relative paths and paths that can be resolved within your `node_modules`. It can be configured to look in additional locations by passing the relevant paths to the plugin as absolute paths.
 
 ```js
 new PageKitSassPlugin({ includePaths: [path.resolve('./path-to-sass-files')] })
 ```
 
-_Please note_ that by default Sass will resolve all bare `@import` statements from the current working directory rather than relative to the file being processed. This means it will not find dependencies in nested `node_modules` directories.
-
-The CSS loader has `@import` and `url()` resolution disabled as these should be handled by Sass.
+The CSS loader has `url()` resolution disabled as we don't use, nor recommend, the function currently.
 
 [rule]: https://webpack.js.org/configuration/module/#rule
 [sass-loader]: https://github.com/webpack-contrib/sass-loader
-[postcss-loader]: https://github.com/postcss/postcss-loader
 [css-loader]: https://github.com/webpack-contrib/css-loader
+[css-minimizer-webpack-plugin]: https://github.com/webpack-contrib/css-minimizer-webpack-plugin
 [mini-css-extract-plugin]: https://github.com/webpack-contrib/mini-css-extract-plugin
 [webpack-fix-style-only-entries]: https://github.com/fqborges/webpack-fix-style-only-entries
-[PostCSS]: https://postcss.org/
-[Autoprefixer]: https://github.com/postcss/autoprefixer
 [cssnano]: https://cssnano.co/
 
 

packages/dotcom-build-sass/package.json

@@ -23,9 +23,6 @@
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "mini-css-extract-plugin": "^2.9.1",
-    "postcss": "^8.4.20",
-    "postcss-import": "^16.1.0",
-    "postcss-loader": "^7.3.3",
     "sass-embedded": "^1.67.0",
     "sass-loader": "^13.3.2",
     "webpack-remove-empty-scripts": "^1.0.4"

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

@@ -42,26 +42,15 @@ export class PageKitSassPlugin {
       sassOptions: {
         // Disable formatting so that we don't spend time pretty printing
         outputStyle: 'compressed',
-        // Enable Sass to @import source files from installed dependencies
-        includePaths: ['node_modules/@financial-times', 'node_modules', ...this.includePaths]
+        // Enable Sass to @import source files from additional relative paths
+        includePaths: this.includePaths
       }
     }
 
-    const postcssLoaderOptions = {
-      postcssOptions: {
-        plugins: [
-          // Allow @import of CSS files from node_modules
-          // https://github.com/postcss/postcss-import
-          require('postcss-import')()
-        ]
-      },
-      implementation: require('postcss')
-    }
-
     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,
+      // sass-loader runs first
+      // https://github.com/webpack-contrib/css-loader/blob/22e16e2fc88f920571219570953d3da5702d4fdb/README.md?plain=1#L920
+      importLoaders: 1,
       // Allow css-loader to resolve @import because the sass-loader
       // does not successfully resolve files with a .css extension.
       import: true,
@@ -91,12 +80,6 @@ export class PageKitSassPlugin {
           loader: require.resolve('css-loader'),
           options: cssLoaderOptions
         },
-        // Enable use of PostCSS for CSS postprocessing
-        // https://github.com/postcss/postcss-loader
-        {
-          loader: require.resolve('postcss-loader'),
-          options: postcssLoaderOptions
-        },
         // Enable use of Sass for CSS preprocessing
         // https://github.com/webpack-contrib/sass-loader
         {