feat: added the appendData option (#336)

Author: cap-Bernardito

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`

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: [],

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"

test/fixtures/less/append-data.less

@@ -0,0 +1,5 @@
+@color1: red;
+
+.background {
+ color: @color1;
+}

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: {