Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: extend conditionNames #1092

Merged
merged 2 commits into from Oct 6, 2022
Merged

feat: extend conditionNames #1092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eaef60d
feat: extend conditionNames
GeorgeTaveras1231 Oct 5, 2022
ec88eef
test: package exports with custom condition
GeorgeTaveras1231 Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/utils.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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 "";
};
Comment on lines +59 to +78
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There wasn't a great pattern to write the type of tests that made sense here so I had to introduce some new constructs (such as this context param) to tell getCodeFromSass how to properly resolve the file that the tests need to compare against (based on the custom condition).


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
View file
Open in desktop
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
1 change: 1 addition & 0 deletions test/node_modules/package-with-exports-and-custom-condition/index.cjs
View file
Open in desktop

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

1 change: 1 addition & 0 deletions test/node_modules/package-with-exports-and-custom-condition/index.js
View file
Open in desktop

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

22 changes: 22 additions & 0 deletions test/node_modules/package-with-exports-and-custom-condition/package.json
View file
Open in desktop

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

3 changes: 3 additions & 0 deletions test/node_modules/package-with-exports-and-custom-condition/style-1.scss
View file
Open in desktop

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

3 changes: 3 additions & 0 deletions test/node_modules/package-with-exports-and-custom-condition/style-2.scss
View file
Open in desktop

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
View file
Open in desktop

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

1 change: 1 addition & 0 deletions test/sass/import-package-with-exports-and-custom-condition.sass
View file
Open in desktop
@@ -0,0 +1 @@
@import 'package-with-exports-and-custom-condition'
1 change: 1 addition & 0 deletions test/scss/import-package-with-exports-and-custom-condition.scss
View file
Open in desktop
@@ -0,0 +1 @@
@import 'package-with-exports-and-custom-condition';