Skip to content

Commit a749435

Browse files
evilebottnawievilebottnawi
authored
test: postcss-loader (#830)
1 parent 947e666 commit a749435

8 files changed

Lines changed: 717 additions & 92 deletions

File tree

‎package-lock.json‎

Lines changed: 544 additions & 78 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@
4343
"jest": "^23.6.0",
4444
"lint-staged": "^8.1.0",
4545
"memory-fs": "^0.4.1",
46+
"postcss-loader": "^3.0.0",
47+
"postcss-preset-env": "^6.4.0",
4648
"prettier": "^1.15.2",
4749
"standard-version": "^4.0.0",
4850
"strip-ansi": "^5.0.0",

‎test/__snapshots__/loader.test.js.snap‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,3 +443,87 @@ You may need an appropriate loader to handle this file type.
443443
`;
444444

445445
exports[`loader should throws error when no loader for assets: warnings 1`] = `Array []`;
446+
447+
exports[`loader using together with "postcss-loader": errors 1`] = `Array []`;
448+
449+
exports[`loader using together with "postcss-loader": module (evaluated) 1`] = `
450+
Array [
451+
Array [
452+
1,
453+
":root {
454+
--fontSize: 1rem;
455+
--mainColor: rgba(18,52,86,0.47059);
456+
--secondaryColor: rgba(102, 51, 153, 0.9);
457+
}
458+
459+
html {
460+
overflow-x: hidden;
461+
overflow-y: auto;
462+
overflow: hidden auto;
463+
}
464+
465+
@media (max-width: 50rem) {
466+
body {
467+
color: rgba(18,52,86,0.47059);
468+
color: var(--mainColor);
469+
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
470+
font-size: 1rem;
471+
font-size: var(--fontSize);
472+
line-height: calc(1rem * 1.5);
473+
line-height: calc(var(--fontSize) * 1.5);
474+
word-wrap: break-word;
475+
padding-left: calc(1rem / 2 + 1px);
476+
padding-right: calc(1rem / 2 + 1px);
477+
padding-left: calc(var(--fontSize) / 2 + 1px);
478+
padding-right: calc(var(--fontSize) / 2 + 1px);
479+
}
480+
}
481+
482+
h1,h2,h3,h4,h5,h6 {
483+
margin-top: 0;
484+
margin-bottom: 0;
485+
}
486+
487+
main.hero, .hero.main {
488+
background-image: img1x.png;
489+
}
490+
491+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
492+
493+
main.hero, .hero.main {
494+
background-image: img2x.png;
495+
}
496+
}
497+
498+
main.hero, .hero.main {
499+
background-image: -webkit-image-set(url(/webpack/public/path/img1x.png) 1x, url(/webpack/public/path/img2x.png) 2x);
500+
background-image: image-set(\\"img1x.png\\" 1x, \\"img2x.png\\" 2x);
501+
}
502+
503+
a {
504+
color: rgba(0, 0, 255, 0.9)
505+
}
506+
507+
a:hover {
508+
color: #639;
509+
}
510+
",
511+
"",
512+
],
513+
]
514+
`;
515+
516+
exports[`loader using together with "postcss-loader": module 1`] = `
517+
"var escape = require(\\"../../../lib/runtime/escape.js\\");
518+
exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
519+
// imports
520+
521+
522+
// module
523+
exports.push([module.id, \\":root {\\\\n --fontSize: 1rem;\\\\n --mainColor: rgba(18,52,86,0.47059);\\\\n --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n overflow-x: hidden;\\\\n overflow-y: auto;\\\\n overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n body {\\\\n color: rgba(18,52,86,0.47059);\\\\n color: var(--mainColor);\\\\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n font-size: 1rem;\\\\n font-size: var(--fontSize);\\\\n line-height: calc(1rem * 1.5);\\\\n line-height: calc(var(--fontSize) * 1.5);\\\\n word-wrap: break-word;\\\\n padding-left: calc(1rem / 2 + 1px);\\\\n padding-right: calc(1rem / 2 + 1px);\\\\n padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n margin-top: 0;\\\\n margin-bottom: 0;\\\\n}\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: img1x.png;\\\\n}\\\\n\\\\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: img2x.png;\\\\n}\\\\n}\\\\n\\\\nmain.hero, .hero.main {\\\\n background-image: -webkit-image-set(url(\\" + escape(require(\\"./img1x.png\\")) + \\") 1x, url(\\" + escape(require(\\"./img2x.png\\")) + \\") 2x);\\\\n background-image: image-set(\\\\\\"img1x.png\\\\\\" 1x, \\\\\\"img2x.png\\\\\\" 2x);\\\\n}\\\\n\\\\na {\\\\n color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n color: #639;\\\\n }\\\\n\\", \\"\\"]);
524+
525+
// exports
526+
"
527+
`;
528+
529+
exports[`loader using together with "postcss-loader": warnings 1`] = `Array []`;

‎test/fixtures/postcss-present-env/img1x.png‎

76.3 KB
Loading

‎test/fixtures/postcss-present-env/img2x.png‎

76.3 KB
Loading

‎test/fixtures/postcss-present-env/source.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@custom-media --viewport-medium (width <= 50rem);
2+
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
3+
4+
:root {
5+
--fontSize: 1rem;
6+
--mainColor: #12345678;
7+
--secondaryColor: lab(32.5 38.5 -47.6 / 90%);
8+
}
9+
10+
html {
11+
overflow: hidden auto;
12+
}
13+
14+
@media (--viewport-medium) {
15+
body {
16+
color: var(--mainColor);
17+
font-family: system-ui;
18+
font-size: var(--fontSize);
19+
line-height: calc(var(--fontSize) * 1.5);
20+
overflow-wrap: break-word;
21+
padding-inline: calc(var(--fontSize) / 2 + 1px);
22+
}
23+
}
24+
25+
:--heading {
26+
margin-block: 0;
27+
}
28+
29+
.hero:matches(main, .main) {
30+
background-image: image-set("img1x.png" 1x, "img2x.png" 2x);
31+
}
32+
33+
a {
34+
color: rgb(0 0 100% / 90%);
35+
36+
&:hover {
37+
color: rebeccapurple;
38+
}
39+
}

‎test/helpers.js‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ function evaluated(output, modules, moduleId = 1) {
3131
const importedModule = modules.find((el) => {
3232
const modulePath = el.identifier.split('!').pop();
3333
const importedPaths = [
34+
'postcss-present-env',
3435
'icss/tests-cases/import',
3536
'import',
3637
'import/node_modules',
@@ -88,21 +89,32 @@ const moduleConfig = (config) => {
8889
loader: path.resolve(__dirname, '../index.js'),
8990
options: (config.loader && config.loader.options) || {},
9091
},
91-
].concat(
92-
config.sourceMap
93-
? [
94-
{
95-
loader: path.resolve(
96-
__dirname,
97-
'./fixtures/source-map-loader.js'
98-
),
99-
options: {
100-
sourceMap: config.sourceMap,
92+
]
93+
.concat(
94+
config.sourceMap
95+
? [
96+
{
97+
loader: path.resolve(
98+
__dirname,
99+
'./fixtures/source-map-loader.js'
100+
),
101+
options: {
102+
sourceMap: config.sourceMap,
103+
},
101104
},
102-
},
103-
]
104-
: []
105-
),
105+
]
106+
: []
107+
)
108+
.concat(
109+
config.postcssLoader
110+
? [
111+
{
112+
loader: 'postcss-loader',
113+
options: config.postcssLoaderOptions,
114+
},
115+
]
116+
: []
117+
),
106118
},
107119
{
108120
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,

‎test/loader.test.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const path = require('path');
22

3+
const postcssPresetEnv = require('postcss-preset-env');
4+
35
const { webpack, evaluated, normalizeErrors } = require('./helpers');
46

57
describe('loader', () => {
@@ -87,4 +89,24 @@ describe('loader', () => {
8789
);
8890
expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
8991
});
92+
93+
it('using together with "postcss-loader"', async () => {
94+
const config = {
95+
postcssLoader: true,
96+
postcssLoaderOptions: {
97+
plugins: () => [postcssPresetEnv({ stage: 0 })],
98+
},
99+
};
100+
const testId = './postcss-present-env/source.css';
101+
const stats = await webpack(testId, config);
102+
const { modules } = stats.toJson();
103+
const module = modules.find((m) => m.id === testId);
104+
105+
expect(module.source).toMatchSnapshot('module');
106+
expect(evaluated(module.source, modules)).toMatchSnapshot(
107+
'module (evaluated)'
108+
);
109+
expect(stats.compilation.warnings).toMatchSnapshot('warnings');
110+
expect(stats.compilation.errors).toMatchSnapshot('errors');
111+
});
90112
});

0 commit comments

Comments
 (0)