+
+Code:
+ color: red
+",
+]
+`;
+
+exports[`loader should register dependencies using the "messages" API: errors 1`] = `[]`;
+
+exports[`loader should register dependencies using the "messages" API: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`loader should reuse PostCSS AST: warnings 1`] = `[]`;
+
+exports[`loader should throw an error on invalid syntax: errors 1`] = `
+[
+ "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`] = `[]`;
+
+exports[`loader should work with SugarSS: css 1`] = `
+"a {
+ color: black
+}
+"
+`;
+
+exports[`loader should work with SugarSS: errors 1`] = `[]`;
+
+exports[`loader should work with SugarSS: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`loader should work: warnings 1`] = `[]`;
diff --git a/test/__snapshots__/postcssOptions.test.js.snap b/test/__snapshots__/postcssOptions.test.js.snap
new file mode 100644
index 00000000..15d0c976
--- /dev/null
+++ b/test/__snapshots__/postcssOptions.test.js.snap
@@ -0,0 +1,1481 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`"postcssOptions" option should throw an error with "syntax" option on the unresolved syntax: errors 1`] = `
+[
+ "ModuleBuildError: Module build failed (from \`replaced original path\`):
+TypeError: Cannot read properties of undefined (reading 'parse')",
+ "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`] = `[]`;
+
+exports[`"postcssOptions" option should throw an error with the "config" option on the invalid config: errors 1`] = `
+[
+ "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`] = `[]`;
+
+exports[`"postcssOptions" option should throw an error with the "config" option on the unresolved config: errors 1`] = `
+[
+ "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`] = `[]`;
+
+exports[`"postcssOptions" option should throw an error with the "parser" option on the unresolved parser: errors 1`] = `
+[
+ "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`] = `[]`;
+
+exports[`"postcssOptions" option should throw an error with the "plugins" option on the unresolved plugin: errors 1`] = `
+[
+ "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`] = `[]`;
+
+exports[`"postcssOptions" option should throw an error with the "stringifier" option on the unresolved stringifier: errors 1`] = `
+[
+ "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`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work "Function" value and with "Array" syntax of the "plugins" option: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work "Function" value and with "Object" syntax of the "plugins" option: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work "Function" value: warnings 1`] = `[]`;
+
+exports[`"postcssOptions" option should work and don't modify postcss options: css 1`] = `
+"a { color: black }
+
+.foo {
+ float: right;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyb20uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLElBQUksYUFBYTs7QUFFakI7RUFDRSxZQUFZO0FBQ2QiLCJmaWxlIjoidG8uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7IGNvbG9yOiBibGFjayB9XG5cbi5mb28ge1xuICBmbG9hdDogcmlnaHQ7XG59XG4iXX0= */"
+`;
+
+exports[`"postcssOptions" option should work and don't modify postcss options: errors 1`] = `[]`;
+
+exports[`"postcssOptions" option should work and don't modify postcss options: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work and provide API for the configuration: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+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`] = `[]`;
+
+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`] = `[]`;
+
+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`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options "String" value (relative path): warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options and resolve "from" and "to" options: source map 1`] = `
+{
+ "file": "style.css",
+ "mappings": "AAAA,IAAI,aAAa;;AAEjB;EACE,YAAY;AACd",
+ "names": [],
+ "sourceRoot": "",
+ "sources": [
+ "style.css",
+ ],
+ "sourcesContent": [
+ "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`] = `[]`;
+
+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:where(:not(.is-light)) { /* :root is for HTML documents */
+ --text-color: white
+ }
+ :where(html:not(.is-light)) body {
+ background: black
+ }
+}
+
+:root:where(.is-dark) { /* :root is for HTML documents */
+ --text-color: white
+ }
+
+:where(html.is-dark) body {
+ background: black
+ }"
+`;
+
+exports[`"postcssOptions" option should work with the "config" options and use plugins: errors 1`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options and use plugins: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options with "String" value (absolute path): warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options with "String" value (with path to the directory with the configuration): warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options with "String" value and respect all options: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options with "false" value: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options with "package.json" configuration: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "config" options with "true" value: warnings 1`] = `[]`;
+
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJzdHlsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJhIHtcbiAgY29sb3I6IGJsYWNrO1xufVxuXG5hIHtcbiAgY29sb3I6IHJlZDtcbn1cblxuYSB7XG4gIGNvbG9yOiBncmVlbjtcbn1cblxuYSB7XG4gIGNvbG9yOiBibHVlO1xufVxuXG4uY2xhc3Mge1xuICAteC1ib3JkZXItY29sb3I6IGJsdWUgYmx1ZSAqO1xuICAteC1jb2xvcjogKiAjZmFmYWZhO1xufVxuXG4uY2xhc3MtZm9vIHtcbiAgLXotYm9yZGVyLWNvbG9yOiBibHVlIGJsdWUgKjtcbiAgLXotY29sb3I6ICogI2ZhZmFmYTtcbn1cblxuLnBob25lIHtcbiAgJl90aXRsZSB7XG4gICAgd2lkdGg6IDUwMHB4O1xuXG4gICAgQG1lZGlhIChtYXgtd2lkdGg6IDUwMHB4KSB7XG4gICAgICB3aWR0aDogYXV0bztcbiAgICB9XG5cbiAgICBib2R5LmlzX2RhcmsgJiB7XG4gICAgICBjb2xvcjogd2hpdGU7XG4gICAgfVxuICB9XG5cbiAgaW1nIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxufVxuIl19 */"
+`;
+
+exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: errors 1`] = `[]`;
+
+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`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "parser" option with "Function" value: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "parser" option with "Object" value: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "parser" option with "String" value: warnings 1`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and not throw an error on falsy plugin: errors 1`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and not throw an error on falsy plugin: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and override the previous plugin options: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Array" value and support disabling plugins from the configuration: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Array" value, and config, and override the previous plugin options: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Array" value: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and only disabled plugins: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and override the previous plugin options: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Object" value and support disabling plugins from the configuration: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Object" value, and config, and override the previous plugin options: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with "Object" value: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with empty "Array" value: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with empty "Object" value: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with the "default" property with options: warnings 1`] = `[]`;
+
+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`] = `[]`;
+
+exports[`"postcssOptions" option should work with the "plugins" option with the "default" property without options: warnings 1`] = `[]`;
+
+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 ;
+ }
+}
+;
+
+interface PostCSSLoaderAPI {
+ mode: PostCSSLoaderContext['mode'];
+ file: PostCSSLoaderContext['resourcePath'];
+ webpackLoaderContext: PostCSSLoaderContext;
+ env: PostCSSLoaderContext['mode'];
+ options: PostCSSConfig;
+}
+
+type PostCSSLoaderOptions = PostCSSConfig | ((api: PostCSSLoaderAPI) => PostCSSConfig);
+
+const config: PostCSSLoaderOptions = function (api) {
+ return {
+ parser: 'sugarss',
+ syntax: 'sugarss',
+ map: api.mode === 'development' ? 'inline' : false,
+ from: './test/fixtures/config-autoload/ts/object/index.css',
+ to: './test/fixtures/config-autoload/ts/object/expect/index.css',
+ plugins: [
+ 'postcss-import',
+ [
+ 'postcss-nested',
+ {
+ // Options
+ }
+ ],
+ require('postcss-nested'),
+ require('postcss-nested')({ /* Options */ }),
+ ]
+ }
+};
+
+export default config;
diff --git a/test/fixtures/config-autoload/ts/array/imports/section.css b/test/fixtures/config-autoload/ts/array/imports/section.css
new file mode 100644
index 00000000..4568aa99
--- /dev/null
+++ b/test/fixtures/config-autoload/ts/array/imports/section.css
@@ -0,0 +1,3 @@
+.import {
+ color: goldenrod;
+}
diff --git a/test/fixtures/config-autoload/ts/array/index.css b/test/fixtures/config-autoload/ts/array/index.css
new file mode 100644
index 00000000..3b228825
--- /dev/null
+++ b/test/fixtures/config-autoload/ts/array/index.css
@@ -0,0 +1,5 @@
+@import 'imports/section.css';
+
+.test {
+ color: cyan;
+}
diff --git a/test/fixtures/config-autoload/ts/array/index.js b/test/fixtures/config-autoload/ts/array/index.js
new file mode 100644
index 00000000..07bf0b31
--- /dev/null
+++ b/test/fixtures/config-autoload/ts/array/index.js
@@ -0,0 +1,3 @@
+import style from './index.css'
+
+export default style
diff --git a/test/fixtures/config-autoload/ts/array/postcss.config.ts b/test/fixtures/config-autoload/ts/array/postcss.config.ts
new file mode 100644
index 00000000..29f50a96
--- /dev/null
+++ b/test/fixtures/config-autoload/ts/array/postcss.config.ts
@@ -0,0 +1,37 @@
+import type { Config as PostCSSConfig } from 'postcss-load-config';
+import type { LoaderContext } from 'webpack';
+
+type PostCSSLoaderContext = LoaderContext;
+
+interface PostCSSLoaderAPI {
+ mode: PostCSSLoaderContext['mode'];
+ file: PostCSSLoaderContext['resourcePath'];
+ webpackLoaderContext: PostCSSLoaderContext;
+ env: PostCSSLoaderContext['mode'];
+ options: PostCSSConfig;
+}
+
+type PostCSSLoaderOptions = PostCSSConfig | ((api: PostCSSLoaderAPI) => PostCSSConfig);
+
+const config: PostCSSLoaderOptions = function (api) {
+ return {
+ parser: 'sugarss',
+ syntax: 'sugarss',
+ map: api.mode === 'development' ? 'inline' : false,
+ from: './test/fixtures/config-autoload/ts/object/index.css',
+ to: './test/fixtures/config-autoload/ts/object/expect/index.css',
+ plugins: [
+ 'postcss-import',
+ [
+ 'postcss-nested',
+ {
+ // Options
+ }
+ ],
+ require('postcss-nested'),
+ require('postcss-nested')({ /* Options */ }),
+ ]
+ }
+};
+
+module.exports = config;
diff --git a/test/fixtures/config-autoload/ts/object/imports/section.css b/test/fixtures/config-autoload/ts/object/imports/section.css
new file mode 100644
index 00000000..626b1b56
--- /dev/null
+++ b/test/fixtures/config-autoload/ts/object/imports/section.css
@@ -0,0 +1,3 @@
+.import {
+ color: red;
+}
diff --git a/test/fixtures/config-autoload/ts/object/index.css b/test/fixtures/config-autoload/ts/object/index.css
new file mode 100644
index 00000000..48162650
--- /dev/null
+++ b/test/fixtures/config-autoload/ts/object/index.css
@@ -0,0 +1,5 @@
+@import "imports/section.css";
+
+.test {
+ color: blue;
+}
diff --git a/test/fixtures/config-autoload/ts/object/index.js b/test/fixtures/config-autoload/ts/object/index.js
new file mode 100644
index 00000000..07bf0b31
--- /dev/null
+++ b/test/fixtures/config-autoload/ts/object/index.js
@@ -0,0 +1,3 @@
+import style from './index.css'
+
+export default style
diff --git a/test/fixtures/config-autoload/ts/object/postcss.config.ts b/test/fixtures/config-autoload/ts/object/postcss.config.ts
new file mode 100644
index 00000000..4605a658
--- /dev/null
+++ b/test/fixtures/config-autoload/ts/object/postcss.config.ts
@@ -0,0 +1,30 @@
+import type { Config as PostCSSConfig } from 'postcss-load-config';
+import type { LoaderContext } from 'webpack';
+
+type PostCSSLoaderContext = LoaderContext;
+
+interface PostCSSLoaderAPI {
+ mode: PostCSSLoaderContext['mode'];
+ file: PostCSSLoaderContext['resourcePath'];
+ webpackLoaderContext: PostCSSLoaderContext;
+ env: PostCSSLoaderContext['mode'];
+ options: PostCSSConfig;
+}
+
+type PostCSSLoaderOptions = PostCSSConfig | ((api: PostCSSLoaderAPI) => PostCSSConfig);
+
+const config: PostCSSLoaderOptions = function (api) {
+ return {
+ parser: 'sugarss',
+ syntax: 'sugarss',
+ map: api.mode === 'development' ? 'inline' : false,
+ from: './test/fixtures/config-autoload/ts/object/index.css',
+ to: './test/fixtures/config-autoload/ts/object/expect/index.css',
+ plugins: {
+ 'postcss-import': {},
+ 'postcss-nested': {},
+ }
+ }
+};
+
+export default config;
diff --git a/test/fixtures/config-scope/all-options/postcss.config.js b/test/fixtures/config-scope/all-options/postcss.config.js
new file mode 100644
index 00000000..bf783879
--- /dev/null
+++ b/test/fixtures/config-scope/all-options/postcss.config.js
@@ -0,0 +1,14 @@
+const path = require('path');
+
+module.exports = () => ({
+ from: path.resolve(__dirname, '../../sss/style.sss'),
+ to: path.resolve(__dirname, '../../sss/style.css'),
+ parser: 'sugarss',
+ map: {
+ inline: true,
+ annotation: true,
+ },
+ plugins: [
+ ['postcss-short', { prefix: 'x' }]
+ ]
+});
diff --git a/test/fixtures/config-scope/api/postcss.config.js b/test/fixtures/config-scope/api/postcss.config.js
new file mode 100644
index 00000000..99e6fe1c
--- /dev/null
+++ b/test/fixtures/config-scope/api/postcss.config.js
@@ -0,0 +1,25 @@
+module.exports = function (api) {
+ if (!api.mode) {
+ throw new Error(`Failed, no ${api.mode} API`);
+ }
+
+ if (!api.file) {
+ throw new Error(`Failed, no ${api.file} API`);
+ }
+
+ if (!api.webpackLoaderContext) {
+ throw new Error(`Failed, no ${api.webpackLoaderContext} API`);
+ }
+
+ if (!api.env) {
+ throw new Error(`Failed, no ${api.env} API`);
+ }
+
+ if (!api.options) {
+ throw new Error(`Failed, no ${api.options} API`);
+ }
+
+ return {
+ plugins: [['postcss-short', { prefix: 'x' }]],
+ }
+};
diff --git a/test/fixtures/config-scope/config/context/plugin.js b/test/fixtures/config-scope/config/context/plugin.js
new file mode 100644
index 00000000..57609db3
--- /dev/null
+++ b/test/fixtures/config-scope/config/context/plugin.js
@@ -0,0 +1,14 @@
+const postcss = require('postcss');
+
+const customPlugin = (ctx) => (css, result) => {
+ ctx.webpack._compilation.assets['asset.txt'] = {
+ source () {
+ return '123'
+ },
+ size () {
+ return 0
+ }
+ }
+};
+
+module.exports = postcss.plugin('plugin', customPlugin);
diff --git a/test/fixtures/config-scope/config/context/postcss.config.js b/test/fixtures/config-scope/config/context/postcss.config.js
new file mode 100644
index 00000000..5499c260
--- /dev/null
+++ b/test/fixtures/config-scope/config/context/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = (ctx) => ({
+ plugins: [
+ require('./plugin')(ctx)
+ ]
+});
diff --git a/test/fixtures/config-scope/config/plugin.js b/test/fixtures/config-scope/config/plugin.js
new file mode 100644
index 00000000..b8712504
--- /dev/null
+++ b/test/fixtures/config-scope/config/plugin.js
@@ -0,0 +1,15 @@
+'use strict';
+
+const postcss = require('postcss');
+
+module.exports = postcss.plugin('plugin', (options) => {
+ options = Object.assign({ alpha: '1.0' }, options);
+
+ return (css, result) => {
+ css.walkDecls((decl) => {
+ if (decl.value === 'black') {
+ decl.value = 'rgba(0, 0, 0, ' + options.alpha + ')'
+ }
+ })
+ }
+});
diff --git a/test/fixtures/config-scope/config/postcss.config.js b/test/fixtures/config-scope/config/postcss.config.js
new file mode 100644
index 00000000..2fc48492
--- /dev/null
+++ b/test/fixtures/config-scope/config/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = () => ({
+ plugins: [
+ require('./plugin')()
+ ]
+});
diff --git a/test/fixtures/config-scope/css/custom.config.js b/test/fixtures/config-scope/css/custom.config.js
new file mode 100644
index 00000000..5f32d855
--- /dev/null
+++ b/test/fixtures/config-scope/css/custom.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: [
+ require('../config/plugin')()
+ ]
+};
+
diff --git a/test/fixtures/config-scope/css/index.js b/test/fixtures/config-scope/css/index.js
new file mode 100644
index 00000000..61e122b2
--- /dev/null
+++ b/test/fixtures/config-scope/css/index.js
@@ -0,0 +1,3 @@
+import style from './style.css'
+
+export default style
diff --git a/test/fixtures/config-scope/css/index2.js b/test/fixtures/config-scope/css/index2.js
new file mode 100644
index 00000000..9415e9b0
--- /dev/null
+++ b/test/fixtures/config-scope/css/index2.js
@@ -0,0 +1,3 @@
+import style from './style2.css'
+
+export default style
diff --git a/test/fixtures/config-scope/css/invalid.config.js b/test/fixtures/config-scope/css/invalid.config.js
new file mode 100644
index 00000000..7dd96ea6
--- /dev/null
+++ b/test/fixtures/config-scope/css/invalid.config.js
@@ -0,0 +1 @@
+throw new Error('invalid postcss config');
diff --git a/test/fixtures/config-scope/css/plugins.config.js b/test/fixtures/config-scope/css/plugins.config.js
new file mode 100644
index 00000000..fbdf6676
--- /dev/null
+++ b/test/fixtures/config-scope/css/plugins.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+ plugins: {
+ 'postcss-short': { prefix: 'x' },
+ 'postcss-import': {},
+ 'postcss-nested': {},
+ }
+};
diff --git a/test/fixtures/config-scope/css/style.css b/test/fixtures/config-scope/css/style.css
new file mode 100644
index 00000000..63eaba7f
--- /dev/null
+++ b/test/fixtures/config-scope/css/style.css
@@ -0,0 +1,5 @@
+a { color: black }
+
+.foo {
+ float: right;
+}
diff --git a/test/fixtures/config-scope/css/style2.css b/test/fixtures/config-scope/css/style2.css
new file mode 100644
index 00000000..3bab8470
--- /dev/null
+++ b/test/fixtures/config-scope/css/style2.css
@@ -0,0 +1,4 @@
+a {
+ -x-border-color: blue blue *;
+ -x-color: * #fafafa;
+}
diff --git a/test/fixtures/config-scope/from-to/postcss.config.js b/test/fixtures/config-scope/from-to/postcss.config.js
new file mode 100644
index 00000000..f61f621e
--- /dev/null
+++ b/test/fixtures/config-scope/from-to/postcss.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ from: '../../css/style.css',
+ to: '../../css/style.css',
+ map: {
+ inline: false,
+ annotation: false,
+ sourcesContent: true,
+ },
+ plugins: [
+ ['postcss-short', { prefix: 'x' }]
+ ]
+};
diff --git a/test/fixtures/config-scope/postcss.config.js b/test/fixtures/config-scope/postcss.config.js
new file mode 100644
index 00000000..3a4e2b4a
--- /dev/null
+++ b/test/fixtures/config-scope/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: [
+ require('./config/plugin')()
+ ]
+};
+
diff --git a/test/fixtures/config-scope/with-config/index.js b/test/fixtures/config-scope/with-config/index.js
new file mode 100644
index 00000000..61e122b2
--- /dev/null
+++ b/test/fixtures/config-scope/with-config/index.js
@@ -0,0 +1,3 @@
+import style from './style.css'
+
+export default style
diff --git a/test/fixtures/config-scope/with-config/postcss.config.js b/test/fixtures/config-scope/with-config/postcss.config.js
new file mode 100644
index 00000000..c1115dba
--- /dev/null
+++ b/test/fixtures/config-scope/with-config/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = function () {
+ return {
+ plugins: [['postcss-short', { prefix: 'x' }]],
+ }
+};
diff --git a/test/fixtures/config-scope/with-config/style.css b/test/fixtures/config-scope/with-config/style.css
new file mode 100644
index 00000000..56699b7c
--- /dev/null
+++ b/test/fixtures/config-scope/with-config/style.css
@@ -0,0 +1,19 @@
+a { color: black }
+
+.foo {
+ float: right;
+}
+
+.bar {
+ -x-border-color: blue blue *;
+ -x-color: * #fafafa;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root { /* :root is for HTML documents */
+ --text-color: white
+ }
+ body {
+ background: black
+ }
+}
\ No newline at end of file
diff --git a/test/fixtures/css/index.js b/test/fixtures/css/index.js
new file mode 100644
index 00000000..10eb08e3
--- /dev/null
+++ b/test/fixtures/css/index.js
@@ -0,0 +1,3 @@
+import style from './style.css';
+
+export default style;
diff --git a/test/fixtures/css/plugins.config.js b/test/fixtures/css/plugins.config.js
new file mode 100644
index 00000000..53024d6e
--- /dev/null
+++ b/test/fixtures/css/plugins.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ plugins: {
+ 'postcss-short': { prefix: 'x' },
+ }
+};
diff --git a/test/fixtures/css/style.css b/test/fixtures/css/style.css
new file mode 100644
index 00000000..09096643
--- /dev/null
+++ b/test/fixtures/css/style.css
@@ -0,0 +1,43 @@
+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;
+ }
+}
diff --git a/test/fixtures/esparser/index.mjs b/test/fixtures/esparser/index.mjs
new file mode 100644
index 00000000..5905c023
--- /dev/null
+++ b/test/fixtures/esparser/index.mjs
@@ -0,0 +1,9 @@
+function stringify() {
+ return "";
+}
+
+function parse() {
+ return "";
+}
+
+export default { stringify, parse };
diff --git a/test/fixtures/esparser/package.json b/test/fixtures/esparser/package.json
new file mode 100644
index 00000000..29a16e5d
--- /dev/null
+++ b/test/fixtures/esparser/package.json
@@ -0,0 +1,11 @@
+{
+ "type": "module",
+ "exports": {
+ ".": {
+ "require": "./index.js",
+ "import": "./index.mjs"
+ }
+ },
+ "name": "test",
+ "version": "1.0.0"
+}
diff --git a/test/fixtures/esparser/runManual.mjs b/test/fixtures/esparser/runManual.mjs
new file mode 100644
index 00000000..2fc433fd
--- /dev/null
+++ b/test/fixtures/esparser/runManual.mjs
@@ -0,0 +1,46 @@
+import webpack from 'webpack';
+import path from "path";
+
+const __dirname = path.resolve();
+const rootDir = path.resolve(__dirname, "test/helpers");
+
+const compiler = webpack({
+ target: 'node',
+ mode: "development",
+ devtool: false,
+ context: path.resolve(rootDir, "../fixtures"),
+ entry: path.resolve(rootDir, "../fixtures", "./sss/index.js"),
+ output: {
+ path: path.resolve(rootDir, "../outputs"),
+ filename: "[name].bundle.js",
+ chunkFilename: "[name].chunk.js",
+ publicPath: "/webpack/public/path/",
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(css|sss)$/i,
+ use: [
+ 'css-loader',
+ {
+ loader: path.resolve(rootDir, "../../dist"),
+ options: {
+ postcssOptions: {
+ parser: path.resolve(rootDir, "../fixtures/esparser/index.mjs"),
+ stringifier: path.resolve(rootDir, "../fixtures/esparser/index.mjs"),
+ syntax: path.resolve(rootDir, "../fixtures/esparser/index.mjs"),
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [],
+});
+
+compiler.run((error) => {
+ if (error) {
+ throw error;
+ }
+});
diff --git a/test/fixtures/jss/exec/index.js b/test/fixtures/jss/exec/index.js
new file mode 100644
index 00000000..b8ca99c8
--- /dev/null
+++ b/test/fixtures/jss/exec/index.js
@@ -0,0 +1,3 @@
+import style from './style.exec.js';
+
+export default style;
diff --git a/test/fixtures/jss/exec/style.exec.js b/test/fixtures/jss/exec/style.exec.js
new file mode 100644
index 00000000..f0175724
--- /dev/null
+++ b/test/fixtures/jss/exec/style.exec.js
@@ -0,0 +1,11 @@
+'use strict';
+
+const postcssJS = require('postcss-js');
+
+const style = {
+ a: {
+ color: 'green'
+ }
+};
+
+module.exports = postcssJS.parse(style);
diff --git a/test/fixtures/jss/postcss-js/index.js b/test/fixtures/jss/postcss-js/index.js
new file mode 100644
index 00000000..063ac9ae
--- /dev/null
+++ b/test/fixtures/jss/postcss-js/index.js
@@ -0,0 +1,3 @@
+import style from './style.js'
+
+export default style
diff --git a/test/fixtures/jss/postcss-js/style.js b/test/fixtures/jss/postcss-js/style.js
new file mode 100644
index 00000000..e7426c15
--- /dev/null
+++ b/test/fixtures/jss/postcss-js/style.js
@@ -0,0 +1 @@
+module.exports = { a: { color: 'yellow' } }
diff --git a/test/fixtures/less/index.js b/test/fixtures/less/index.js
new file mode 100644
index 00000000..1a1fbf6d
--- /dev/null
+++ b/test/fixtures/less/index.js
@@ -0,0 +1,3 @@
+import style from './style.less'
+
+export default style
diff --git a/test/fixtures/less/style.less b/test/fixtures/less/style.less
new file mode 100644
index 00000000..b83cadd7
--- /dev/null
+++ b/test/fixtures/less/style.less
@@ -0,0 +1 @@
+a { color: coral }
diff --git a/test/fixtures/package-json-files/no-postcss/package.json b/test/fixtures/package-json-files/no-postcss/package.json
new file mode 100644
index 00000000..0967ef42
--- /dev/null
+++ b/test/fixtures/package-json-files/no-postcss/package.json
@@ -0,0 +1 @@
+{}
diff --git a/test/fixtures/package-json-files/postcss-v8-in-dependencies/package.json b/test/fixtures/package-json-files/postcss-v8-in-dependencies/package.json
new file mode 100644
index 00000000..2003d907
--- /dev/null
+++ b/test/fixtures/package-json-files/postcss-v8-in-dependencies/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "postcss": "^8.0.0"
+ }
+}
diff --git a/test/fixtures/package-json-files/postcss-v8-in-devDependencies/package.json b/test/fixtures/package-json-files/postcss-v8-in-devDependencies/package.json
new file mode 100644
index 00000000..b750286e
--- /dev/null
+++ b/test/fixtures/package-json-files/postcss-v8-in-devDependencies/package.json
@@ -0,0 +1,5 @@
+{
+ "devDependencies": {
+ "postcss": "^8.0.0"
+ }
+}
diff --git a/test/fixtures/plugin/default-other-plugin.js b/test/fixtures/plugin/default-other-plugin.js
new file mode 100644
index 00000000..cfe2ea0c
--- /dev/null
+++ b/test/fixtures/plugin/default-other-plugin.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const postcss = require('postcss');
+
+module.exports = {
+ default: postcss.plugin('my-plugin', (options) => {
+ options = { alpha: '1.0', color: 'blue', ...options };
+
+ return (root, result) => {
+ root.walkDecls((decl) => {
+ if (decl.value === options.color) {
+ decl.value = 'rgba(0, 0, 255, ' + options.alpha + ')'
+ }
+ })
+ }
+ }),
+};
diff --git a/test/fixtures/plugin/new-api.plugin.js b/test/fixtures/plugin/new-api.plugin.js
new file mode 100644
index 00000000..d90b6a62
--- /dev/null
+++ b/test/fixtures/plugin/new-api.plugin.js
@@ -0,0 +1,11 @@
+module.exports = (opts = {}) => {
+ return {
+ postcssPlugin: 'postcss-new-api-plugin',
+ Declaration: {
+ width: (node) => {
+ node.value = '100px';
+ },
+ },
+ };
+};
+module.exports.postcss = true;
diff --git a/test/fixtures/plugin/other-plugin.js b/test/fixtures/plugin/other-plugin.js
new file mode 100644
index 00000000..3742fad1
--- /dev/null
+++ b/test/fixtures/plugin/other-plugin.js
@@ -0,0 +1,15 @@
+'use strict';
+
+const postcss = require('postcss');
+
+module.exports = postcss.plugin('my-plugin', (options) => {
+ options = Object.assign({ alpha: '1.0' }, options);
+
+ return (root, result) => {
+ root.walkDecls((decl) => {
+ if (decl.value === 'blue') {
+ decl.value = 'rgba(0, 0, 255, ' + options.alpha + ')'
+ }
+ })
+ }
+});
diff --git a/test/fixtures/plugin/plugin.js b/test/fixtures/plugin/plugin.js
new file mode 100644
index 00000000..de0685b7
--- /dev/null
+++ b/test/fixtures/plugin/plugin.js
@@ -0,0 +1,15 @@
+'use strict';
+
+const postcss = require('postcss');
+
+module.exports = postcss.plugin('my-plugin', (options) => {
+ const myOptions = {...{ alpha: '1.0', color: 'black' }, ...options};
+
+ return (root, result) => {
+ root.walkDecls((decl) => {
+ if (decl.value === myOptions.color) {
+ decl.value = 'rgba(0, 0, 0, ' + myOptions.alpha + ')'
+ }
+ })
+ }
+});
diff --git a/test/fixtures/scss/index.js b/test/fixtures/scss/index.js
new file mode 100644
index 00000000..9dc52bc7
--- /dev/null
+++ b/test/fixtures/scss/index.js
@@ -0,0 +1,3 @@
+import style from './style.scss'
+
+export default style
diff --git a/test/fixtures/scss/style.scss b/test/fixtures/scss/style.scss
new file mode 100644
index 00000000..b83cadd7
--- /dev/null
+++ b/test/fixtures/scss/style.scss
@@ -0,0 +1 @@
+a { color: coral }
diff --git a/test/fixtures/sss/index.js b/test/fixtures/sss/index.js
new file mode 100644
index 00000000..a2de11f7
--- /dev/null
+++ b/test/fixtures/sss/index.js
@@ -0,0 +1,3 @@
+import style from './style.sss'
+
+export default style
diff --git a/test/cases/sugar.css b/test/fixtures/sss/style.sss
similarity index 100%
rename from test/cases/sugar.css
rename to test/fixtures/sss/style.sss
diff --git a/test/helpers/astLoader.js b/test/helpers/astLoader.js
new file mode 100644
index 00000000..e41c3d7b
--- /dev/null
+++ b/test/helpers/astLoader.js
@@ -0,0 +1,46 @@
+import Module from "module";
+
+const postcss = require("postcss");
+
+const parentModule = module;
+
+function exec(code, loaderContext) {
+ const { resource, context } = loaderContext;
+
+ const module = new Module(resource, parentModule);
+
+ // eslint-disable-next-line no-underscore-dangle
+ module.paths = Module._nodeModulePaths(context);
+ module.filename = resource;
+
+ // eslint-disable-next-line no-underscore-dangle
+ module._compile(code, resource);
+
+ return module.exports;
+}
+
+module.exports = function astLoader(content) {
+ const callback = this.async();
+ const { spy = jest.fn(), execute } = this.query;
+
+ if (execute) {
+ // eslint-disable-next-line no-param-reassign
+ content = exec(content, this);
+ }
+
+ postcss()
+ .process(content)
+ .then((result) => {
+ const ast = {
+ type: "postcss",
+ version: result.processor.version,
+ root: result.root,
+ };
+
+ Object.defineProperty(ast, "root", {
+ get: spy.mockReturnValue(result.root),
+ });
+
+ callback(null, result.css, result.map, { ast });
+ });
+};
diff --git a/test/helpers/compile.js b/test/helpers/compile.js
new file mode 100644
index 00000000..a1b05e5c
--- /dev/null
+++ b/test/helpers/compile.js
@@ -0,0 +1,10 @@
+export default (compiler) =>
+ new Promise((resolve, reject) => {
+ compiler.run((error, stats) => {
+ if (error) {
+ return reject(error);
+ }
+
+ return resolve(stats);
+ });
+ });
diff --git a/test/helpers/execute.js b/test/helpers/execute.js
new file mode 100644
index 00000000..3d649a26
--- /dev/null
+++ b/test/helpers/execute.js
@@ -0,0 +1,22 @@
+import Module from "module";
+import path from "path";
+
+const parentModule = module;
+
+export default (code) => {
+ const resource = "test.js";
+ const module = new Module(resource, parentModule);
+ // eslint-disable-next-line no-underscore-dangle
+ module.paths = Module._nodeModulePaths(
+ path.resolve(__dirname, "../fixtures"),
+ );
+ module.filename = resource;
+
+ // eslint-disable-next-line no-underscore-dangle
+ module._compile(
+ `let __export__;${code};module.exports = __export__;`,
+ resource,
+ );
+
+ return module.exports;
+};
diff --git a/test/helpers/getCodeFromBundle.js b/test/helpers/getCodeFromBundle.js
new file mode 100644
index 00000000..7f228753
--- /dev/null
+++ b/test/helpers/getCodeFromBundle.js
@@ -0,0 +1,23 @@
+export default (id, stats) => {
+ const { modules } = stats.compilation;
+ const module = modules.find((m) => m.id.endsWith(id));
+ const { _source } = module;
+
+ // eslint-disable-next-line no-underscore-dangle
+ const code = (_source._value || _source._valueAsString).replace(
+ "module.exports = ",
+ "",
+ );
+
+ let result;
+
+ try {
+ result = JSON.parse(code);
+ } catch (error) {
+ result = { css: code };
+ }
+
+ const { css, map: sourceMap } = result;
+
+ return { css, sourceMap };
+};
diff --git a/test/helpers/getCompiler.js b/test/helpers/getCompiler.js
new file mode 100644
index 00000000..639c29d3
--- /dev/null
+++ b/test/helpers/getCompiler.js
@@ -0,0 +1,50 @@
+import path from "path";
+
+import webpack from "webpack";
+import { createFsFromVolume, Volume } from "memfs";
+
+export default (fixture, loaderOptions = {}, config = {}) => {
+ const fullConfig = {
+ mode: "development",
+ devtool: config.devtool || false,
+ context: path.resolve(__dirname, "../fixtures"),
+ entry: path.resolve(__dirname, "../fixtures", fixture),
+ output: {
+ path: path.resolve(__dirname, "../outputs"),
+ filename: "[name].bundle.js",
+ chunkFilename: "[name].chunk.js",
+ publicPath: "/webpack/public/path/",
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(css|sss)$/i,
+ use: [
+ {
+ loader: require.resolve("./testLoader"),
+ options: {},
+ },
+ {
+ loader: path.resolve(__dirname, "../../src"),
+ options: loaderOptions || {},
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [],
+ ...config,
+ };
+
+ const compiler = webpack(fullConfig);
+
+ if (!config.outputFileSystem) {
+ const outputFileSystem = createFsFromVolume(new Volume());
+ // Todo remove when we drop webpack@4 support
+ outputFileSystem.join = path.join.bind(path);
+
+ compiler.outputFileSystem = outputFileSystem;
+ }
+
+ return compiler;
+};
diff --git a/test/helpers/getErrors.js b/test/helpers/getErrors.js
new file mode 100644
index 00000000..ff904f0d
--- /dev/null
+++ b/test/helpers/getErrors.js
@@ -0,0 +1,4 @@
+import normalizeErrors from "./normalizeErrors";
+
+export default (stats, shortError) =>
+ normalizeErrors(stats.compilation.errors, shortError).sort();
diff --git a/test/helpers/getExecutedCode.js b/test/helpers/getExecutedCode.js
new file mode 100644
index 00000000..aa52bddc
--- /dev/null
+++ b/test/helpers/getExecutedCode.js
@@ -0,0 +1,17 @@
+import { execute, readAsset } from "./index";
+
+export default (asset, compiler, stats) => {
+ let executed = execute(readAsset(asset, compiler, stats));
+
+ if (Array.isArray(executed)) {
+ executed = executed.map((module) => {
+ // Todo remove after drop webpack@4
+ // eslint-disable-next-line no-param-reassign
+ module[0] = module[0].replace(/\?.*!/g, "?[ident]!");
+
+ return module;
+ });
+ }
+
+ return executed;
+};
diff --git a/test/helpers/getWarnings.js b/test/helpers/getWarnings.js
new file mode 100644
index 00000000..9ff959ad
--- /dev/null
+++ b/test/helpers/getWarnings.js
@@ -0,0 +1,3 @@
+import normalizeErrors from "./normalizeErrors";
+
+export default (stats) => normalizeErrors(stats.compilation.warnings).sort();
diff --git a/test/helpers/index.js b/test/helpers/index.js
new file mode 100644
index 00000000..f2303795
--- /dev/null
+++ b/test/helpers/index.js
@@ -0,0 +1,23 @@
+import compile from "./compile";
+import execute from "./execute";
+import getCompiler from "./getCompiler";
+import getErrors from "./getErrors";
+import getExecutedCode from "./getExecutedCode";
+import getCodeFromBundle from "./getCodeFromBundle";
+import getWarnings from "./getWarnings";
+import normalizeErrors from "./normalizeErrors";
+import readAsset from "./readAsset";
+import readsAssets from "./readAssets";
+
+export {
+ compile,
+ execute,
+ getCompiler,
+ getErrors,
+ getExecutedCode,
+ getCodeFromBundle,
+ getWarnings,
+ normalizeErrors,
+ readAsset,
+ readsAssets,
+};
diff --git a/test/helpers/normalizeErrors.js b/test/helpers/normalizeErrors.js
new file mode 100644
index 00000000..bbadb8bd
--- /dev/null
+++ b/test/helpers/normalizeErrors.js
@@ -0,0 +1,28 @@
+import stripAnsi from "strip-ansi";
+
+function removeCWD(str) {
+ const isWin = process.platform === "win32";
+ let cwd = process.cwd();
+
+ if (isWin) {
+ // eslint-disable-next-line no-param-reassign
+ str = str.replace(/\\/g, "/");
+ // eslint-disable-next-line no-param-reassign
+ cwd = cwd.replace(/\\/g, "/");
+ }
+
+ return stripAnsi(str)
+ .replace(/\(from .*?\)/, "(from `replaced original path`)")
+ .replace(new RegExp(cwd, "g"), "");
+}
+
+export default (errors, shortError) =>
+ errors.map((error) => {
+ let errorMessage = error.toString();
+
+ if (shortError) {
+ errorMessage = errorMessage.split("\n").slice(0, 2).join("\n");
+ }
+
+ return removeCWD(errorMessage.split("\n").slice(0, 12).join("\n"));
+ });
diff --git a/test/helpers/readAsset.js b/test/helpers/readAsset.js
new file mode 100644
index 00000000..bd1ae276
--- /dev/null
+++ b/test/helpers/readAsset.js
@@ -0,0 +1,23 @@
+import path from "path";
+
+export default (asset, compiler, stats) => {
+ const usedFs = compiler.outputFileSystem;
+ const outputPath = stats.compilation.outputOptions.path;
+
+ let data = "";
+ let targetFile = asset;
+
+ const queryStringIdx = targetFile.indexOf("?");
+
+ if (queryStringIdx >= 0) {
+ targetFile = targetFile.slice(0, queryStringIdx);
+ }
+
+ try {
+ data = usedFs.readFileSync(path.join(outputPath, targetFile)).toString();
+ } catch (error) {
+ data = error.toString();
+ }
+
+ return data;
+};
diff --git a/test/helpers/readAssets.js b/test/helpers/readAssets.js
new file mode 100644
index 00000000..15b9dca2
--- /dev/null
+++ b/test/helpers/readAssets.js
@@ -0,0 +1,11 @@
+import readAsset from "./readAsset";
+
+export default function readAssets(compiler, stats) {
+ const assets = {};
+
+ Object.keys(stats.compilation.assets).forEach((asset) => {
+ assets[asset] = readAsset(asset, compiler, stats);
+ });
+
+ return assets;
+}
diff --git a/test/helpers/testLoader.js b/test/helpers/testLoader.js
new file mode 100644
index 00000000..1f2e4ddc
--- /dev/null
+++ b/test/helpers/testLoader.js
@@ -0,0 +1,11 @@
+function testLoader(content, sourceMap) {
+ const result = { css: content };
+
+ if (sourceMap) {
+ result.map = sourceMap;
+ }
+
+ return `module.exports = ${JSON.stringify(result)}`;
+}
+
+module.exports = testLoader;
diff --git a/test/implementation.test.js b/test/implementation.test.js
new file mode 100644
index 00000000..82cab50f
--- /dev/null
+++ b/test/implementation.test.js
@@ -0,0 +1,48 @@
+import postcss from "postcss";
+
+import {
+ compile,
+ getCompiler,
+ getErrors,
+ getCodeFromBundle,
+ getWarnings,
+} from "./helpers";
+
+describe('"implementation" option', () => {
+ it("should work with implementation is string", async () => {
+ const compiler = getCompiler("./css/index.js", {
+ implementation: require.resolve("postcss"),
+ });
+ 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 error when unresolved package", async () => {
+ const compiler = getCompiler("./css/index.js", {
+ implementation: "unresolved",
+ });
+ const stats = await compile(compiler);
+
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats, true)).toMatchSnapshot("errors");
+ });
+
+ it("should work with a custom instance of PostCSS", async () => {
+ const spy = jest.fn(postcss);
+ const compiler = getCompiler("./css/index.js", {
+ // Wrap the spy so it is an instanceof Function
+ implementation: (...args) => spy(...args),
+ });
+ 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");
+ });
+});
diff --git a/test/loader.test.js b/test/loader.test.js
new file mode 100644
index 00000000..796ec27b
--- /dev/null
+++ b/test/loader.test.js
@@ -0,0 +1,332 @@
+import path from "path";
+
+import postcss from "postcss";
+
+// eslint-disable-next-line import/no-namespace
+import * as utils from "../src/utils";
+
+import {
+ compile,
+ getCompiler,
+ getErrors,
+ getCodeFromBundle,
+ getWarnings,
+} from "./helpers/index";
+
+describe("loader", () => {
+ it("should work", async () => {
+ const compiler = getCompiler("./css/index.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 throw an error on invalid syntax", async () => {
+ const compiler = getCompiler("./css/index.js", {
+ postcssOptions: {
+ hideNothingWarning: true,
+ parser: "sugarss",
+ },
+ });
+ const stats = await compile(compiler);
+
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats)).toMatchSnapshot("errors");
+ });
+
+ it('should emit warning using the "messages" API', async () => {
+ const plugin = () => (css, result) => {
+ css.walkDecls((node) => {
+ node.warn(result, "");
+ });
+ };
+
+ 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 register dependencies using the "messages" API', async () => {
+ const plugin = () => (css, result) => {
+ result.messages.push(
+ {
+ type: "build-dependency",
+ file: path.resolve(__dirname, "fixtures", "build-dep.html"),
+ content: "",
+ plugin,
+ },
+ {
+ type: "missing-dependency",
+ file: path.resolve(__dirname, "fixtures", "missing-dep.html"),
+ content: "",
+ plugin,
+ },
+ {
+ type: "context-dependency",
+ file: path.resolve(__dirname, "fixtures", "deps"),
+ content: "",
+ plugin,
+ },
+ {
+ type: "dir-dependency",
+ dir: path.resolve(__dirname, "fixtures", "deps2"),
+ content: "",
+ plugin,
+ },
+ );
+ };
+
+ const postcssPlugin = postcss.plugin("postcss-plugin", plugin);
+ const compiler = getCompiler("./css/index.js", {
+ postcssOptions: {
+ plugins: [postcssPlugin()],
+ },
+ });
+
+ const stats = await compile(compiler);
+ const { contextDependencies, missingDependencies, buildDependencies } =
+ stats.compilation;
+
+ expect(contextDependencies).toContain(
+ path.resolve(__dirname, "fixtures", "deps"),
+ );
+ expect(contextDependencies).toContain(
+ path.resolve(__dirname, "fixtures", "deps2"),
+ );
+ expect(missingDependencies).toContain(
+ path.resolve(__dirname, "fixtures", "missing-dep.html"),
+ );
+ expect(buildDependencies).toContain(
+ path.resolve(__dirname, "fixtures", "build-dep.html"),
+ );
+
+ 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");
+ });
+});
+
+describe("check postcss versions to avoid using PostCSS 7", () => {
+ it("should emit a warning if postcss version is not explicitly specified when the loader is failed", async () => {
+ const spy = jest
+ .spyOn(utils, "findPackageJSONDir")
+ .mockReturnValue(
+ path.resolve(__dirname, "./fixtures/package-json-files/no-postcss"),
+ );
+
+ const compiler = getCompiler("./css/index.js", {
+ implementation: (...args) => {
+ const result = postcss(...args);
+
+ result.version = "7.0.0";
+ result.process = () =>
+ Promise.reject(new Error("Something went wrong."));
+
+ return result;
+ },
+ });
+ const stats = await compile(compiler);
+
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats, true)).toMatchSnapshot("errors");
+
+ spy.mockRestore();
+ });
+
+ it("should not show a warning if 'postcss' version is explicitly defined in 'dependencies'", async () => {
+ const spy = jest
+ .spyOn(utils, "findPackageJSONDir")
+ .mockReturnValue(
+ path.resolve(
+ __dirname,
+ "./fixtures/package-json-files/postcss-v8-in-dependencies",
+ ),
+ );
+
+ const compiler = getCompiler("./css/index.js", {
+ implementation: (...args) => {
+ const result = postcss(...args);
+
+ result.version = "7.0.0";
+ result.process = () =>
+ Promise.reject(new Error("Something went wrong."));
+
+ return result;
+ },
+ });
+ const stats = await compile(compiler);
+
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats, true)).toMatchSnapshot("errors");
+
+ spy.mockRestore();
+ });
+
+ it("should not show a warning if 'postcss' version is explicitly defined in 'devDependencies'", async () => {
+ const spy = jest
+ .spyOn(utils, "findPackageJSONDir")
+ .mockReturnValue(
+ path.resolve(
+ __dirname,
+ "./fixtures/package-json-files/postcss-v8-in-devDependencies",
+ ),
+ );
+
+ const compiler = getCompiler("./css/index.js", {
+ implementation: (...args) => {
+ const result = postcss(...args);
+
+ result.version = "7.0.0";
+ result.process = () =>
+ Promise.reject(new Error("Something went wrong."));
+
+ return result;
+ },
+ });
+ const stats = await compile(compiler);
+
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats, true)).toMatchSnapshot("errors");
+
+ spy.mockRestore();
+ });
+
+ it("should not show a warning if 'package.json' file was not found", async () => {
+ const spy = jest
+ .spyOn(utils, "findPackageJSONDir")
+ .mockReturnValue(
+ path.resolve(__dirname, "./fixtures/package-json-files/unknown"),
+ );
+
+ const compiler = getCompiler("./css/index.js", {
+ implementation: (...args) => {
+ const result = postcss(...args);
+
+ result.version = "7.0.0";
+ result.process = () =>
+ Promise.reject(new Error("Something went wrong."));
+
+ return result;
+ },
+ });
+ const stats = await compile(compiler);
+
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats, true)).toMatchSnapshot("errors");
+
+ spy.mockRestore();
+ });
+
+ it("should work when 'processor' throw an error", async () => {
+ const spy = jest
+ .spyOn(utils, "findPackageJSONDir")
+ .mockReturnValue(
+ path.resolve(__dirname, "./fixtures/package-json-files/no-postcss"),
+ );
+
+ const compiler = getCompiler("./css/index.js", {
+ implementation: () => {
+ throw new Error("Error in implementation");
+ },
+ });
+ const stats = await compile(compiler);
+
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats, true)).toMatchSnapshot("errors");
+
+ spy.mockRestore();
+ });
+});
diff --git a/test/plugins/blue.js b/test/plugins/blue.js
deleted file mode 100644
index cb695eb6..00000000
--- a/test/plugins/blue.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = function (css) {
- css.walkDecls(function (decl) {
- if ( decl.value === 'black' ) decl.value = 'blue';
- });
-};
diff --git a/test/plugins/red.js b/test/plugins/red.js
deleted file mode 100644
index e1396f7d..00000000
--- a/test/plugins/red.js
+++ /dev/null
@@ -1,20 +0,0 @@
-var warning = false;
-
-module.exports = function (options) {
- var alpha = options.alpha || '1.0';
-
- return {
- postcss: function (css, result) {
- if (!warning) {
- result.warn('Test red warning');
- warning = true;
- }
-
- css.walkDecls(function (decl) {
- if (decl.value === 'blue') {
- decl.value = 'rgba(255, 0, 0, ' + alpha + ')';
- }
- });
- }
- };
-};
diff --git a/test/postcss.config.js b/test/postcss.config.js
deleted file mode 100644
index 9c6063ba..00000000
--- a/test/postcss.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
- plugins: [
- require('./plugins/blue')
- ]
-};
diff --git a/test/postcssOptions.test.js b/test/postcssOptions.test.js
new file mode 100644
index 00000000..08cff4f1
--- /dev/null
+++ b/test/postcssOptions.test.js
@@ -0,0 +1,890 @@
+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");
+ });
+
+ // TODO jest have not good support for ES modules for testing it, tested manually
+ it.skip('should work with the "parser" option with "Object" value with ESM', async () => {
+ const compiler = getCompiler("./sss/index.js", {
+ postcssOptions: {
+ parser: path.resolve(__dirname, "../fixtures/esparser/index.mjs"),
+ },
+ });
+ 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");
+ });
+
+ // TODO jest have not good support for ES modules for testing it, tested manually
+ it.skip('should work with the "stringifier" option with "Object" value with ESM', async () => {
+ const compiler = getCompiler("./sss/index.js", {
+ postcssOptions: {
+ stringifier: path.resolve(__dirname, "../fixtures/esparser/index.mjs"),
+ },
+ });
+ 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");
+ });
+
+ // TODO jest have not good support for ES modules for testing it, tested manually
+ it.skip('should work with the "syntax" option with "Object" value with ESM', async () => {
+ const compiler = getCompiler("./sss/index.js", {
+ postcssOptions: {
+ syntax: path.resolve(__dirname, "../fixtures/esparser/index.mjs"),
+ },
+ });
+ 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).map((item) =>
+ item
+ .replace("property 'parse'", "properties")
+ .replace(/undefined$/, "undefined (reading 'parse')"),
+ ),
+ ).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");
+ });
+
+ it("should work and don't modify postcss options", async () => {
+ const postcssOptions = {
+ config: path.resolve(__dirname, "./fixtures/css/plugins.config.js"),
+ from: "from.css",
+ map: {
+ inline: true,
+ },
+ parser: "postcss/lib/parse",
+ stringifier: "postcss/lib/stringify",
+ to: "to.css",
+ plugins: [require.resolve("./fixtures/plugin/new-api.plugin")],
+ };
+ const compiler = getCompiler(
+ "./config-scope/css/index.js",
+ {
+ postcssOptions,
+ },
+ {
+ devtool: "source-map",
+ },
+ );
+ const stats = await compile(compiler);
+ const codeFromBundle = getCodeFromBundle("style.css", stats);
+
+ expect(postcssOptions).toEqual({
+ config: path.resolve(__dirname, "./fixtures/css/plugins.config.js"),
+ from: "from.css",
+ map: {
+ inline: true,
+ },
+ parser: "postcss/lib/parse",
+ stringifier: "postcss/lib/stringify",
+ to: "to.css",
+ plugins: [require.resolve("./fixtures/plugin/new-api.plugin")],
+ });
+ expect(codeFromBundle.css).toMatchSnapshot("css");
+ expect(getWarnings(stats)).toMatchSnapshot("warnings");
+ expect(getErrors(stats)).toMatchSnapshot("errors");
+ });
+});
diff --git a/test/sourceMap.test.js b/test/sourceMap.test.js
new file mode 100644
index 00000000..ea4e06ff
--- /dev/null
+++ b/test/sourceMap.test.js
@@ -0,0 +1,500 @@
+/**
+ * @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");
+ });
+});
diff --git a/test/test-custom-parser.js b/test/test-custom-parser.js
deleted file mode 100644
index 543eeb16..00000000
--- a/test/test-custom-parser.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var expect = require('chai').expect;
-
-describe('custom parser', function () {
-
- it('processes sugarss', function () {
- var css = require('!raw-loader!../!' +
- './cases/sugar.css');
- expect(css).to.eql('a\n color: rgba(255, 0, 0, 0.1)\n');
- });
-
-});
diff --git a/test/test-default.js b/test/test-default.js
deleted file mode 100644
index cdac0546..00000000
--- a/test/test-default.js
+++ /dev/null
@@ -1,53 +0,0 @@
-var expect = require('chai').expect;
-
-describe('default', function () {
-
- it('processes CSS with default plugins', function () {
- var css = require('!raw-loader!../!./cases/style.css');
- expect(css).to.eql('a { color: blue }\n');
- });
-
- it('overrides default config by subdir config', function () {
- var css = require('!raw-loader!../!./cases/config/style.css');
- expect(css).to.eql('a { color: black }\n');
- });
-
- it('send webpack instance to config', function () {
- var css = require('!raw-loader!../!./cases/env/style.css');
- expect(css).to.eql('a::before { content: "style.css" }\n');
- });
-
- it('processes CSS in safe mode', function () {
- var css = require('!raw-loader!' +
- '../?parser=postcss-safe-parser!' +
- './cases/broken.css');
- expect(css).to.eql('a { color:\n}');
- });
-
- it('lets other plugins alter the used plugins', function () {
- var css = require('!raw-loader!../?rewrite=true!' +
- './cases/style.css');
- expect(css).to.eql('a { color: black }\n');
- });
-
- it('processes CSS-in-JS', function () {
- var css = require('!raw-loader!' +
- '../?parser=postcss-js!' +
- './cases/style.js');
- expect(css).to.eql('a {\n color: blue\n}');
- });
-
- it('processes CSS with exec', function () {
- var css = require('!raw-loader!' +
- '../?exec!' +
- './cases/exec.js');
- expect(css).to.eql('a {\n color: green\n}');
- });
-
- it('inlines map', function () {
- var css = require('!raw-loader!../?sourceMap=inline!' +
- './cases/style.css');
- expect(css).to.include('/*# sourceMappingURL=');
- });
-
-});
diff --git a/test/test-explicit-plugins.js b/test/test-explicit-plugins.js
deleted file mode 100644
index 8a3aae95..00000000
--- a/test/test-explicit-plugins.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var expect = require('chai').expect;
-
-describe('explicit plugins', function () {
-
- it('processes CSS with custom plugins', function () {
- var css = require('!raw-loader!../!' +
- './cases/style.css');
- expect(css).to.eql('a { color: rgba(255, 0, 0, 0.1) }\n');
- });
-
-});
diff --git a/test/test-incorrect-using-packs.js b/test/test-incorrect-using-packs.js
deleted file mode 100644
index 4a6644f5..00000000
--- a/test/test-incorrect-using-packs.js
+++ /dev/null
@@ -1,16 +0,0 @@
-var expect = require('chai').expect;
-
-describe('incorrect using packs', function () {
-
- it('fails to load specific pack', function () {
- var error;
- try {
- require('!raw-loader!../?pack=blues!' +
- './cases/style.css');
- } catch (err) {
- error = err;
- }
- expect(error.message).to.match(/find module/);
- });
-
-});
diff --git a/test/test-with-packs.js b/test/test-with-packs.js
deleted file mode 100644
index 2377ba84..00000000
--- a/test/test-with-packs.js
+++ /dev/null
@@ -1,17 +0,0 @@
-var expect = require('chai').expect;
-
-describe('with packs', function () {
-
- it('processes CSS with default plugins', function () {
- var css = require('!raw-loader!../!' +
- './cases/style.css');
- expect(css).to.eql('a { color: rgba(255, 0, 0, 0.1) }\n');
- });
-
- it('processes CSS with custom plugins', function () {
- var css = require('!raw-loader!../?pack=blues!' +
- './cases/style.css');
- expect(css).to.eql('a { color: blue }\n');
- });
-
-});
diff --git a/test/validate-options.test.js b/test/validate-options.test.js
new file mode 100644
index 00000000..e39232b2
--- /dev/null
+++ b/test/validate-options.test.js
@@ -0,0 +1,136 @@
+/* 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"), "postcss"],
+ failure: [1, /test/, [], {}],
+ },
+ };
+
+ 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);
+ }
+ }
+ }
+});
diff --git a/test/webpack-custom-parser.config.js b/test/webpack-custom-parser.config.js
deleted file mode 100644
index 6bcacc2b..00000000
--- a/test/webpack-custom-parser.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-var path = require('path');
-var sugarss = require('sugarss');
-
-var blue = require('./plugins/blue');
-var red = require('./plugins/red');
-var RewritePlugin = require('./webpack-plugins/rewrite.js');
-
-module.exports = {
- target: 'node',
- context: __dirname,
- entry: './test-custom-parser.js',
- output: {
- path: path.join(__dirname, '..', 'build')
- },
- postcss: function () {
- return {
- syntax: sugarss,
- plugins: [blue, red({ alpha: 0.1 })]
- };
- },
- plugins: [
- new RewritePlugin()
- ]
-};
diff --git a/test/webpack-default.config.js b/test/webpack-default.config.js
deleted file mode 100644
index 3cb7d5af..00000000
--- a/test/webpack-default.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var path = require('path');
-
-var RewritePlugin = require('./webpack-plugins/rewrite.js');
-
-module.exports = {
- target: 'node',
- context: __dirname,
- entry: './test-default.js',
- output: {
- path: path.join(__dirname, '..', 'build')
- },
- plugins: [
- new RewritePlugin()
- ]
-};
diff --git a/test/webpack-explicit-plugins.config.js b/test/webpack-explicit-plugins.config.js
deleted file mode 100644
index 9a893971..00000000
--- a/test/webpack-explicit-plugins.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-var path = require('path');
-
-var blue = require('./plugins/blue');
-var red = require('./plugins/red');
-var RewritePlugin = require('./webpack-plugins/rewrite.js');
-
-module.exports = {
- target: 'node',
- context: __dirname,
- entry: './test-explicit-plugins.js',
- output: {
- path: path.join(__dirname, '..', 'build')
- },
- postcss: function () {
- return [blue, red({ alpha: 0.1 })];
- },
- plugins: [
- new RewritePlugin()
- ]
-};
diff --git a/test/webpack-incorrect-using-packs.config.js b/test/webpack-incorrect-using-packs.config.js
deleted file mode 100644
index e81cabb1..00000000
--- a/test/webpack-incorrect-using-packs.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var path = require('path');
-
-var RewritePlugin = require('./webpack-plugins/rewrite.js');
-
-module.exports = {
- target: 'node',
- context: __dirname,
- entry: './test-incorrect-using-packs.js',
- output: {
- path: path.join(__dirname, '..', 'build')
- },
- plugins: [
- new RewritePlugin()
- ]
-};
diff --git a/test/webpack-plugins/rewrite.js b/test/webpack-plugins/rewrite.js
deleted file mode 100644
index 7fd02108..00000000
--- a/test/webpack-plugins/rewrite.js
+++ /dev/null
@@ -1,21 +0,0 @@
-function RewritePlugin() {
-
-}
-
-RewritePlugin.prototype.apply = function (compiler) {
- function rewrite(postcssPlugins, loaderParams) {
- // Just for the demo and test we remove all plugins if
- // the 'rewrite' parameter is set
- if (loaderParams.rewrite) {
- return [];
- }
- // If the rewrite parameter isn't set we don't change the modules
- return postcssPlugins;
- }
-
- compiler.plugin('compilation', function (compilation) {
- compilation.plugin('postcss-loader-before-processing', rewrite);
- });
-};
-
-module.exports = RewritePlugin;
diff --git a/test/webpack-with-packs.config.js b/test/webpack-with-packs.config.js
deleted file mode 100644
index 9fb8f2bf..00000000
--- a/test/webpack-with-packs.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-var path = require('path');
-
-var blue = require('./plugins/blue');
-var red = require('./plugins/red');
-var RewritePlugin = require('./webpack-plugins/rewrite.js');
-
-module.exports = {
- target: 'node',
- context: __dirname,
- entry: './test-with-packs.js',
- output: {
- path: path.join(__dirname, '..', 'build')
- },
- postcss: function () {
- return {
- defaults: [blue, red({ alpha: 0.1 })],
- blues: [blue]
- };
- },
- plugins: [
- new RewritePlugin()
- ]
-};