feat: added the appendData option (#336)

webpack-contrib · Apr 20, 2020 · fb94605 · fb94605
1 parent 24021cd
commit fb94605
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -77,7 +77,6 @@ module.exports = {
             options: {
               lessOptions: {
                 strictMath: true,
-                noIeCompat: true,
               },
             },
           },
@@ -197,6 +196,75 @@ module.exports = {
 };
 ```
 
+### `appendData`
+
+Type: `String|Function`
+Default: `undefined`
+
+AppendData `Less` code after the actual entry file.
+
+This can be useful when you need to rewrite some of your Less variables.:
+
+> ℹ Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Less entry files.
+
+#### `String`
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.less$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              appendData: `@env: ${process.env.NODE_ENV};`,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+#### `Function`
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.less$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              appendData: (loaderContext) => {
+                // More information about available properties https://webpack.js.org/api/loaders/
+                const { resourcePath, rootContext } = loaderContext;
+                const relativePath = path.relative(rootContext, resourcePath);
+
+                if (relativePath === 'styles/foo.less') {
+                  return '@value: 100px;';
+                }
+
+                return '@value: 200px;';
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ### `sourceMap`
 
 Type: `Boolean`

diff --git a/src/getLessOptions.js b/src/getLessOptions.js
@@ -1,5 +1,3 @@
-import os from 'os';
-
 import clone from 'clone';
 
 import createWebpackLessPlugin from './createWebpackLessPlugin';
@@ -13,6 +11,26 @@ import createWebpackLessPlugin from './createWebpackLessPlugin';
  * @returns {Object}
  */
 function getLessOptions(loaderContext, loaderOptions, content) {
+  function prependData(target, addedData) {
+    if (!addedData) {
+      return target;
+    }
+
+    return typeof addedData === 'function'
+      ? `${addedData(loaderContext)}\n${target}`
+      : `${addedData}\n${target}`;
+  }
+
+  function appendData(target, addedData) {
+    if (!addedData) {
+      return target;
+    }
+
+    return typeof addedData === 'function'
+      ? `${target}\n${addedData(loaderContext)}`
+      : `${target}\n${addedData}`;
+  }
+
   const options = clone(
     loaderOptions.lessOptions
       ? typeof loaderOptions.lessOptions === 'function'
@@ -21,11 +39,9 @@ function getLessOptions(loaderContext, loaderOptions, content) {
       : {}
   );
 
-  const data = loaderOptions.prependData
-    ? typeof loaderOptions.prependData === 'function'
-      ? loaderOptions.prependData(loaderContext) + os.EOL + content
-      : loaderOptions.prependData + os.EOL + content
-    : content;
+  let data = content;
+  data = prependData(data, loaderOptions.prependData);
+  data = appendData(data, loaderOptions.appendData);
 
   const lessOptions = {
     plugins: [],

diff --git a/src/options.json b/src/options.json
@@ -24,6 +24,17 @@
         }
       ]
     },
+    "appendData": {
+      "description": "Add `Less` code after the actual entry file (https://github.com/webpack-contrib/less-loader#postponeddata).",
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "instanceof": "Function"
+        }
+      ]
+    },
     "sourceMap": {
       "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/less-loader#sourcemap).",
       "type": "boolean"

diff --git a/test/fixtures/less/append-data.less b/test/fixtures/less/append-data.less
@@ -0,0 +1,5 @@
+@color1: red;
+
+.background {
+  color: @color1;
+}
diff --git a/test/index.test.js b/test/index.test.js
@@ -151,6 +151,26 @@ test('should prepend data', async () => {
   expect(css).toEqual('.background {\n  color: red;\n}\n');
 });
 
+test('should append data', async () => {
+  const loaderOptions = {
+    appendData() {
+      return `@color1: coral;`;
+    },
+  };
+
+  let inspect;
+
+  const rules = moduleRules.basic(loaderOptions, {}, (i) => {
+    inspect = i;
+  });
+
+  await compile('append-data', rules).catch((e) => e);
+
+  const [css] = inspect.arguments;
+
+  expect(css).toEqual('.background {\n  color: coral;\n}\n');
+});
+
 test('should allow a function to be passed through for `lessOptions`', async () => {
   await compileAndCompare('import-paths', {
     lessLoaderOptions: {