From 5d76d646585a80b3b5729540850c1f66fdf9aaf0 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Fri, 7 Oct 2022 01:24:03 +0300 Subject: [PATCH] feat: allow to extend `conditionNames` (#365) --- src/utils.js | 4 +- test/__snapshots__/loader.test.js.snap | 28 +++++++++- ...age-with-exports-and-custom-condition.styl | 1 + .../index.cjs | 1 + .../index.js | 1 + .../package.json | 21 +++++++ .../style-1.styl | 3 + .../style-2.styl | 3 + test/helpers/getCodeFromStylus.js | 24 +++++++- test/loader.test.js | 56 ++++++++++++++++++- 10 files changed, 134 insertions(+), 8 deletions(-) create mode 100644 test/fixtures/import-package-with-exports-and-custom-condition.styl create mode 100644 test/fixtures/node_modules/package-with-exports-and-custom-condition/index.cjs create mode 100644 test/fixtures/node_modules/package-with-exports-and-custom-condition/index.js create mode 100644 test/fixtures/node_modules/package-with-exports-and-custom-condition/package.json create mode 100644 test/fixtures/node_modules/package-with-exports-and-custom-condition/style-1.styl create mode 100644 test/fixtures/node_modules/package-with-exports-and-custom-condition/style-2.styl diff --git a/src/utils.js b/src/utils.js index 2ce5b22..737f99d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -380,7 +380,7 @@ function mergeBlocks(blocks) { async function createEvaluator(loaderContext, code, options) { const fileResolve = loaderContext.getResolve({ dependencyType: "stylus", - conditionNames: ["styl", "stylus", "style"], + conditionNames: ["styl", "stylus", "style", "..."], mainFields: ["styl", "style", "stylus", "main", "..."], mainFiles: ["index", "..."], extensions: [".styl", ".css"], @@ -391,7 +391,7 @@ async function createEvaluator(loaderContext, code, options) { // Get cwd for `fastGlob()` // No need extra options, because they do not used when `resolveToContext` is `true` const globResolve = loaderContext.getResolve({ - conditionNames: ["styl", "stylus", "style"], + conditionNames: ["styl", "stylus", "style", "..."], resolveToContext: true, preferRelative: true, }); diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 7d0c89e..37101e7 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -965,7 +965,7 @@ exports[`loader should work and respect the "compress" option with the "true" va exports[`loader should work and respect the "compress" option with the "true" value: warnings 1`] = `[]`; -exports[`loader should work and respect the 'resolve.byDependecy.less' option: css 1`] = ` +exports[`loader should work and respect the 'resolve.byDependency.less' option: css 1`] = ` ".b { color: #f00; } @@ -975,9 +975,9 @@ exports[`loader should work and respect the 'resolve.byDependecy.less' option: c " `; -exports[`loader should work and respect the 'resolve.byDependecy.less' option: errors 1`] = `[]`; +exports[`loader should work and respect the 'resolve.byDependency.less' option: errors 1`] = `[]`; -exports[`loader should work and respect the 'resolve.byDependecy.less' option: warnings 1`] = `[]`; +exports[`loader should work and respect the 'resolve.byDependency.less' option: warnings 1`] = `[]`; exports[`loader should work binop import: css 1`] = ` ".not-real-nib { @@ -1029,6 +1029,28 @@ exports[`loader should work when stylusOptions is function: errors 1`] = `[]`; exports[`loader should work when stylusOptions is function: warnings 1`] = `[]`; +exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme1): css 1`] = ` +".load-me { + color: #f00; +} +" +`; + +exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme1): errors 1`] = `[]`; + +exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme1): warnings 1`] = `[]`; + +exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme2): css 1`] = ` +".load-me { + color: #00f; +} +" +`; + +exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme2): errors 1`] = `[]`; + +exports[`loader should work with a package with "styl" and "exports" fields and a custom condition (theme2): warnings 1`] = `[]`; + exports[`loader should work with bootstrap: css 1`] = ` "/*! * Bootstrap v3.4.1 (http://getbootstrap.com) diff --git a/test/fixtures/import-package-with-exports-and-custom-condition.styl b/test/fixtures/import-package-with-exports-and-custom-condition.styl new file mode 100644 index 0000000..70a0c86 --- /dev/null +++ b/test/fixtures/import-package-with-exports-and-custom-condition.styl @@ -0,0 +1 @@ +@import 'package-with-exports-and-custom-condition' diff --git a/test/fixtures/node_modules/package-with-exports-and-custom-condition/index.cjs b/test/fixtures/node_modules/package-with-exports-and-custom-condition/index.cjs new file mode 100644 index 0000000..032a82b --- /dev/null +++ b/test/fixtures/node_modules/package-with-exports-and-custom-condition/index.cjs @@ -0,0 +1 @@ +console.log('Some js, clearly not sass'); \ No newline at end of file diff --git a/test/fixtures/node_modules/package-with-exports-and-custom-condition/index.js b/test/fixtures/node_modules/package-with-exports-and-custom-condition/index.js new file mode 100644 index 0000000..032a82b --- /dev/null +++ b/test/fixtures/node_modules/package-with-exports-and-custom-condition/index.js @@ -0,0 +1 @@ +console.log('Some js, clearly not sass'); \ No newline at end of file diff --git a/test/fixtures/node_modules/package-with-exports-and-custom-condition/package.json b/test/fixtures/node_modules/package-with-exports-and-custom-condition/package.json new file mode 100644 index 0000000..4e693a2 --- /dev/null +++ b/test/fixtures/node_modules/package-with-exports-and-custom-condition/package.json @@ -0,0 +1,21 @@ +{ + "name": "package-with-exports-and-custom-condition", + "version": "1.0.0", + "description": "test", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "MIT", + "type": "module", + "module": "index.js", + "styl": "style-1.styl", + "exports": { + "require": "./index.cjs", + "import": "./index.js", + "styl": { + "theme1": "./style-1.styl", + "theme2": "./style-2.styl" + } + } +} diff --git a/test/fixtures/node_modules/package-with-exports-and-custom-condition/style-1.styl b/test/fixtures/node_modules/package-with-exports-and-custom-condition/style-1.styl new file mode 100644 index 0000000..b11fa36 --- /dev/null +++ b/test/fixtures/node_modules/package-with-exports-and-custom-condition/style-1.styl @@ -0,0 +1,3 @@ +.load-me { + color: red; +} diff --git a/test/fixtures/node_modules/package-with-exports-and-custom-condition/style-2.styl b/test/fixtures/node_modules/package-with-exports-and-custom-condition/style-2.styl new file mode 100644 index 0000000..cf89514 --- /dev/null +++ b/test/fixtures/node_modules/package-with-exports-and-custom-condition/style-2.styl @@ -0,0 +1,3 @@ +.load-me { + color: blue; +} diff --git a/test/helpers/getCodeFromStylus.js b/test/helpers/getCodeFromStylus.js index 216cc47..a850643 100644 --- a/test/helpers/getCodeFromStylus.js +++ b/test/helpers/getCodeFromStylus.js @@ -109,12 +109,32 @@ function evaluator() { }; } -async function getCodeFromStylus(testId, options = {}) { +async function getCodeFromStylus(testId, options = {}, context = {}) { const defaultOptions = { shouldUseWebpackImporter: true, }; const stylusOptions = options.stylusOptions || {}; - let pathToFile = path.resolve(__dirname, "..", "fixtures", testId); + + let pathToFile; + + if (context.packageExportsCustomConditionTestVariant === 1) { + pathToFile = path.resolve( + __dirname, + "..", + "fixtures", + "node_modules/package-with-exports-and-custom-condition/style-1.styl" + ); + } else if (context.packageExportsCustomConditionTestVariant === 2) { + pathToFile = path.resolve( + __dirname, + "..", + "fixtures", + "node_modules/package-with-exports-and-custom-condition/style-2.styl" + ); + } else { + pathToFile = path.resolve(__dirname, "..", "fixtures", testId); + } + let data; try { diff --git a/test/loader.test.js b/test/loader.test.js index 2cd500a..9ff6356 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -1705,7 +1705,7 @@ describe("loader", () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); - it("should work and respect the 'resolve.byDependecy.less' option", async () => { + it("should work and respect the 'resolve.byDependency.less' option", async () => { const testId = "./by-dependency.styl"; const compiler = getCompiler( testId, @@ -1729,4 +1729,58 @@ describe("loader", () => { expect(getWarnings(stats)).toMatchSnapshot("warnings"); expect(getErrors(stats)).toMatchSnapshot("errors"); }); + + it(`should work with a package with "styl" and "exports" fields and a custom condition (theme1)`, async () => { + const testId = "./import-package-with-exports-and-custom-condition.styl"; + const compiler = getCompiler( + testId, + {}, + { + resolve: { + conditionNames: ["theme1", "..."], + }, + } + ); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromStylus = await getCodeFromStylus( + testId, + {}, + { + packageExportsCustomConditionTestVariant: 1, + } + ); + + expect(codeFromBundle.css).toBe(codeFromStylus.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + + it(`should work with a package with "styl" and "exports" fields and a custom condition (theme2)`, async () => { + const testId = "./import-package-with-exports-and-custom-condition.styl"; + const compiler = getCompiler( + testId, + {}, + { + resolve: { + conditionNames: ["theme2", "..."], + }, + } + ); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const codeFromStylus = await getCodeFromStylus( + testId, + {}, + { + packageExportsCustomConditionTestVariant: 2, + } + ); + + expect(codeFromBundle.css).toBe(codeFromStylus.css); + expect(codeFromBundle.css).toMatchSnapshot("css"); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); });