Skip to content

feat: Add support for using only webpackImporter #562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ module.exports = {
Type:

```ts
type webpackImporter = boolean;
type webpackImporter = boolean | "only";
```

Default: `true`
Expand Down
10 changes: 9 additions & 1 deletion src/options.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,15 @@
"webpackImporter": {
"description": "Enables/Disables default `webpack` importer.",
"link": "https://github.com/webpack-contrib/less-loader#webpackimporter",
"type": "boolean"
"anyOf": [
{
"type": "boolean"
},
{
"type": "string",
"enum": ["only"]
}
]
},
"implementation": {
"description": "The implementation of the `Less` to be used.",
Expand Down
9 changes: 7 additions & 2 deletions src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const MODULE_REQUEST_REGEX = /^[^?]*~/;
* @returns {LessPlugin}
*/
function createWebpackLessPlugin(loaderContext, implementation) {
const lessOptions = loaderContext.getOptions();
const resolve = loaderContext.getResolve({
dependencyType: "less",
conditionNames: ["less", "style", "..."],
Expand Down Expand Up @@ -105,7 +106,10 @@ function createWebpackLessPlugin(loaderContext, implementation) {
let result;

try {
if (IS_SPECIAL_MODULE_IMPORT.test(filename)) {
if (
IS_SPECIAL_MODULE_IMPORT.test(filename) ||
lessOptions.webpackImporter === "only"
) {
const error = new Error();

error.type = "Next";
Expand Down Expand Up @@ -177,7 +181,8 @@ function getLessOptions(loaderContext, loaderOptions, implementation) {

const plugins = lessOptions.plugins.slice();
const shouldUseWebpackImporter =
typeof loaderOptions.webpackImporter === "boolean"
typeof loaderOptions.webpackImporter === "boolean" ||
loaderOptions.webpackImporter === "only"
? loaderOptions.webpackImporter
: true;

Expand Down
8 changes: 6 additions & 2 deletions test/__snapshots__/validate-options.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,11 @@ exports[`validate options should throw an error on the "unknown" option with "tr

exports[`validate options should throw an error on the "webpackImporter" option with "string" value 1`] = `
"Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
- options.webpackImporter should be a boolean.
- options.webpackImporter should be one of these:
boolean | "only"
-> Enables/Disables default \`webpack\` importer.
-> Read more at https://github.com/webpack-contrib/less-loader#webpackimporter"
-> Read more at https://github.com/webpack-contrib/less-loader#webpackimporter
Details:
* options.webpackImporter should be a boolean.
* options.webpackImporter should be "only"."
`;
20 changes: 20 additions & 0 deletions test/__snapshots__/webpackImporter-options.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,26 @@ exports[`"webpackImporter" option should work when value is "false": errors 1`]

exports[`"webpackImporter" option should work when value is "false": warnings 1`] = `[]`;

exports[`"webpackImporter" option should work when value is "only": css 1`] = `
"@import "some/css.css";
@import "some/css.css";
#it-works {
color: hotpink;
}
.modules-dir-some-module,
#it-works {
background: hotpink;
}
#it-works {
margin: 10px;
}
"
`;

exports[`"webpackImporter" option should work when value is "only": errors 1`] = `[]`;

exports[`"webpackImporter" option should work when value is "only": warnings 1`] = `[]`;

exports[`"webpackImporter" option should work when value is "true": css 1`] = `
"@import "some/css.css";
@import "some/css.css";
Expand Down
2 changes: 1 addition & 1 deletion test/validate-options.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe("validate options", () => {
failure: ["string"],
},
webpackImporter: {
success: [true, false],
success: [true, false, "only"],
failure: ["string"],
},
implementation: {
Expand Down
15 changes: 15 additions & 0 deletions test/webpackImporter-options.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,21 @@ describe('"webpackImporter" option', () => {
expect(getErrors(stats)).toMatchSnapshot("errors");
});

it('should work when value is "only"', async () => {
const testId = "./import-webpack.less";
const compiler = getCompiler(testId, {
webpackImporter: "only",
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle(stats, compiler);
const codeFromLess = await getCodeFromLess(testId);

expect(codeFromBundle.css).toBe(codeFromLess.css);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});

it('should work when value is "false"', async () => {
const testId = "./import.less";
const compiler = getCompiler(testId, {
Expand Down