",
]
`;
exports[`loader should reuse PostCSS AST: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`loader should reuse PostCSS AST: errors 1`] = `Array []`;
exports[`loader should reuse PostCSS AST: warnings 1`] = `Array []`;
exports[`loader should throw an error on invalid syntax: errors 1`] = `
Array [
"ModuleBuildError: Module build failed (from \`replaced original path\`):
SyntaxError
(1:3) /test/fixtures/css/style.css Unnecessary curly bracket
> 1 | a {
| ^
2 | color: black;
3 | }
",
]
`;
exports[`loader should throw an error on invalid syntax: warnings 1`] = `Array []`;
exports[`loader should work with SugarSS: css 1`] = `
"a {
color: black
}
"
`;
exports[`loader should work with SugarSS: errors 1`] = `Array []`;
exports[`loader should work with SugarSS: warnings 1`] = `Array []`;
exports[`loader should work: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`loader should work: errors 1`] = `Array []`;
exports[`loader should work: warnings 1`] = `Array []`;
postcss-loader-4.2.0/test/__snapshots__/postcssOptins.test.js.snap 0000664 0000000 0000000 00000106374 14002266724 0025441 0 ustar 00root root 0000000 0000000 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`"postcssOptions" option should throw an error with "syntax" option on the unresolved syntax: errors 1`] = `
Array [
"ModuleBuildError: Module build failed (from \`replaced original path\`):
TypeError: Cannot read property 'parse' of undefined",
"ModuleError: Module Error (from \`replaced original path\`):
Loading PostCSS \\"unresolved\\" syntax failed: Cannot find module 'unresolved' from 'src/utils.js'",
]
`;
exports[`"postcssOptions" option should throw an error with "syntax" option on the unresolved syntax: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should throw an error with the "config" option on the invalid config: errors 1`] = `
Array [
"ModuleBuildError: Module build failed (from \`replaced original path\`):
Error: invalid postcss config",
]
`;
exports[`"postcssOptions" option should throw an error with the "config" option on the invalid config: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should throw an error with the "config" option on the unresolved config: errors 1`] = `
Array [
"ModuleBuildError: Module build failed (from \`replaced original path\`):
Error: No PostCSS config found in: /test/fixtures/config-scope/css/unresolve.js",
]
`;
exports[`"postcssOptions" option should throw an error with the "config" option on the unresolved config: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should throw an error with the "parser" option on the unresolved parser: errors 1`] = `
Array [
"ModuleBuildError: Module build failed (from \`replaced original path\`):
TypeError: parser is not a function",
"ModuleError: Module Error (from \`replaced original path\`):
Loading PostCSS \\"unresolved\\" parser failed: Cannot find module 'unresolved' from 'src/utils.js'",
]
`;
exports[`"postcssOptions" option should throw an error with the "parser" option on the unresolved parser: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should throw an error with the "plugins" option on the unresolved plugin: errors 1`] = `
Array [
"ModuleError: Module Error (from \`replaced original path\`):
Loading PostCSS \\"postcss-unresolved\\" plugin failed: Cannot find module 'postcss-unresolved' from 'src/utils.js'",
]
`;
exports[`"postcssOptions" option should throw an error with the "plugins" option on the unresolved plugin: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should throw an error with the "stringifier" option on the unresolved stringifier: errors 1`] = `
Array [
"ModuleBuildError: Module build failed (from \`replaced original path\`):
TypeError: this.stringify is not a function",
"ModuleError: Module Error (from \`replaced original path\`):
Loading PostCSS \\"unresolved\\" stringifier failed: Cannot find module 'unresolved' from 'src/utils.js'",
]
`;
exports[`"postcssOptions" option should throw an error with the "stringifier" option on the unresolved stringifier: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work "Function" value and with "Array" syntax of the "plugins" option: css 1`] = `
"a {
color: rgba(0, 0, 0, 1.0);
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work "Function" value and with "Array" syntax of the "plugins" option: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work "Function" value and with "Array" syntax of the "plugins" option: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work "Function" value and with "Object" syntax of the "plugins" option: css 1`] = `
"a {
color: rgba(0, 0, 0, 1.0);
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work "Function" value and with "Object" syntax of the "plugins" option: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work "Function" value and with "Object" syntax of the "plugins" option: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work "Function" value: css 1`] = `
"a {
color: rgba(0, 0, 0, 1.0);
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work "Function" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work "Function" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work and provide API for the configuration: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
border-top-color: blue;
border-right-color: blue;
border-left-color: blue;
background-color: #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work and provide API for the configuration: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work and provide API for the configuration: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with "from", "to" and "map" options (absolute paths): css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with "from", "to" and "map" options (absolute paths): errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with "from", "to" and "map" options (absolute paths): map 1`] = `undefined`;
exports[`"postcssOptions" option should work with "from", "to" and "map" options (absolute paths): warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with "from", "to" and "map" options (relative paths): css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with "from", "to" and "map" options (relative paths): errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with "from", "to" and "map" options (relative paths): map 1`] = `undefined`;
exports[`"postcssOptions" option should work with "from", "to" and "map" options (relative paths): warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options "String" value (relative path): css 1`] = `
"a { color: rgba(0, 0, 0, 1.0) }
.foo {
float: right;
}
"
`;
exports[`"postcssOptions" option should work with the "config" options "String" value (relative path): errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options "String" value (relative path): warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options and resolve "from" and "to" options: css 1`] = `
"a { color: black }
.foo {
float: right;
}
"
`;
exports[`"postcssOptions" option should work with the "config" options and resolve "from" and "to" options: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options and resolve "from" and "to" options: source map 1`] = `
Object {
"file": "style.css",
"mappings": "AAAA,IAAI,aAAa;;AAEjB;EACE,YAAY;AACd",
"names": Array [],
"sourceRoot": "",
"sources": Array [
"style.css",
],
"sourcesContent": Array [
"a { color: black }
.foo {
float: right;
}
",
],
"version": 3,
}
`;
exports[`"postcssOptions" option should work with the "config" options and resolve "from" and "to" options: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options and use plugins: css 1`] = `
"a { color: black }
.foo {
float: right;
}
.bar {
border-top-color: blue;
border-right-color: blue;
border-left-color: blue;
background-color: #fafafa;
}
@media (prefers-color-scheme: dark) {
:root:not(.is-light) { /* :root is for HTML documents */
--text-color: white
}
html:not(.is-light) body {
background: black
}
}
:root.is-dark { /* :root is for HTML documents */
--text-color: white
}
html.is-dark body {
background: black
}"
`;
exports[`"postcssOptions" option should work with the "config" options and use plugins: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options and use plugins: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "String" value (absolute path): css 1`] = `
"a { color: rgba(0, 0, 0, 1.0) }
.foo {
float: right;
}
"
`;
exports[`"postcssOptions" option should work with the "config" options with "String" value (absolute path): errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "String" value (absolute path): warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "String" value (with path to the directory with the configuration): css 1`] = `
"a { color: rgba(0, 0, 0, 1.0) }
.foo {
float: right;
}
"
`;
exports[`"postcssOptions" option should work with the "config" options with "String" value (with path to the directory with the configuration): errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "String" value (with path to the directory with the configuration): warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "String" value and respect all options: css 1`] = `
"a {
color: black
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLnNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0FBREYiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYVxuICBjb2xvcjogYmxhY2tcbiJdfQ== */"
`;
exports[`"postcssOptions" option should work with the "config" options with "String" value and respect all options: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "String" value and respect all options: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "false" value: css 1`] = `
"a { color: black }
.foo {
float: right;
}
"
`;
exports[`"postcssOptions" option should work with the "config" options with "false" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "false" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "package.json" configuration: css 1`] = `
".import {
color: red;
}
.test {
color: blue;
}
"
`;
exports[`"postcssOptions" option should work with the "config" options with "package.json" configuration: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "package.json" configuration: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "true" value: css 1`] = `
"a { color: rgba(0, 0, 0, 1.0) }
.foo {
float: right;
}
"
`;
exports[`"postcssOptions" option should work with the "config" options with "true" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "config" options with "true" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7QUFDWjs7QUFFQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLDRCQUE0QjtFQUM1QixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSw0QkFBNEI7RUFDNUIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0U7SUFDRSxZQUFZOztJQUVaO01BQ0UsV0FBVztJQUNiOztJQUVBO01BQ0UsWUFBWTtJQUNkO0VBQ0Y7O0VBRUE7SUFDRSxjQUFjO0VBQ2hCO0FBQ0YiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7XG4gIGNvbG9yOiBibGFjaztcbn1cblxuYSB7XG4gIGNvbG9yOiByZWQ7XG59XG5cbmEge1xuICBjb2xvcjogZ3JlZW47XG59XG5cbmEge1xuICBjb2xvcjogYmx1ZTtcbn1cblxuLmNsYXNzIHtcbiAgLXgtYm9yZGVyLWNvbG9yOiBibHVlIGJsdWUgKjtcbiAgLXgtY29sb3I6ICogI2ZhZmFmYTtcbn1cblxuLmNsYXNzLWZvbyB7XG4gIC16LWJvcmRlci1jb2xvcjogYmx1ZSBibHVlICo7XG4gIC16LWNvbG9yOiAqICNmYWZhZmE7XG59XG5cbi5waG9uZSB7XG4gICZfdGl0bGUge1xuICAgIHdpZHRoOiA1MDBweDtcblxuICAgIEBtZWRpYSAobWF4LXdpZHRoOiA1MDBweCkge1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgfVxuXG4gICAgYm9keS5pc19kYXJrICYge1xuICAgICAgY29sb3I6IHdoaXRlO1xuICAgIH1cbiAgfVxuXG4gIGltZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cbiJdfQ== */"
`;
exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: map 1`] = `undefined`;
exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "parser" option with "Function" value: css 1`] = `
"a {
color: black
}
"
`;
exports[`"postcssOptions" option should work with the "parser" option with "Function" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "parser" option with "Function" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "parser" option with "Object" value: css 1`] = `
"a {
color: black
}
"
`;
exports[`"postcssOptions" option should work with the "parser" option with "Object" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "parser" option with "Object" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "parser" option with "String" value: css 1`] = `
"a {
color: black
}
"
`;
exports[`"postcssOptions" option should work with the "parser" option with "String" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "parser" option with "String" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and not throw an error on falsy plugin: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and not throw an error on falsy plugin: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and override the previous plugin options: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
border-top-color: blue;
border-right-color: blue;
border-left-color: blue;
background-color: #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and override the previous plugin options: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and override the previous plugin options: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and support disabling plugins from the configuration: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and support disabling plugins from the configuration: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and support disabling plugins from the configuration: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value, and config, and override the previous plugin options: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
border-top-color: blue;
border-right-color: blue;
border-left-color: blue;
background-color: #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value, and config, and override the previous plugin options: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value, and config, and override the previous plugin options: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value: css 1`] = `
"a {
color: rgba(0, 0, 0, 1.0);
}
a {
color: rgba(255, 0, 0, 1.0);
}
a {
color: rgba(0, 255, 0, 1.0);
}
a {
color: rgba(0, 0, 255, 1.0);
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
border-top-color: rgba(0, 0, 255, 1.0);
border-right-color: rgba(0, 0, 255, 1.0);
border-left-color: rgba(0, 0, 255, 1.0);
background-color: #fafafa;
}
.phone_title {
width: 100px;
}
@media (max-width: 500px) {
.phone_title {
width: 100px
}
}
body.is_dark .phone_title {
color: rgba(0, 0, 0, 0);
}
.phone img {
display: block;
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Array" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and only disabled plugins: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and only disabled plugins: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and only disabled plugins: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and override the previous plugin options: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
border-top-color: blue;
border-right-color: blue;
border-left-color: blue;
background-color: #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and override the previous plugin options: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and override the previous plugin options: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and support disabling plugins from the configuration: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and support disabling plugins from the configuration: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and support disabling plugins from the configuration: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value, and config, and override the previous plugin options: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
border-top-color: blue;
border-right-color: blue;
border-left-color: blue;
background-color: #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value, and config, and override the previous plugin options: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value, and config, and override the previous plugin options: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: rgba(0, 0, 255, 1.0);
}
.class {
border-top-color: rgba(0, 0, 255, 1.0);
border-right-color: rgba(0, 0, 255, 1.0);
border-left-color: rgba(0, 0, 255, 1.0);
background-color: #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone_title {
width: 500px;
}
@media (max-width: 500px) {
.phone_title {
width: auto
}
}
body.is_dark .phone_title {
color: white;
}
.phone img {
display: block;
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with "Object" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with empty "Array" value: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with empty "Array" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with empty "Array" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with empty "Object" value: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with empty "Object" value: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with empty "Object" value: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with the "default" property with options: css 1`] = `
"a {
color: black;
}
a {
color: rgba(0, 0, 255, 0.5);
}
a {
color: green;
}
a {
color: blue;
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with the "default" property with options: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with the "default" property with options: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with the "default" property without options: css 1`] = `
"a {
color: black;
}
a {
color: red;
}
a {
color: green;
}
a {
color: rgba(0, 0, 255, 1.0);
}
.class {
-x-border-color: blue blue *;
-x-color: * #fafafa;
}
.class-foo {
-z-border-color: blue blue *;
-z-color: * #fafafa;
}
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
"
`;
exports[`"postcssOptions" option should work with the "plugins" option with the "default" property without options: errors 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "plugins" option with the "default" property without options: warnings 1`] = `Array []`;
exports[`"postcssOptions" option should work with the "stringifier" option with "Function" value: css 1`] = `
"a {
color : black ;
}
a {
color : red ;
}
a {
color : green ;
}
a {
color : blue ;
}
.class {
-x-border-color : blue blue * ;
-x-color : * #fafafa ;
}
.class-foo {
-z-border-color : blue blue * ;
-z-color : * #fafafa ;
}
.phone {
_title {
width : 500px ;
@media ( max-width : 500px ) {
width : auto ;
}
body .is_dark {
color : white ;
}
}
img {
display : block ;
}
}
");
});
};
const postcssPlugin = postcss.plugin("postcss-plugin", plugin);
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: [postcssPlugin()],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should emit asset using the "messages" API', async () => {
const plugin = () => (css, result) => {
result.messages.push({
type: "asset",
file: "sprite.svg",
content: "... ",
plugin,
});
};
const postcssPlugin = postcss.plugin("postcss-assets", plugin);
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: [postcssPlugin()],
},
});
const stats = await compile(compiler);
// eslint-disable-next-line no-underscore-dangle
expect(stats.compilation.assets["sprite.svg"]).toBeDefined();
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it("should reuse PostCSS AST", async () => {
const spy = jest.fn();
const compiler = getCompiler(
"./css/index.js",
{},
{
module: {
rules: [
{
test: /\.(css|sss)$/i,
use: [
{
loader: require.resolve("./helpers/testLoader"),
options: {},
},
{
loader: path.resolve(__dirname, "../src"),
options: {
postcssOptions: { hideNothingWarning: true },
},
},
{
loader: require.resolve("./helpers/astLoader"),
options: { spy },
},
],
},
],
},
}
);
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(spy).toHaveBeenCalledTimes(1);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it("should work with SugarSS", async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
parser: "sugarss",
hideNothingWarning: true,
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.sss", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
});
postcss-loader-4.2.0/test/postcssOptins.test.js 0000664 0000000 0000000 00000065603 14002266724 0021662 0 ustar 00root root 0000000 0000000 import path from "path";
import {
compile,
getCompiler,
getErrors,
getCodeFromBundle,
getWarnings,
} from "./helpers";
import myPostcssPlugin from "./fixtures/plugin/plugin";
jest.setTimeout(30000);
describe('"postcssOptions" option', () => {
it('should work without the specified values in the "postcssOptions" option', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with "from", "to" and "map" options (absolute paths)', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
from: "/test/from.css",
to: "/test/to.css",
map: { inline: false, annotation: false },
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
const toIsWork = codeFromBundle.sourceMap.file.endsWith("to.css");
const fromIsWork =
codeFromBundle.sourceMap.sources.filter((i) => i.endsWith("from.css"))
.length > 0;
expect(toIsWork).toBe(true);
expect(fromIsWork).toBe(true);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(codeFromBundle.map).toMatchSnapshot("map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with "from", "to" and "map" options (relative paths)', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
from: "./css/style.css",
to: "./css/style.css",
map: { inline: false, annotation: false },
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
const toIsWork = codeFromBundle.sourceMap.file.endsWith("style.css");
const fromIsWork =
codeFromBundle.sourceMap.sources.filter((i) => i.endsWith("style.css"))
.length > 0;
expect(toIsWork).toBe(true);
expect(fromIsWork).toBe(true);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(codeFromBundle.map).toMatchSnapshot("map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "map" option and generate inlined source maps', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
map: { inline: true, annotation: false },
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(codeFromBundle.map).toMatchSnapshot("map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work "Function" value', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: () => {
return {
// eslint-disable-next-line global-require
plugins: [require("./fixtures/config-scope/config/plugin")()],
};
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work "Function" value and with "Array" syntax of the "plugins" option', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: () => {
return {
// eslint-disable-next-line global-require
plugins: [require("./fixtures/config-scope/config/plugin")()],
};
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work "Function" value and with "Object" syntax of the "plugins" option', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: () => {
return {
// eslint-disable-next-line global-require
plugins: [require("./fixtures/config-scope/config/plugin")()],
};
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "parser" option with "String" value', async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
parser: "sugarss",
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.sss", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "parser" option with "Object" value', async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
// eslint-disable-next-line global-require,import/no-dynamic-require
parser: require("sugarss"),
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.sss", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "parser" option with "Function" value', async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
// eslint-disable-next-line global-require,import/no-dynamic-require
parser: require("sugarss").parse,
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.sss", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should throw an error with the "parser" option on the unresolved parser', async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
parser: "unresolved",
},
});
const stats = await compile(compiler);
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats, true)).toMatchSnapshot("errors");
});
it('should work with the "stringifier" option with "String" value', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
stringifier: "sugarss",
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "stringifier" option with "Object" value', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
// eslint-disable-next-line global-require
stringifier: require("sugarss"),
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "stringifier" option with "Function" value', async () => {
// eslint-disable-next-line global-require
const Midas = require("midas");
const midas = new Midas();
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
stringifier: midas.stringifier,
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should throw an error with the "stringifier" option on the unresolved stringifier', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
stringifier: "unresolved",
},
});
const stats = await compile(compiler);
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats, true)).toMatchSnapshot("errors");
});
it('should work with the "syntax" option with "String" value', async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
syntax: "sugarss",
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.sss", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "syntax" option with "Object" value', async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
// eslint-disable-next-line global-require
syntax: require("sugarss"),
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.sss", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should throw an error with "syntax" option on the unresolved syntax', async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
syntax: "unresolved",
},
});
const stats = await compile(compiler);
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats, true)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Array" value', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: [
"postcss-nested",
["postcss-short", { prefix: "x" }],
myPostcssPlugin,
// Like:
// `
// import myPlugin from './path/to/plugin.mjs';
//
// const initPlugin = myPlugin();
// `
(root) => {
root.walkDecls((decl) => {
if (decl.value === "red") {
// eslint-disable-next-line no-param-reassign
decl.value = "rgba(255, 0, 0, 1.0)";
}
});
},
// Like:
// `
// import myPlugin from './path/to/plugin.mjs';
// `
{
postcss: (root) => {
root.walkDecls((decl) => {
if (decl.value === "green") {
// eslint-disable-next-line no-param-reassign
decl.value = "rgba(0, 255, 0, 1.0)";
}
});
},
},
require.resolve("./fixtures/plugin/other-plugin"),
myPostcssPlugin({ color: "white", alpha: 0 }),
{ "postcss-short": { prefix: "z" } },
// New API
require.resolve("./fixtures/plugin/new-api.plugin"),
],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Object" value', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: {
"postcss-import": {},
"postcss-nested": {},
"postcss-short": { prefix: "x" },
[require.resolve("./fixtures/plugin/other-plugin")]: {},
},
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with empty "Array" value', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: [],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with empty "Object" value', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: {},
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Array" value and support disabling plugins from the configuration', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
config: path.resolve(__dirname, "./fixtures/css/plugins.config.js"),
plugins: [{ "postcss-short": false }],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Object" value and support disabling plugins from the configuration', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
config: path.resolve(__dirname, "./fixtures/css/plugins.config.js"),
plugins: {
"postcss-short": false,
},
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Object" value and only disabled plugins', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: {
"postcss-import": false,
"postcss-nested": false,
"postcss-short": false,
},
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Array" value and override the previous plugin options', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: [
["postcss-short", { prefix: "x" }],
["postcss-short", { prefix: "z" }],
],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Object" value and override the previous plugin options', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: {
"postcss-short": { prefix: "x" },
// eslint-disable-next-line no-dupe-keys
"postcss-short": { prefix: "z" },
},
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Array" value, and config, and override the previous plugin options', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
config: path.resolve(__dirname, "./fixtures/css/plugins.config.js"),
plugins: [["postcss-short", { prefix: "z" }]],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Object" value, and config, and override the previous plugin options', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
config: path.resolve(__dirname, "./fixtures/css/plugins.config.js"),
plugins: {
"postcss-short": { prefix: "z" },
},
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should throw an error with the "plugins" option on the unresolved plugin', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: ["postcss-unresolved"],
},
});
const stats = await compile(compiler);
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats, true)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with "Array" value and not throw an error on falsy plugin', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
// eslint-disable-next-line no-undefined
plugins: [undefined, null, "", 0],
},
});
const stats = await compile(compiler);
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats, true)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with the "default" property without options', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: [
path.resolve(__dirname, "./fixtures/plugin/default-other-plugin.js"),
],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "plugins" option with the "default" property with options', async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
plugins: [
[
path.resolve(
__dirname,
"./fixtures/plugin/default-other-plugin.js"
),
{ alpha: 0.5, color: "red" },
],
],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "config" options with "false" value', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {
config: false,
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "config" options with "true" value', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {
config: true,
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "config" options with "String" value (absolute path)', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {
config: path.resolve(
__dirname,
"./fixtures/config-scope/css/custom.config.js"
),
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "config" options "String" value (relative path)', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {
config: "test/fixtures/config-scope/css/custom.config.js",
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "config" options with "String" value (with path to the directory with the configuration)', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {
config: "test/fixtures/config-scope",
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "config" options with "package.json" configuration', async () => {
const compiler = getCompiler("./config-autoload/pkg/index.js", {
postcssOptions: {
config: path.resolve(__dirname, "./fixtures", "config-autoload/pkg"),
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("index.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "config" options and use plugins', async () => {
const compiler = getCompiler("./config-scope/with-config/index.js", {
postcssOptions: {
config: true,
plugins: ["postcss-dark-theme-class"],
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should work with the "config" options with "String" value and respect all options', async () => {
const compiler = getCompiler("./sss/index.js", {
postcssOptions: {
config: path.resolve(
__dirname,
"./fixtures/config-scope/all-options/postcss.config.js"
),
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.sss", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should throw an error with the "config" option on the unresolved config', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {
config: path.resolve(
__dirname,
"./fixtures/config-scope/css/unresolve.js"
),
},
});
const stats = await compile(compiler);
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats, true)).toMatchSnapshot("errors");
});
it('should throw an error with the "config" option on the invalid config', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {
config: path.resolve(
__dirname,
"./fixtures/config-scope/css/invalid.config.js"
),
},
});
const stats = await compile(compiler);
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats, true)).toMatchSnapshot("errors");
});
it('should work with the "config" options and resolve "from" and "to" options', async () => {
const compiler = getCompiler("./config-scope/css/index.js", {
postcssOptions: {
config: path.resolve(
__dirname,
"./fixtures/config-scope/from-to/postcss.config.js"
),
},
});
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.css", stats);
sourceMap.sourceRoot = "";
sourceMap.sources = sourceMap.sources.map((source) => {
expect(path.isAbsolute(source)).toBe(false);
expect(source).toBe(path.normalize(source));
return source.replace(/\\/g, "/");
});
expect(css).toMatchSnapshot("css");
expect(sourceMap).toMatchSnapshot("source map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it("should work and provide API for the configuration", async () => {
const compiler = getCompiler("./css/index.js", {
postcssOptions: {
config: path.resolve(
__dirname,
"./fixtures/config-scope/api/postcss.config.js"
),
},
});
const stats = await compile(compiler);
const codeFromBundle = getCodeFromBundle("style.css", stats);
expect(codeFromBundle.css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
});
postcss-loader-4.2.0/test/sourceMap.test.js 0000664 0000000 0000000 00000036022 14002266724 0020716 0 ustar 00root root 0000000 0000000 /**
* @jest-environment node
*/
import path from "path";
import fs from "fs";
import {
compile,
getCompiler,
getErrors,
getCodeFromBundle,
getWarnings,
} from "./helpers";
describe('"sourceMap" option', () => {
it('should generate source maps with "true" value and the "devtool" with "false" value', async () => {
const compiler = getCompiler(
"./css/index.js",
{
sourceMap: true,
postcssOptions: { hideNothingWarning: true },
},
{
devtool: false,
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.css", stats);
sourceMap.sourceRoot = "";
sourceMap.sources = sourceMap.sources.map((source) => {
expect(path.isAbsolute(source)).toBe(true);
expect(source).toBe(path.normalize(source));
expect(fs.existsSync(path.resolve(sourceMap.sourceRoot, source))).toBe(
true
);
return path
.relative(path.resolve(__dirname, "./fixtures"), source)
.replace(/\\/g, "/");
});
expect(css).toMatchSnapshot("css");
expect(sourceMap).toMatchSnapshot("source map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate source maps with "true" value and the "devtool" option with "source-map" value', async () => {
const compiler = getCompiler(
"./css/index.js",
{
sourceMap: true,
postcssOptions: { hideNothingWarning: true },
},
{
devtool: "source-map",
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.css", stats);
sourceMap.sourceRoot = "";
sourceMap.sources = sourceMap.sources.map((source) => {
expect(path.isAbsolute(source)).toBe(true);
expect(source).toBe(path.normalize(source));
expect(fs.existsSync(path.resolve(sourceMap.sourceRoot, source))).toBe(
true
);
return path
.relative(path.resolve(__dirname, "./fixtures"), source)
.replace(/\\/g, "/");
});
expect(css).toMatchSnapshot("css");
expect(sourceMap).toMatchSnapshot("source map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate source maps when value is not specified and the "devtool" with "source-map" value', async () => {
const compiler = getCompiler(
"./css/index.js",
{
postcssOptions: { hideNothingWarning: true },
},
{
devtool: "source-map",
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.css", stats);
sourceMap.sourceRoot = "";
sourceMap.sources = sourceMap.sources.map((source) => {
expect(path.isAbsolute(source)).toBe(true);
expect(source).toBe(path.normalize(source));
expect(fs.existsSync(path.resolve(sourceMap.sourceRoot, source))).toBe(
true
);
return path
.relative(path.resolve(__dirname, "./fixtures"), source)
.replace(/\\/g, "/");
});
expect(css).toMatchSnapshot("css");
expect(sourceMap).toMatchSnapshot("source map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate source maps with "false" value, but the "postcssOptions.map" has values', async () => {
const compiler = getCompiler(
"./css/index.js",
{
postcssOptions: {
map: {
inline: false,
annotation: false,
prev: false,
sourcesContent: true,
},
hideNothingWarning: true,
},
},
{
devtool: false,
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.css", stats);
sourceMap.sourceRoot = "";
sourceMap.sources = sourceMap.sources.map((source) => {
expect(path.isAbsolute(source)).toBe(false);
expect(source).toBe(path.normalize(source));
expect(
fs.existsSync(path.resolve(__dirname, "./fixtures/css", source))
).toBe(true);
return source.replace(/\\/g, "/");
});
expect(css).toMatchSnapshot("css");
expect(sourceMap).toMatchSnapshot("source map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate source maps using the "postcssOptions.map" option with "true" value and previous loader returns source maps ("sass-loader")', async () => {
const compiler = getCompiler(
"./scss/index.js",
{},
{
devtool: false,
module: {
rules: [
{
test: /\.scss$/i,
use: [
{
loader: require.resolve("./helpers/testLoader"),
options: {},
},
{
loader: path.resolve(__dirname, "../src"),
options: {
postcssOptions: {
map: true,
hideNothingWarning: true,
},
},
},
{
loader: "sass-loader",
options: {
// eslint-disable-next-line global-require
implementation: require("sass"),
sassOptions: {
sourceMap: true,
sourceMapRoot: path.resolve(
__dirname,
"./fixtures/scss/"
),
outFile: path.resolve(
__dirname,
"./fixtures/scss/style.css.map"
),
sourceMapContents: true,
omitSourceMapUrl: true,
sourceMapEmbed: false,
},
},
},
],
},
],
},
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.scss", stats);
expect(css).toMatchSnapshot("css");
expect(sourceMap).toBeUndefined();
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate source maps using the "postcssOptions.map" option with values and previous loader returns source maps ("sass-loader")', async () => {
const compiler = getCompiler(
"./scss/index.js",
{},
{
devtool: false,
module: {
rules: [
{
test: /\.scss$/i,
use: [
{
loader: require.resolve("./helpers/testLoader"),
options: {},
},
{
loader: path.resolve(__dirname, "../src"),
options: {
postcssOptions: {
map: {
inline: false,
sourcesContent: true,
annotation: true,
},
hideNothingWarning: true,
},
},
},
{
loader: "sass-loader",
options: {
// eslint-disable-next-line global-require
implementation: require("sass"),
sassOptions: {
sourceMap: true,
sourceMapRoot: path.resolve(
__dirname,
"./fixtures/scss/"
),
outFile: path.resolve(
__dirname,
"./fixtures/scss/style.css.map"
),
sourceMapContents: true,
omitSourceMapUrl: true,
sourceMapEmbed: false,
},
},
},
],
},
],
},
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.scss", stats);
sourceMap.sourceRoot = "";
sourceMap.sources = sourceMap.sources.map((source) => {
expect(path.isAbsolute(source)).toBe(false);
expect(
fs.existsSync(path.resolve(__dirname, "./fixtures/scss", source))
).toBe(true);
return source.replace(/\\/g, "/");
});
expect(css).toMatchSnapshot("css");
expect(sourceMap).toMatchSnapshot("source map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should not generate source maps with "false" value and the "devtool" option with "false" value', async () => {
const compiler = getCompiler(
"./css/index.js",
{
sourceMap: false,
postcssOptions: { hideNothingWarning: true },
},
{
devtool: false,
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.css", stats);
expect(css).toMatchSnapshot("css");
expect(sourceMap).toBeUndefined();
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should not generate source maps with "false" value and the "devtool" option with "source-map" value', async () => {
const compiler = getCompiler(
"./css/index.js",
{
sourceMap: false,
postcssOptions: { hideNothingWarning: true },
},
{
devtool: "source-map",
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.css", stats);
expect(css).toMatchSnapshot("css");
expect(sourceMap).toBeUndefined();
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should not generate source maps when value is not specified and the "devtool" option with "source-map" value', async () => {
const compiler = getCompiler(
"./css/index.js",
{
postcssOptions: { hideNothingWarning: true },
},
{
devtool: false,
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.css", stats);
expect(css).toMatchSnapshot("css");
expect(sourceMap).toBeUndefined();
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate source maps when previous loader returns source maps ("sass-loader")', async () => {
const compiler = getCompiler(
"./scss/index.js",
{},
{
devtool: "source-map",
module: {
rules: [
{
test: /\.scss$/i,
use: [
{
loader: require.resolve("./helpers/testLoader"),
},
{
loader: path.resolve(__dirname, "../src"),
options: {
postcssOptions: { hideNothingWarning: true },
},
},
{
loader: "sass-loader",
options: {
// eslint-disable-next-line global-require
implementation: require("sass"),
},
},
],
},
],
},
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.scss", stats);
sourceMap.sourceRoot = "";
sourceMap.sources = sourceMap.sources.map((source) => {
expect(path.isAbsolute(source)).toBe(true);
expect(source).toBe(path.normalize(source));
expect(fs.existsSync(path.resolve(sourceMap.sourceRoot, source))).toBe(
true
);
return path
.relative(path.resolve(__dirname, "./fixtures"), source)
.replace(/\\/g, "/");
});
expect(css).toMatchSnapshot("css");
expect(sourceMap).toMatchSnapshot("source map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate source maps when previous loader returns source maps ("less-loader")', async () => {
const compiler = getCompiler(
"./less/index.js",
{},
{
devtool: "source-map",
module: {
rules: [
{
test: /\.less$/i,
use: [
{
loader: require.resolve("./helpers/testLoader"),
options: {},
},
{
loader: path.resolve(__dirname, "../src"),
options: {
postcssOptions: { hideNothingWarning: true },
},
},
{
loader: "less-loader",
},
],
},
],
},
}
);
const stats = await compile(compiler);
const { css, sourceMap } = getCodeFromBundle("style.less", stats);
sourceMap.sourceRoot = "";
sourceMap.sources = sourceMap.sources.map((source) => {
expect(path.isAbsolute(source)).toBe(true);
expect(source).toBe(path.normalize(source));
expect(fs.existsSync(path.resolve(sourceMap.sourceRoot, source))).toBe(
true
);
return path
.relative(path.resolve(__dirname, "./fixtures"), source)
.replace(/\\/g, "/");
});
expect(css).toMatchSnapshot("css");
expect(sourceMap).toMatchSnapshot("source map");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate inline source maps when the "devtool" is "false"', async () => {
const compiler = getCompiler(
"./css/index.js",
{
postcssOptions: {
map: {
inline: true,
annotation: false,
},
hideNothingWarning: true,
},
},
{
devtool: false,
}
);
const stats = await compile(compiler);
const { css } = getCodeFromBundle("style.css", stats);
expect(css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
it('should generate inline source maps when the "devtool" is "true"', async () => {
const compiler = getCompiler(
"./css/index.js",
{
postcssOptions: {
map: {
inline: true,
annotation: false,
},
hideNothingWarning: true,
},
},
{
devtool: "source-map",
}
);
const stats = await compile(compiler);
const { css } = getCodeFromBundle("style.css", stats);
expect(css).toMatchSnapshot("css");
expect(getWarnings(stats)).toMatchSnapshot("warnings");
expect(getErrors(stats)).toMatchSnapshot("errors");
});
});
postcss-loader-4.2.0/test/validate-options.test.js 0000664 0000000 0000000 00000007234 14002266724 0022245 0 ustar 00root root 0000000 0000000 /* eslint-disable global-require */
import path from "path";
import { getCompiler, compile } from "./helpers/index";
describe("validate options", () => {
const tests = {
execute: {
success: [false],
failure: [1, "test", /test/, [], {}, { foo: "bar" }],
},
postcssOptions: {
success: [
{ parser: "sugarss" },
{ parser: require("sugarss") },
{ parser: require("sugarss").parse },
{ syntax: "sugarss" },
{ syntax: require("sugarss") },
{ stringifier: "sugarss" },
{ stringifier: require("sugarss") },
{ stringifier: require("sugarss").stringify },
{
plugins: [
require("./fixtures/plugin/plugin")(),
require("./fixtures/plugin/plugin"),
["postcss-short", { prefix: "x" }],
],
},
{
plugins: [
require("./fixtures/plugin/plugin")(),
require("./fixtures/plugin/plugin"),
{ "postcss-short": { prefix: "x" } },
],
},
{ plugins: { "postcss-short": { prefix: "x" } } },
{ config: true },
{ config: false },
{ config: "test/fixtures/config-scope/config/postcss.config.js" },
{
config: path.resolve(
__dirname,
"./fixtures/config-scope/config/postcss.config.js"
),
},
],
failure: [{ config: [] }, { config: /test/ }],
},
sourceMap: {
success: [true, false],
failure: [1, /test/, [], {}, "something"],
},
implementation: {
success: [require("postcss")],
failure: [1, /test/, [], {}, "something"],
},
};
function stringifyValue(value) {
if (
Array.isArray(value) ||
(value && typeof value === "object" && value.constructor === Object)
) {
return JSON.stringify(value);
}
return value;
}
async function createTestCase(key, value, type) {
it(`should ${
type === "success" ? "successfully validate" : "throw an error on"
} the "${key}" option with "${stringifyValue(value)}" value`, async () => {
let compiler;
if (
key === "postcssOptions" &&
// eslint-disable-next-line no-prototype-builtins
(value.hasOwnProperty("parser") || value.hasOwnProperty("syntax"))
) {
compiler = getCompiler(
"./sss/index.js",
{},
{
module: {
rules: [
{
test: /\.sss$/i,
use: [
{
loader: require.resolve("./helpers/testLoader"),
options: {},
},
{
loader: path.resolve(__dirname, "../src"),
options: { [key]: value },
},
],
},
],
},
}
);
} else {
compiler = getCompiler("./css/index.js", { [key]: value });
}
let stats;
try {
stats = await compile(compiler);
} finally {
if (type === "success") {
expect(stats.hasErrors()).toBe(false);
} else if (type === "failure") {
const {
compilation: { errors },
} = stats;
expect(errors).toHaveLength(1);
expect(() => {
throw new Error(errors[0].error.message);
}).toThrowErrorMatchingSnapshot();
}
}
});
}
for (const [key, values] of Object.entries(tests)) {
for (const type of Object.keys(values)) {
for (const value of values[type]) {
createTestCase(key, value, type);
}
}
}
});