Skip to content

Commit

Permalink
feat: allow to extend conditionNames (#1092)
Browse files Browse the repository at this point in the history
  • Loading branch information
GeorgeTaveras1231 authored Oct 6, 2022
1 parent edab08f commit 6e02c64
Show file tree
Hide file tree
Showing 12 changed files with 241 additions and 6 deletions.
4 changes: 2 additions & 2 deletions src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -530,7 +530,7 @@ function getWebpackResolver(
const webpackModuleResolve = promiseResolve(
resolverFactory({
dependencyType: "sass",
conditionNames: ["sass", "style"],
conditionNames: ["sass", "style", "..."],
mainFields: ["sass", "style", "main", "..."],
mainFiles: ["_index", "index", "..."],
extensions: [".sass", ".scss", ".css"],
Expand All @@ -541,7 +541,7 @@ function getWebpackResolver(
const webpackImportResolve = promiseResolve(
resolverFactory({
dependencyType: "sass",
conditionNames: ["sass", "style"],
conditionNames: ["sass", "style", "..."],
mainFields: ["sass", "style", "main", "..."],
mainFiles: ["_index.import", "_index", "index.import", "index", "..."],
extensions: [".sass", ".scss", ".css"],
Expand Down
120 changes: 120 additions & 0 deletions test/__snapshots__/loader.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -334390,6 +334390,126 @@ exports[`loader should work with a package with "sass" and "exports" fields ('sa

exports[`loader should work with a package with "sass" and "exports" fields ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = `
".load-me {
color: red;
}"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = `
".load-me {
color: red;
}"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = `
".load-me {
color: red; }
"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = `
".load-me {
color: red; }
"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = `
".load-me {
color: red;
}"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = `
".load-me {
color: red;
}"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = `
".load-me {
color: blue;
}"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'scss' syntax): css 1`] = `
".load-me {
color: blue;
}"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('dart-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'sass' syntax): css 1`] = `
".load-me {
color: blue; }
"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'scss' syntax): css 1`] = `
".load-me {
color: blue; }
"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('node-sass', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'sass' syntax): css 1`] = `
".load-me {
color: blue;
}"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'sass' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'sass' syntax): warnings 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'scss' syntax): css 1`] = `
".load-me {
color: blue;
}"
`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'scss' syntax): errors 1`] = `[]`;

exports[`loader should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('sass-embedded', 'legacy' API, 'scss' syntax): warnings 1`] = `[]`;

exports[`loader should work with an alias ('dart-sass', 'legacy' API, 'sass' syntax): css 1`] = `
"a {
color: red;
Expand Down
29 changes: 27 additions & 2 deletions test/helpers/getCodeFromSass.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import fs from "fs";

import { klona } from "klona/full";

async function getCodeFromSass(testId, options) {
async function getCodeFromSass(testId, options, context = {}) {
const loaderOptions = klona(options);
let sassOptions = options.sassOptions || {};

Expand Down Expand Up @@ -56,6 +56,27 @@ async function getCodeFromSass(testId, options) {
testFolder,
"node_modules/package-with-exports/style.scss"
);
const pathToSassPackageWithExportsFieldsAndCustomConditionReplacer = () => {
if (context.packageExportsCustomConditionTestVariant === 1) {
return path.resolve(
testFolder,
"node_modules/package-with-exports-and-custom-condition/style-1.scss"
);
}

if (context.packageExportsCustomConditionTestVariant === 2) {
return path.resolve(
testFolder,
"node_modules/package-with-exports-and-custom-condition/style-2.scss"
);
}

console.warn(
"Expedted to receive .packageExportsCustomConditionTestVariant to properly resolve stylesheet in sass only compilation. "
);
return "";
};

const pathToSCSSPackageWithIndexFile = path.resolve(
testFolder,
"node_modules/scss-package-with-index/index.scss"
Expand Down Expand Up @@ -765,7 +786,11 @@ async function getCodeFromSass(testId, options) {
)
.replace(/^~package-with-js-main-field/, pathToPackageWithJsMainField)
.replace(/^~package-with-index/, pathToPackageWithIndex)
.replace(/^package-with-exports/, pathToSassPackageWithExportsFields)
.replace(
/^package-with-exports-and-custom-condition$/,
pathToSassPackageWithExportsFieldsAndCustomConditionReplacer
)
.replace(/^package-with-exports$/, pathToSassPackageWithExportsFields)
.replace(/^file:\/\/\/language/, pathToLanguage)
.replace(/^\/sass\/language.sass/, pathToLanguage)
.replace(/^\/scss\/language.scss/, pathToLanguage)
Expand Down
58 changes: 58 additions & 0 deletions test/loader.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1037,6 +1037,64 @@ describe("loader", () => {
});
}

if (!isModernAPI) {
it(`should work with a package with "sass" and "exports" fields and a custom condition (theme1) ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => {
const testId = getTestId(
"import-package-with-exports-and-custom-condition",
syntax
);
const options = {
implementation,
api,
};
const compiler = getCompiler(testId, {
loader: { options },
resolve: {
conditionNames: ["theme1", "..."],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle(stats, compiler);
const codeFromSass = await getCodeFromSass(testId, options, {
packageExportsCustomConditionTestVariant: 1,
});

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

if (!isModernAPI) {
it(`should work with a package with "sass" and "exports" fields and a custom condition (theme2) ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => {
const testId = getTestId(
"import-package-with-exports-and-custom-condition",
syntax
);
const options = {
implementation,
api,
};
const compiler = getCompiler(testId, {
loader: { options },
resolve: {
conditionNames: ["theme2", "..."],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle(stats, compiler);
const codeFromSass = await getCodeFromSass(testId, options, {
packageExportsCustomConditionTestVariant: 2,
});

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

if (!isModernAPI) {
it(`should support resolving using the "file" schema ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async () => {
const testId = getTestId("import-file-scheme", syntax);
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions test/node_modules/package-with-exports/package.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'package-with-exports-and-custom-condition'
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'package-with-exports-and-custom-condition';

0 comments on commit 6e02c64

Please sign in to comment.