@financial-times/dotcom-build-sass 11.3.0 → 12.0.1

package/README.md

@@ -49,8 +49,6 @@ 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.
 
-[PostCSS] is configured with the [Autoprefixer] and [cssnano] transforms.
-
 The CSS loader has `@import` and `url()` resolution disabled as these should be handled by Sass.
 
 [rule]: https://webpack.js.org/configuration/module/#rule
@@ -73,8 +71,6 @@ The CSS loader has `@import` and `url()` resolution disabled as these should be
 | `includePaths`    | String[] | `[]`    | See https://sass-lang.com/documentation/js-api#includepaths        |
 | `implementation`    | `sass\|sass-embedded` | `sass`    | See https://webpack.js.org/loaders/sass-loader/#implementation        |
 
-`additionalData` replaces `prependData` as of sass-loader v9. `prependData` is still supported in this package, but is deprecated.
-
 ## Sass build monitoring
 
 Sass build times are stored locally and remotely, where your project sets relevant API keys. Alternatively, you may turn both these features off using environment variable.

package/dist/node/index.d.ts

@@ -1,17 +1,15 @@
 import type webpack from 'webpack';
-export declare type TPluginOptions = {
+export type TPluginOptions = {
     includePaths?: string[];
-    prependData?: string;
     additionalData?: string;
     webpackImporter?: boolean;
     implementation?: 'sass' | 'sass-embedded';
 };
 export declare class PageKitSassPlugin {
     includePaths: string[];
-    prependData: string;
     additionalData: string;
     webpackImporter: boolean;
     implementation: 'sass' | 'sass-embedded';
-    constructor({ includePaths, prependData, additionalData, webpackImporter, implementation }?: TPluginOptions);
+    constructor({ includePaths, additionalData, webpackImporter, implementation }?: TPluginOptions);
     apply(compiler: webpack.Compiler): void;
 }

package/dist/node/index.js

@@ -4,16 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageKitSassPlugin = void 0;
-const webpack_fix_style_only_entries_1 = __importDefault(require("webpack-fix-style-only-entries"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const webpack_remove_empty_scripts_1 = __importDefault(require("webpack-remove-empty-scripts"));
+const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-webpack-plugin"));
 class PageKitSassPlugin {
-    constructor({ includePaths = [], prependData = '', additionalData = '', webpackImporter, implementation = 'sass' } = {}) {
+    constructor({ includePaths = [], additionalData = '', webpackImporter, implementation = 'sass' } = {}) {
         this.includePaths = includePaths;
-        this.additionalData = additionalData.length ? additionalData : prependData;
+        this.additionalData = additionalData;
         this.webpackImporter = webpackImporter;
         this.implementation = implementation;
     }
     apply(compiler) {
+        var _a;
         const sassLoaderOptions = {
             // This enables the use of enhanced-resolve for @import statements prefixed with ~
             // but we don't usually use this and disabling it can speed up builds by up to 20%.
@@ -28,39 +30,15 @@ class PageKitSassPlugin {
                 // Disable formatting so that we don't spend time pretty printing
                 outputStyle: 'compressed',
                 // Enable Sass to @import source files from installed dependencies
-                includePaths: ['bower_components', 'node_modules', ...this.includePaths]
+                includePaths: ['node_modules/@financial-times', 'node_modules', ...this.includePaths]
             }
         };
-        const autoprefixerOptions = {
-            // https://github.com/browserslist/browserslist
-            overrideBrowserslist: ['last 1 Chrome versions', 'Safari >= 13', 'ff ESR', 'last 1 Edge versions'],
-            grid: true
-        };
-        // https://cssnano.co/guides/optimisations
-        const cssnanoOptions = {
-            preset: [
-                'default',
-                {
-                    // disable reduceInitial optimisation as `initial` is not supported in IE11
-                    // https://github.com/cssnano/cssnano/issues/721
-                    // https://developer.mozilla.org/en-US/docs/Web/CSS/initial
-                    reduceInitial: false
-                }
-            ]
-        };
         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),
-                    // Ensure that the final result is as small as possible. This can
-                    // de-duplicate rule-sets which is useful if $o-silent-mode is toggled.
-                    // https://github.com/cssnano/cssnano
-                    require('cssnano')(cssnanoOptions)
+                    require('postcss-import')()
                 ]
             },
             implementation: require('postcss')
@@ -78,12 +56,9 @@ class PageKitSassPlugin {
         };
         const miniCssExtractPluginOptions = {
             // only include content hash in filename when compiling production assets
-            filename: compiler.options.mode === 'development' ? '[name].css' : '[name].[contenthash:12].css'
-        };
-        // This plugin prevents empty JS bundles being created for CSS entry points
-        // https://github.com/fqborges/webpack-fix-style-only-entries
-        const stylesOnlyPluginOptions = {
-            silent: true
+            filename: compiler.options.mode === 'development' ? '[name].css' : '[name].[contenthash:12].css',
+            // we load CSS files ourselves in  `dotcom-ui-shell` so don't need the runtime
+            runtime: false
         };
         compiler.options.module.rules.push({
             test: [/\.sass|scss$/],
@@ -113,7 +88,14 @@ class PageKitSassPlugin {
                 }
             ]
         });
-        new webpack_fix_style_only_entries_1.default(stylesOnlyPluginOptions).apply(compiler);
+        compiler.options.optimization.minimizer = [
+            ...((_a = compiler.options.optimization.minimizer) !== null && _a !== void 0 ? _a : []),
+            new css_minimizer_webpack_plugin_1.default()
+        ];
+        // 2024 and this is still an issue :/ mini-css-extract-plugin leaves
+        // behind empty .js bundles after extracting the CSS.
+        // https://github.com/webpack/webpack/issues/11671
+        new webpack_remove_empty_scripts_1.default().apply(compiler);
         new mini_css_extract_plugin_1.default(miniCssExtractPluginOptions).apply(compiler);
     }
 }

