Skip to content

Commit 4613d55

Browse files
polarbirkepolarbirke
committed
Fix output for multi-entry configs and add tests
1 parent e3c5c76 commit 4613d55

File tree

5 files changed

+79
-14
lines changed

5 files changed

+79
-14
lines changed

‎tasks/weballpacka.js‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ function utilityCssExtractor(content) {
88

99
function createMergedWebpackConfig(gulp, $, config) {
1010
const argv = require('minimist')(process.argv.slice(2));
11+
const purgeCssDisabled = argv.purgecss === false;
1112

1213
const entry = {};
1314
const entryCssMeta = {};
@@ -17,19 +18,17 @@ function createMergedWebpackConfig(gulp, $, config) {
1718
// key must be unique and stable
1819
const entryName = `css_${file.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
1920

20-
// TODO: the POC assumes a single SCSS entry per style config;
21-
// either make this iterable or switch to i.e. file.inputPath to make the behaviour clear
22-
const scssEntry = file.files[0];
23-
24-
entry[entryName] = path.resolve(config.webdir, scssEntry);
21+
entry[entryName] = path.resolve(config.webdir, file.inputPath);
2522
entryCssMeta[entryName] = {
26-
destDir: file.destDir || '',
23+
destDir: file.destDir || 'css',
2724
filename: file.name,
25+
inputPath: file.inputPath,
2826
purgeCssConfig: file.purgeCss ?? config.styles.purgeCss ?? null,
2927
postCssPresetEnvConfig: file.postCssPresetEnv || config.styles.postCssPresetEnv || {},
3028
};
3129
});
3230

31+
3332
// ---- JS entries ----
3433
let includeModules = config.scripts.includeModules ? '|' + config.scripts.includeModules.join('|') : '';
3534
let svelteVersion = config.svelteVersion ? parseFloat(config.svelteVersion) : 3;
@@ -44,8 +43,6 @@ function createMergedWebpackConfig(gulp, $, config) {
4443
entry[entryName] = path.resolve(config.webdir, script.inputPath);
4544
});
4645

47-
const purgeCssDisabled = argv.purgecss === false;
48-
4946
const webpackConfig = {
5047
entry,
5148
output: {
@@ -132,8 +129,26 @@ function createMergedWebpackConfig(gulp, $, config) {
132129
loader: 'postcss-loader',
133130
options: {
134131
sourceMap: true,
135-
postcssOptions: () => {
136-
const cssEntry = Object.values(entryCssMeta)[0] || {}; // TODO: crude mapping based on filename; improve?
132+
postcssOptions: (loaderContext) => {
133+
// Match resource path to entry path from entryCssMeta
134+
const resourcePath = loaderContext.resourcePath;
135+
let cssEntry = null;
136+
137+
for (const [entryName, meta] of Object.entries(entryCssMeta)) {
138+
if (meta.inputPath && resourcePath.includes(meta.inputPath)) {
139+
cssEntry = meta;
140+
break;
141+
}
142+
}
143+
144+
if (!cssEntry) {
145+
throw new Error(
146+
`No CSS entry metadata found for resource: ${resourcePath}\n` +
147+
`Available entries: ${Object.keys(entryCssMeta).join(', ')}\n` +
148+
`Ensure the SCSS file is an exact webpack entry point from config.styles.files[].inputPath`
149+
);
150+
}
151+
137152
const postCssPresetEnvConfig = cssEntry.postCssPresetEnvConfig || {};
138153

139154
return {

‎tests/__snapshots__/css.snapshots.test.js.snap‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
22

3+
exports[`webpackMerged CSS snapshots base: base-print-css 1`] = `
4+
"/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
5+
!*** css ../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../node_modules/resolve-url-loader/index.js!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[4]!./scss/print.scss ***!
6+
\\***************************************************************************************************************************************************************************************************************************************************************************************************************/
7+
@media print {
8+
a[href]:after {
9+
content: " (" attr(href) ")";
10+
}
11+
}
12+
"
13+
`;
14+
315
exports[`webpackMerged CSS snapshots base: base-screen-css 1`] = `
416
"/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
517
!*** css ../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../node_modules/resolve-url-loader/index.js!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[4]!./scss/screen.scss ***!
@@ -22,6 +34,21 @@ div {
2234
"
2335
`;
2436

37+
exports[`webpackMerged CSS snapshots postcss-preset-env: postcss-preset-env-print-css 1`] = `
38+
"/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
39+
!*** css ../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../node_modules/resolve-url-loader/index.js!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[4]!./scss/print.scss ***!
40+
\\***************************************************************************************************************************************************************************************************************************************************************************************************************/
41+
@media print {
42+
a[href]:after {
43+
content: " (" attr(href) ")";
44+
}
45+
div {
46+
margin-top: 0;
47+
}
48+
}
49+
"
50+
`;
51+
2552
exports[`webpackMerged CSS snapshots postcss-preset-env: postcss-preset-env-screen-css 1`] = `
2653
"/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
2754
!*** css ../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../node_modules/resolve-url-loader/index.js!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[4]!./scss/screen.scss ***!

‎tests/css.snapshots.test.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,19 @@ describe('webpackMerged CSS snapshots', () => {
1010
files: [
1111
{
1212
name: 'screen.css',
13-
files: ['scss/screen.scss'],
14-
destDir: 'css',
13+
inputPath: 'scss/screen.scss',
14+
},
15+
{
16+
name: 'print.css',
17+
inputPath: 'scss/print.scss',
1518
},
1619
],
1720
},
1821
scripts: { files: [] }, // skip JS for this test
1922
}, 'base');
2023

2124
expect(files['css/screen.css']).toMatchSnapshot('base-screen-css');
25+
expect(files['css/print.css']).toMatchSnapshot('base-print-css');
2226
});
2327

2428
it('purgecss', async () => {
@@ -28,7 +32,7 @@ describe('webpackMerged CSS snapshots', () => {
2832
files: [
2933
{
3034
name: 'screen.css',
31-
files: ['scss/screen.scss'],
35+
inputPath: 'scss/screen.scss',
3236
destDir: 'css',
3337
purgeCss: {
3438
content: [
@@ -56,7 +60,7 @@ describe('webpackMerged CSS snapshots', () => {
5660
files: [
5761
{
5862
name: 'screen.css',
59-
files: ['scss/screen.scss'],
63+
inputPath: 'scss/screen.scss',
6064
destDir: 'css',
6165
postCssPresetEnv: {
6266
// Options for postcss-logical
@@ -70,11 +74,16 @@ describe('webpackMerged CSS snapshots', () => {
7074
],
7175
},
7276
},
77+
{
78+
name: 'print.css',
79+
inputPath: 'scss/print.scss',
80+
},
7381
],
7482
},
7583
scripts: { files: [] }, // skip JS for this test
7684
}, 'postcss-preset-env');
7785

7886
expect(files['css/screen.css']).toMatchSnapshot('postcss-preset-env-screen-css');
87+
expect(files['css/print.css']).toMatchSnapshot('postcss-preset-env-print-css');
7988
});
8089
});

‎tests/fixtures/base/scss/print.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@media print {
2+
a[href]:after {
3+
content: " (" attr(href) ")";
4+
}
5+
}

‎tests/fixtures/postcss-preset-env/scss/print.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@media print {
2+
a[href]:after {
3+
content: " (" attr(href) ")";
4+
}
5+
6+
div {
7+
margin-block-start: 0;
8+
}
9+
}

0 commit comments

Comments
 (0)