@financial-times/dotcom-build-sass 9.5.1 → 10.0.0-beta.0

package/README.md

@@ -69,8 +69,11 @@ The CSS loader has `@import` and `url()` resolution disabled as these should be
 | Option            | Type     | Default | Description                                                        |
 |-------------------|----------|---------|--------------------------------------------------------------------|
 | `webpackImporter` | Boolean  | `false` | See https://github.com/webpack-contrib/sass-loader#webpackimporter |
-| `prependData`     | String   | `''`    | See https://webpack.js.org/loaders/sass-loader/#prependdata        |
+| `additionalData`     | String   | `''`    | https://webpack.js.org/loaders/sass-loader/#additionaldata        |
 | `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
 

package/dist/node/index.d.ts

@@ -2,12 +2,16 @@ import type webpack from 'webpack';
 export declare 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;
-    constructor({ includePaths, prependData, webpackImporter }?: TPluginOptions);
+    implementation: 'sass' | 'sass-embedded';
+    constructor({ includePaths, prependData, additionalData, webpackImporter, implementation }?: TPluginOptions);
     apply(compiler: webpack.Compiler): void;
 }

package/dist/node/index.js

@@ -7,10 +7,11 @@ 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"));
 class PageKitSassPlugin {
-    constructor({ includePaths = [], prependData = '', webpackImporter } = {}) {
+    constructor({ includePaths = [], prependData = '', additionalData = '', webpackImporter, implementation = 'sass' } = {}) {
         this.includePaths = includePaths;
-        this.prependData = prependData;
+        this.additionalData = additionalData.length ? additionalData : prependData;
         this.webpackImporter = webpackImporter;
+        this.implementation = implementation;
     }
     apply(compiler) {
         const sassLoaderOptions = {
@@ -18,11 +19,11 @@ class PageKitSassPlugin {
             // but we don't usually use this and disabling it can speed up builds by up to 20%.
             webpackImporter: this.webpackImporter,
             // Prefer `dart-sass`.
-            implementation: require('sass'),
+            implementation: require(this.implementation),
             // Prepends SCSS code before the actual entry file.
             // Introduced to maintain snappy grid after n-ui-foundations removed it as the default.
             // Once user-facing apps and components move away from using snappy grid then this can be removed.
-            prependData: this.prependData,
+            additionalData: this.additionalData,
             sassOptions: {
                 // Disable formatting so that we don't spend time pretty printing
                 outputStyle: 'compressed',

package/dist/tsconfig.tsbuildinfo

@@ -452,8 +452,8 @@
         "affectsGlobalScope": false
       },
       "../src/index.ts": {
-        "version": "7fb00d27970b40b6bb55e0082ba7f14114cc4e5d23fc9912cea1da42e24ba5bc",
-        "signature": "38296bee587ffb2a33b5f3e8c31f22f263d27c65a68666824e3b2f717e212a84",
+        "version": "1ce57a946d739703fe823574857b093f8ce75836a0b4f6f0a7cdd7869ae61972",
+        "signature": "74262782cc0e8e7f07d44046b78a6f97239ae1d2282c2763ac54e90f909bbbd5",
         "affectsGlobalScope": false
       },
       "../src/monitored-sass-loader.ts": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-build-sass",
-  "version": "9.5.1",
+  "version": "10.0.0-beta.0",
   "description": "",
   "main": "dist/node/index.js",
   "types": "dist/node/index.d.ts",
@@ -27,8 +27,9 @@
     "cssnano": "^4.1.10",
     "mini-css-extract-plugin": "^0.12.0",
     "postcss-loader": "^4.0.0",
-    "sass": "^1.25.0",
-    "sass-loader": "^8.0.0",
+    "sass": "^1.77.2",
+    "sass-embedded": "^1.77.2",
+    "sass-loader": "^10.5.2",
     "webpack-fix-style-only-entries": "^0.5.0"
   },
   "devDependencies": {

package/src/index.ts

@@ -4,19 +4,30 @@ import type webpack from 'webpack'
 
 export type TPluginOptions = {
   includePaths?: string[]
-  prependData?: string
+  prependData?: string // DEPRECATED IN FAVOUR OF additionalData
+  additionalData?: string
   webpackImporter?: boolean
+  implementation?: 'sass' | 'sass-embedded'
 }
 
 export class PageKitSassPlugin {
   includePaths: string[]
-  prependData: string
+  prependData: string // DEPRECATED IN FAVOUR OF additionalData
+  additionalData: string
   webpackImporter: boolean
+  implementation: 'sass' | 'sass-embedded'
 
-  constructor({ includePaths = [], prependData = '', webpackImporter }: TPluginOptions = {}) {
+  constructor({
+    includePaths = [],
+    prependData = '',
+    additionalData = '',
+    webpackImporter,
+    implementation = 'sass'
+  }: TPluginOptions = {}) {
     this.includePaths = includePaths
-    this.prependData = prependData
+    this.additionalData = additionalData.length ? additionalData : prependData
     this.webpackImporter = webpackImporter
+    this.implementation = implementation
   }
 
   apply(compiler: webpack.Compiler) {
@@ -25,11 +36,11 @@ export class PageKitSassPlugin {
       // but we don't usually use this and disabling it can speed up builds by up to 20%.
       webpackImporter: this.webpackImporter,
       // Prefer `dart-sass`.
-      implementation: require('sass'),
+      implementation: require(this.implementation),
       // Prepends SCSS code before the actual entry file.
       // Introduced to maintain snappy grid after n-ui-foundations removed it as the default.
       // Once user-facing apps and components move away from using snappy grid then this can be removed.
-      prependData: this.prependData,
+      additionalData: this.additionalData,
       sassOptions: {
         // Disable formatting so that we don't spend time pretty printing
         outputStyle: 'compressed',