package/dist/node/monitored-sass-loader.js

@@ -1,21 +1,19 @@
 "use strict";
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _monitorRemotely, _noticeStrategies, _noticeStrategy, _noticeThrottleSeconds, _noticeThrottlePercentage, _stats, _directory, _file, _startTime, _endTime, _read, _write, _report;
+var _SassStats_monitorRemotely, _SassStats_noticeStrategies, _SassStats_noticeStrategy, _SassStats_noticeThrottleSeconds, _SassStats_noticeThrottlePercentage, _SassStats_stats, _SassStats_directory, _SassStats_file, _SassStats_startTime, _SassStats_endTime, _SassStats_read, _SassStats_write, _SassStats_report;
 Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
@@ -28,48 +26,48 @@ const logError = (message) => {
 };
 class SassStats {
     constructor() {
-        _monitorRemotely.set(this, process.env.FT_SASS_STATS_MONITOR === 'on');
-        _noticeStrategies.set(this, ['throttle', 'never', 'always']);
-        _noticeStrategy.set(this, __classPrivateFieldGet(this, _noticeStrategies).includes(process.env.FT_SASS_STATS_NOTICE)
+        _SassStats_monitorRemotely.set(this, process.env.FT_SASS_STATS_MONITOR === 'on');
+        _SassStats_noticeStrategies.set(this, ['throttle', 'never', 'always']);
+        _SassStats_noticeStrategy.set(this, __classPrivateFieldGet(this, _SassStats_noticeStrategies, "f").includes(process.env.FT_SASS_STATS_NOTICE)
             ? process.env.FT_SASS_STATS_NOTICE
             : 'throttle');
-        _noticeThrottleSeconds.set(this, typeof process.env.FT_SASS_STATS_NOTICE_THROTTLE_SECONDS === 'number'
+        _SassStats_noticeThrottleSeconds.set(this, typeof process.env.FT_SASS_STATS_NOTICE_THROTTLE_SECONDS === 'number'
             ? process.env.FT_SASS_STATS_NOTICE_THROTTLE_SECONDS
             : 60 * 60 * 0.5); // show throttled notice given 30 mins since last notice
-        _noticeThrottlePercentage.set(this, typeof process.env.FT_SASS_STATS_NOTICE_THROTTLE_PERCENTAGE === 'number'
+        _SassStats_noticeThrottlePercentage.set(this, typeof process.env.FT_SASS_STATS_NOTICE_THROTTLE_PERCENTAGE === 'number'
             ? process.env.FT_SASS_STATS_NOTICE_THROTTLE_PERCENTAGE
             : 30); // show throttled notice given a 30% increase
-        _stats.set(this, { totalTime: 0, noticeDate: null, totalTimeAtLastNotice: 0 });
-        _directory.set(this, path_1.default.join(os_1.default.tmpdir(), 'dotcom-build-sass'));
-        _file.set(this, path_1.default.join(__classPrivateFieldGet(this, _directory), 'sass-stats.json'));
-        _startTime.set(this, void 0);
-        _endTime.set(this, void 0);
+        _SassStats_stats.set(this, { totalTime: 0, noticeDate: null, totalTimeAtLastNotice: 0 });
+        _SassStats_directory.set(this, path_1.default.join(os_1.default.tmpdir(), 'dotcom-build-sass'));
+        _SassStats_file.set(this, path_1.default.join(__classPrivateFieldGet(this, _SassStats_directory, "f"), 'sass-stats.json'));
+        _SassStats_startTime.set(this, void 0);
+        _SassStats_endTime.set(this, void 0);
         this.buildCount = 0;
         this.start = () => {
-            __classPrivateFieldGet(this, _read).call(this);
-            __classPrivateFieldSet(this, _startTime, performance.now());
+            __classPrivateFieldGet(this, _SassStats_read, "f").call(this);
+            __classPrivateFieldSet(this, _SassStats_startTime, performance.now(), "f");
         };
         this.end = () => {
-            __classPrivateFieldSet(this, _endTime, performance.now());
-            const updatedTotal = (__classPrivateFieldGet(this, _stats).totalTime += __classPrivateFieldGet(this, _endTime) - __classPrivateFieldGet(this, _startTime));
-            __classPrivateFieldGet(this, _write).call(this, { totalTime: updatedTotal });
+            __classPrivateFieldSet(this, _SassStats_endTime, performance.now(), "f");
+            const updatedTotal = (__classPrivateFieldGet(this, _SassStats_stats, "f").totalTime += __classPrivateFieldGet(this, _SassStats_endTime, "f") - __classPrivateFieldGet(this, _SassStats_startTime, "f"));
+            __classPrivateFieldGet(this, _SassStats_write, "f").call(this, { totalTime: updatedTotal });
         };
-        _read.set(this, () => {
+        _SassStats_read.set(this, () => {
             try {
                 // Restore stats from a temporary file if it exists.
                 // Reading from disk ensures that we can track stats across builds.
-                const statsFile = fs_1.default.readFileSync(__classPrivateFieldGet(this, _file), 'utf-8');
-                __classPrivateFieldSet(this, _stats, JSON.parse(statsFile));
+                const statsFile = fs_1.default.readFileSync(__classPrivateFieldGet(this, _SassStats_file, "f"), 'utf-8');
+                __classPrivateFieldSet(this, _SassStats_stats, JSON.parse(statsFile), "f");
             }
             catch (_a) { }
-            return __classPrivateFieldGet(this, _stats);
+            return __classPrivateFieldGet(this, _SassStats_stats, "f");
         });
-        _write.set(this, (stats) => {
-            __classPrivateFieldSet(this, _stats, Object.assign(__classPrivateFieldGet(this, _stats), stats));
-            fs_1.default.writeFileSync(__classPrivateFieldGet(this, _file), JSON.stringify(__classPrivateFieldGet(this, _stats)));
+        _SassStats_write.set(this, (stats) => {
+            __classPrivateFieldSet(this, _SassStats_stats, Object.assign(__classPrivateFieldGet(this, _SassStats_stats, "f"), stats), "f");
+            fs_1.default.writeFileSync(__classPrivateFieldGet(this, _SassStats_file, "f"), JSON.stringify(__classPrivateFieldGet(this, _SassStats_stats, "f")));
         });
         this.sendMetric = () => {
-            if (!__classPrivateFieldGet(this, _monitorRemotely)) {
+            if (!__classPrivateFieldGet(this, _SassStats_monitorRemotely, "f")) {
                 return;
             }
             if (!process.env.FT_SASS_BIZ_OPS_API_KEY) {
@@ -84,7 +82,7 @@ class SassStats {
             const postData = JSON.stringify({
                 type: 'System',
                 metric: 'sass-build-time',
-                value: (__classPrivateFieldGet(this, _endTime) - __classPrivateFieldGet(this, _startTime)) / 1000,
+                value: (__classPrivateFieldGet(this, _SassStats_endTime, "f") - __classPrivateFieldGet(this, _SassStats_startTime, "f")) / 1000,
                 date: date.toISOString(),
                 code: process.env.FT_SASS_BIZ_OPS_SYSTEM_CODE,
                 metadata: {
@@ -117,7 +115,7 @@ class SassStats {
         };
         this.reportAccordingToNoticeStrategy = () => {
             let shouldReport;
-            switch (__classPrivateFieldGet(this, _noticeStrategy)) {
+            switch (__classPrivateFieldGet(this, _SassStats_noticeStrategy, "f")) {
                 case 'never':
                     shouldReport = false;
                     break;
@@ -127,20 +125,21 @@ class SassStats {
                 case 'throttle':
                     // Throttle notices to show a limited number per hour, or if the total sass build time
                     // has increased by a significant percentage. This favours more frequent reports to begin with.
-                    const noticeTimeThrottle = Date.now() >= __classPrivateFieldGet(this, _stats).noticeDate + __classPrivateFieldGet(this, _noticeThrottleSeconds) * 1000;
-                    const percentageTotalTimeThrottle = __classPrivateFieldGet(this, _stats).totalTime > 0 &&
-                        (__classPrivateFieldGet(this, _stats).totalTime / __classPrivateFieldGet(this, _stats).totalTimeAtLastNotice - 1) * 100 >= __classPrivateFieldGet(this, _noticeThrottlePercentage); // % increase
-                    shouldReport = !__classPrivateFieldGet(this, _stats).noticeDate || noticeTimeThrottle || percentageTotalTimeThrottle;
+                    const noticeTimeThrottle = Date.now() >= __classPrivateFieldGet(this, _SassStats_stats, "f").noticeDate + __classPrivateFieldGet(this, _SassStats_noticeThrottleSeconds, "f") * 1000;
+                    const percentageTotalTimeThrottle = __classPrivateFieldGet(this, _SassStats_stats, "f").totalTime > 0 &&
+                        (__classPrivateFieldGet(this, _SassStats_stats, "f").totalTime / __classPrivateFieldGet(this, _SassStats_stats, "f").totalTimeAtLastNotice - 1) * 100 >=
+                            __classPrivateFieldGet(this, _SassStats_noticeThrottlePercentage, "f"); // % increase
+                    shouldReport = !__classPrivateFieldGet(this, _SassStats_stats, "f").noticeDate || noticeTimeThrottle || percentageTotalTimeThrottle;
                     break;
                 default:
                     break;
             }
             if (shouldReport) {
-                __classPrivateFieldGet(this, _report).call(this);
+                __classPrivateFieldGet(this, _SassStats_report, "f").call(this);
             }
         };
-        _report.set(this, () => {
-            const seconds = __classPrivateFieldGet(this, _stats).totalTime / 1000;
+        _SassStats_report.set(this, () => {
+            const seconds = __classPrivateFieldGet(this, _SassStats_stats, "f").totalTime / 1000;
             const minutes = seconds / 60;
             const hours = seconds / 3600;
             const time = hours > 1
@@ -151,7 +150,7 @@ class SassStats {
             const emoji = hours > 2 ? ['🔥', '😭', '😱'] : hours >= 1 ? ['🔥', '😱'] : minutes > 10 ? ['⏱️', '😬'] : ['⏱️'];
             let cta = `Share your high score in Slack #sass-to-css 🎉 And help us improve that:\n` +
                 `https://origami.ft.com/blog/2024/01/24/sass-build-times/\n\n`;
-            if (!__classPrivateFieldGet(this, _monitorRemotely)) {
+            if (!__classPrivateFieldGet(this, _SassStats_monitorRemotely, "f")) {
                 cta =
                     `Help us improve build times by setting the "FT_SASS_STATS_MONITOR" environment variable.\n` +
                         `https://origami.ft.com/blog/2024/01/24/sass-build-times/ \n\n`;
@@ -160,12 +159,12 @@ class SassStats {
             console.log(`\n\ndotcom-build-sass:\nYou have spent at least ${emoji.join(' ')} ${time} ${emoji
                 .reverse()
                 .join(' ')} waiting on FT Sass to compile.\n${cta}`);
-            __classPrivateFieldGet(this, _write).call(this, { noticeDate: Date.now(), totalTimeAtLastNotice: __classPrivateFieldGet(this, _stats).totalTime });
+            __classPrivateFieldGet(this, _SassStats_write, "f").call(this, { noticeDate: Date.now(), totalTimeAtLastNotice: __classPrivateFieldGet(this, _SassStats_stats, "f").totalTime });
         });
-        fs_1.default.mkdirSync(__classPrivateFieldGet(this, _directory), { recursive: true });
+        fs_1.default.mkdirSync(__classPrivateFieldGet(this, _SassStats_directory, "f"), { recursive: true });
     }
 }
-_monitorRemotely = new WeakMap(), _noticeStrategies = new WeakMap(), _noticeStrategy = new WeakMap(), _noticeThrottleSeconds = new WeakMap(), _noticeThrottlePercentage = new WeakMap(), _stats = new WeakMap(), _directory = new WeakMap(), _file = new WeakMap(), _startTime = new WeakMap(), _endTime = new WeakMap(), _read = new WeakMap(), _write = new WeakMap(), _report = new WeakMap();
+_SassStats_monitorRemotely = new WeakMap(), _SassStats_noticeStrategies = new WeakMap(), _SassStats_noticeStrategy = new WeakMap(), _SassStats_noticeThrottleSeconds = new WeakMap(), _SassStats_noticeThrottlePercentage = new WeakMap(), _SassStats_stats = new WeakMap(), _SassStats_directory = new WeakMap(), _SassStats_file = new WeakMap(), _SassStats_startTime = new WeakMap(), _SassStats_endTime = new WeakMap(), _SassStats_read = new WeakMap(), _SassStats_write = new WeakMap(), _SassStats_report = new WeakMap();
 // We're proxying a few functions for monitoring purposes,
 // we want to catch any monitoring errors silently.
 const forgivingProxy = (target, task) => {