diff --git a/README.md b/README.md index 41bd3ee0..571aa425 100644 --- a/README.md +++ b/README.md @@ -400,6 +400,8 @@ module.exports = (api) => { // `api.file` - path to the file // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/ // `api.webpackLoaderContext` - loader context for complex use cases + // `api.env` - alias `api.mode` for compatibility with `postcss-cli` + // `api.options` - the `postcssOptions` options if (/\.sss$/.test(api.file)) { return { diff --git a/src/index.js b/src/index.js index 1b155834..74d89d79 100644 --- a/src/index.js +++ b/src/index.js @@ -50,7 +50,11 @@ export default async function loader(content, sourceMap, meta) { if (configOption) { try { - loadedConfig = await loadConfig(this, configOption); + loadedConfig = await loadConfig( + this, + configOption, + options.postcssOptions + ); } catch (error) { callback(error); diff --git a/src/utils.js b/src/utils.js index aa07c750..cc971527 100644 --- a/src/utils.js +++ b/src/utils.js @@ -31,7 +31,7 @@ function exec(code, loaderContext) { return module.exports; } -async function loadConfig(loaderContext, config) { +async function loadConfig(loaderContext, config, postcssOptions) { const searchPath = typeof config === 'string' ? path.resolve(config) @@ -75,6 +75,9 @@ async function loadConfig(loaderContext, config) { file: loaderContext.resourcePath, // For complex use webpackLoaderContext: loaderContext, + // Partial compatibility with `postcss-cli` + env: loaderContext.mode, + options: postcssOptions || {}, }; result.config = result.config(api); diff --git a/test/__snapshots__/postcssOptins.test.js.snap b/test/__snapshots__/postcssOptins.test.js.snap index ed8e3973..183552f0 100644 --- a/test/__snapshots__/postcssOptins.test.js.snap +++ b/test/__snapshots__/postcssOptins.test.js.snap @@ -213,6 +213,59 @@ exports[`"postcssOptions" option should work "Function" value: errors 1`] = `Arr exports[`"postcssOptions" option should work "Function" value: warnings 1`] = `Array []`; +exports[`"postcssOptions" option should work and provide API for the configuration: css 1`] = ` +"a { + color: black; +} + +a { + color: red; +} + +a { + color: green; +} + +a { + color: blue; +} + +.class { + border-top-color: blue; + border-right-color: blue; + border-left-color: blue; + background-color: #fafafa; +} + +.class-foo { + -z-border-color: blue blue *; + -z-color: * #fafafa; +} + +.phone { + &_title { + width: 500px; + + @media (max-width: 500px) { + width: auto; + } + + body.is_dark & { + color: white; + } + } + + img { + display: block; + } +} +" +`; + +exports[`"postcssOptions" option should work and provide API for the configuration: errors 1`] = `Array []`; + +exports[`"postcssOptions" option should work and provide API for the configuration: warnings 1`] = `Array []`; + exports[`"postcssOptions" option should work with "from", "to" and "map" options (absolute paths): css 1`] = ` "a { color: black; 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/postcssOptins.test.js b/test/postcssOptins.test.js index 8b0a604c..456e6b3c 100644 --- a/test/postcssOptins.test.js +++ b/test/postcssOptins.test.js @@ -776,4 +776,22 @@ describe('"postcssOptions" option', () => { 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'); + }); });