diff --git a/README.md b/README.md index 3ce8a671..8b2ae681 100644 --- a/README.md +++ b/README.md @@ -1,126 +1,134 @@ -[![npm][npm]][npm-url] -[![node][node]][node-url] -[![deps][deps]][deps-url] -[![tests][tests]][tests-url] -[![coverage][cover]][cover-url] -[![chat][chat]][chat-url] -
- PostCSS Logo -
- Sponsored by Evil Martians + Sponsored by Evil Martians
-

PostCSS Loader

-

Loader for webpack to process CSS with PostCSS

-

Install

+[![npm][npm]][npm-url] +[![node][node]][node-url] +[![deps][deps]][deps-url] +[![tests][tests]][tests-url] +[![coverage][cover]][cover-url] +[![chat][chat]][chat-url] +[![chat-postcss][chat-postcss]][chat-postcss-url] +[![size][size]][size-url] -```bash -npm i -D postcss-loader postcss -``` +# postcss-loader -

Usage

+Loader to process CSS with [`postcss`](https://github.com/postcss/postcss). -### `Configuration` +## Getting Started -**`postcss.config.js`** +To begin, you'll need to install `postcss-loader` and `postcss`: -```js -module.exports = { - parser: 'sugarss', - plugins: { - 'postcss-import': {}, - 'postcss-preset-env': {}, - cssnano: {}, - }, -}; +```console +npm install --save-dev postcss-loader postcss ``` -You can read more about common PostCSS Config [here](https://github.com/michael-ciniawsky/postcss-load-config). +Then add the plugin to your `webpack` config. For example: -### `Config Cascade` +**file.js** -You can use different `postcss.config.js` files in different directories. -Config lookup starts from `path.dirname(file)` and walks the file tree upwards until a config file is found. - -``` -|– components -| |– component -| | |– index.js -| | |– index.png -| | |– style.css (1) -| | |– postcss.config.js (1) -| |– component -| | |– index.js -| | |– image.png -| | |– style.css (2) -| -|– postcss.config.js (1 && 2 (recommended)) -|– webpack.config.js -| -|– package.json +```js +import css from 'file.css'; ``` -After setting up your `postcss.config.js`, add `postcss-loader` to your `webpack.config.js`. -You can use it standalone or in conjunction with `css-loader` (recommended). -Use it **before** `css-loader` and `style-loader`, but **after** other preprocessor loaders like e.g `sass|less|stylus-loader`, if you use any (since [webpack loaders evaluate right to left/bottom to top](https://webpack.js.org/concepts/loaders/#configuration)). - -**`webpack.config.js`** +**webpack.config.js** ```js module.exports = { module: { rules: [ { - test: /\.css$/, - use: ['style-loader', 'postcss-loader'], + test: /\.css$/i, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-present-env', + { + // Options + }, + ], + }, + }, + }, + ], }, ], }, }; ``` -> ⚠️ When `postcss-loader` is used standalone (without `css-loader`) don't use `@import` in your CSS, since this can lead to quite bloated bundles +Alternative use with [config files](#config): -**`webpack.config.js` (recommended)** +**postcss.config.js** + +```js +module.exports = { + plugins: [ + [ + 'postcss-preset-env', + { + // Options + }, + ], + ], +}; +``` + +The loader **automatically** searches for configuration files. + +**webpack.config.js** ```js module.exports = { module: { rules: [ { - test: /\.css$/, - use: [ - 'style-loader', - { loader: 'css-loader', options: { importLoaders: 1 } }, - 'postcss-loader', - ], + test: /\.css$/i, + use: ['style-loader', 'css-loader', 'postcss-loader'], }, ], }, }; ``` -

Options

+And run `webpack` via your preferred method. + +## Options -| Name | Type | Default | Description | -| :---------------------------------: | :-------------------------: | :-----------------------------------: | :---------------------------------------------- | -| [`exec`](#exec) | `{Boolean}` | `undefined` | Enable PostCSS Parser support in `CSS-in-JS` | -| [`config`](#config) | `{String\|Object\|Boolean}` | `undefined` | Set `postcss.config.js` config path && `ctx` | -| [`postcssOptions`](#postcssOptions) | `{Object}` | `defaults values for Postcss.process` | Set Postcss.process options and postcss plugins | -| [`sourceMap`](#sourcemap) | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps | +| Name | Type | Default | Description | +| :---------------------------------: | :------------------: | :-----------------------------------: | :------------------------------------------- | +| [`exec`](#exec) | `{Boolean}` | `undefined` | Enable PostCSS Parser support in `CSS-in-JS` | +| [`postcssOptions`](#postcssOptions) | `{Object\/Function}` | `defaults values for Postcss.process` | Set `postcss` options and plugins | +| [`sourceMap`](#sourcemap) | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps | -### `Exec` +### `exec` Type: `Boolean` Default: `undefined` @@ -137,7 +145,10 @@ module.exports = { test: /\.style.js$/, use: [ 'style-loader', - { loader: 'css-loader', options: { importLoaders: 1 } }, + { + loader: 'css-loader', + options: { importLoaders: 1 }, + }, { loader: 'postcss-loader', options: { @@ -154,29 +165,34 @@ module.exports = { }; ``` -### `Config` - -Type: `Boolean|String|Object` -Default: `undefined` +### `postcssOptions` -Options specified in the config file are combined with options passed to the loader. -Loader options overwrite options from config. +| Name | Type | Default | Description | +| :---------------------------: | :-------------------------------------------: | :---------: | :----------------------------- | +| [`config`](#config) | `{Function\|Object\|Array}` | `[]` | Set PostCSS Plugins | +| [`plugins`](#plugins) | `{Function\|Object\|Array}` | `[]` | Set PostCSS Plugins | +| [`parser`](#parser) | `{String\|Object\|Function}` | `undefined` | Set custom PostCSS Parser | +| [`syntax`](#syntax) | `{String\|Object}` | `undefined` | Set custom PostCSS Syntax | +| [`stringifier`](#stringifier) | `{String\|Object\|Function}` | `undefined` | Set custom PostCSS Stringifier | -#### Boolean +Type: `Object|Function` +Default: `undefined` -Enables/Disables autoloading config. +Allows to set `postcss options`(http://api.postcss.org/global.html#processOptions) and plugins. -**webpack.config.js** +#### `Object` ```js module.exports = { module: { rules: [ { - test: /\.css$/i, + test: /\.sss$/i, loader: 'postcss-loader', options: { - config: false, + postcssOptions: { + parser: require('sugarss'), + }, }, }, ], @@ -184,21 +200,19 @@ module.exports = { }; ``` -#### String - -Allows to specify the absolute path to the config file. - -**webpack.config.js** +#### `Function` ```js module.exports = { module: { rules: [ { - test: /\.css$/i, + test: /\.sss$/i, loader: 'postcss-loader', options: { - config: path.resolve(__dirname, 'custom.config.js'), + postcssOptions: (loaderContext) => ({ + parser: require('sugarss'), + }), }, }, ], @@ -206,73 +220,100 @@ module.exports = { }; ``` -#### Object +#### `config` -| Name | Type | Default | Description | -| :-----------------------: | :--------: | :---------: | :----------------------- | -| [`path`](#path) | `{String}` | `undefined` | PostCSS Config Directory | -| [`context`](#context-ctx) | `{Object}` | `undefined` | PostCSS Config Context | +Type: `Boolean|String` +Default: `undefined` -##### `Path` +Allows to set options using config files. +Options specified in the config file are combined with options passed to the loader, the loader options overwrite options from config. -Type: `String` -Default: `undefined` +##### Config Files -You can manually specify the path to search for your config (`postcss.config.js`) with the `config.path` option. This is needed if you store your config in a separate e.g `./config || ./.config` folder. +The loader will search up the directory tree for configuration in the following places: -> ⚠️ Otherwise it is **unnecessary** to set this option and is **not** recommended +- a `postcss` property in `package.json` +- a `.postcssrc` file in JSON or YAML format +- a `.postcss.json`, `.postcss.yaml`, `.postcss.yml`, `.postcss.js`, or `.postcss.cjs` file +- a `postcss.config.js` or `postcss.config.cjs` CommonJS module exporting an object (**recommended**) -> ⚠️ Note that you **can't** use a **filename** other than the [supported config formats] (e.g `.postcssrc.js`, `postcss.config.js`), this option only allows you to manually specify the **directory** where config lookup should **start** from +##### Config Cascade -**webpack.config.js** +You can use different `postcss.config.js` files in different directories. +Config lookup starts from `path.dirname(file)` and walks the file tree upwards until a config file is found. + +``` +|– components +| |– component +| | |– index.js +| | |– index.png +| | |– style.css (1) +| | |– postcss.config.js (1) +| |– component +| | |– index.js +| | |– image.png +| | |– style.css (2) +| +|– postcss.config.js (1 && 2 (recommended)) +|– webpack.config.js +| +|– package.json +``` + +After setting up your `postcss.config.js`, add `postcss-loader` to your `webpack.config.js`. +You can use it standalone or in conjunction with `css-loader` (recommended). +Use it **before** `css-loader` and `style-loader`, but **after** other preprocessor loaders like e.g `sass|less|stylus-loader`, if you use any (since [webpack loaders evaluate right to left/bottom to top](https://webpack.js.org/concepts/loaders/#configuration)). + +**`webpack.config.js` (recommended)** ```js module.exports = { module: { rules: [ { - test: /\.css$/i, - loader: 'postcss-loader', - options: { - config: { - path: 'path/to/.config/', // ✅ - path: 'path/to/.config/css.config.js', // ❌ + test: /\.css$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + importLoaders: 1, + }, }, - }, + 'postcss-loader', + ], }, ], }, }; ``` -[supported config formats]: https://github.com/michael-ciniawsky/postcss-load-config#usage - -##### `Context (ctx)` - -Type: `Object` -Default: `undefined` - -| Name | Type | Default | Description | -| :-------: | :--------: | :-------------------: | :------------------------------- | -| `env` | `{String}` | `'development'` | `process.env.NODE_ENV` | -| `file` | `{Object}` | `loader.resourcePath` | `extname`, `dirname`, `basename` | -| `options` | `{Object}` | `{}` | Options | +#### Boolean -`postcss-loader` exposes context `ctx` to the config file, making your `postcss.config.js` dynamic, so can use it to do some real magic ✨ +Enables/Disables autoloading config. -**`postcss.config.js`** +**webpack.config.js** ```js -module.exports = ({ file, options, env }) => ({ - parser: file.extname === '.sss' ? 'sugarss' : false, - plugins: [ - // Plugins with options and without - ['postcss-import', { root: file.dirname }], - 'postcss-preset-env', - ], -}); +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + loader: 'postcss-loader', + options: { + config: false, + }, + }, + ], + }, +}; ``` +#### String + +Allows to specify the absolute path to the config file. + **webpack.config.js** ```js @@ -283,12 +324,7 @@ module.exports = { test: /\.css$/i, loader: 'postcss-loader', options: { - config: { - ctx: { - 'postcss-preset-env': { ...options }, - cssnano: { ...options }, - }, - }, + config: path.resolve(__dirname, 'custom.config.js'), }, }, ], @@ -296,15 +332,6 @@ module.exports = { }; ``` -### `postcssOptions` - -| Name | Type | Default | Description | -| :---------------------------: | :-------------------------------------------: | :---------: | :----------------------------- | -| [`plugins`](#plugins) | `{Function\|Object\|Array}` | `[]` | Set PostCSS Plugins | -| [`parser`](#parser) | `{String\|Object\|Function}` | `undefined` | Set custom PostCSS Parser | -| [`syntax`](#syntax) | `{String\|Object}` | `undefined` | Set custom PostCSS Syntax | -| [`stringifier`](#stringifier) | `{String\|Object\|Function}` | `undefined` | Set custom PostCSS Stringifier | - #### `Plugins` Type: `Function|Object|Array` @@ -407,6 +434,8 @@ module.exports = { It is possible to disable the plugin specified in the config. +> ⚠️ The method below for specifying plugins is deprecated. + **`postcss.config.js`** ```js @@ -647,12 +676,13 @@ module.exports = { }; ``` -### `SourceMap` +### `sourceMap` Type: `Boolean` Default: depends on the `compiler.devtool` value -By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option. All values enable source map generation except `eval` and `false` value. +By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option. +All values enable source map generation except `eval` and `false` value. **webpack.config.js** @@ -674,9 +704,34 @@ module.exports = { }; ``` -

Examples

+Alternative setup: + +**webpack.config.js** + +```js +module.exports = { + devtool: 'source-map', + module: { + rules: [ + { + test: /\.css$/i, + use: [ + { loader: 'style-loader' }, + { loader: 'css-loader' }, + { loader: 'postcss-loader' }, + { loader: 'sass-loader' }, + ], + }, + ], + }, +}; +``` + +## Examples -### `Stylelint` +### Autoprefixer + +Add vendor prefixes to CSS rules using [`autoprefixer`](https://github.com/postcss/autoprefixer). **webpack.config.js** @@ -688,12 +743,22 @@ module.exports = { test: /\.css$/i, use: [ 'style-loader', - 'css-loader', + { + loader: 'css-loader', + options: { importLoaders: 1 }, + }, { loader: 'postcss-loader', options: { postcssOptions: { - plugins: ['postcss-import', 'stylelint'], + plugins: [ + [ + 'autoprefixer', + { + // Options + }, + ], + ], }, }, }, @@ -704,7 +769,9 @@ module.exports = { }; ``` -### `Autoprefixing` +> :warning: [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) includes [`autoprefixer`](https://github.com/postcss/autoprefixer), so adding it separately is not necessary if you already use the preset. More [information](https://github.com/csstools/postcss-preset-env#autoprefixer) + +### PostCSS Preset Env **webpack.config.js** @@ -716,12 +783,22 @@ module.exports = { test: /\.css$/i, use: [ 'style-loader', - 'css-loader', + { + loader: 'css-loader', + options: { importLoaders: 1 }, + }, { loader: 'postcss-loader', options: { postcssOptions: { - plugins: [['autoprefixer', { ...options }]], + plugins: [ + [ + 'postcss-preset-env', + { + // Options + }, + ], + ], }, }, }, @@ -732,13 +809,12 @@ module.exports = { }; ``` -> :warning: [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) includes [`autoprefixer`](https://github.com/postcss/autoprefixer), so adding it separately is not necessary if you already use the preset. +### CSS Modules -### `CSS Modules` +What is `CSS Modules`? Please [read](https://github.com/webpack-contrib/css-loader#modules). -This loader [cannot be used] with [CSS Modules] out of the box due -to the way `css-loader` processes file imports. To make them work properly, -either add the css-loader’s [`importLoaders`] option. +No additional options required on the `postcss-loader` side. +To make them work properly, either add the `css-loader`’s `importLoaders` option. **webpack.config.js** @@ -752,7 +828,10 @@ module.exports = { 'style-loader', { loader: 'css-loader', - options: { modules: true, importLoaders: 1 }, + options: { + modules: true, + importLoaders: 1, + }, }, 'postcss-loader', ], @@ -762,18 +841,9 @@ module.exports = { }; ``` -or use [postcss-modules] instead of `css-loader`. - -[`importloaders`]: https://github.com/webpack-contrib/css-loader#importloaders -[cannot be used]: https://github.com/webpack/css-loader/issues/137 -[css modules]: https://github.com/webpack/css-loader#css-modules -[postcss-modules]: https://github.com/css-modules/postcss-modules - -### `CSS-in-JS` - -If you want to process styles written in JavaScript, use the [postcss-js] parser. +### CSS-in-JS and [`postcss-js`](https://github.com/postcss/postcss-js) -[postcss-js]: https://github.com/postcss/postcss-js +If you want to process styles written in JavaScript, use the [`postcss-js`](https://github.com/postcss/postcss-js) parser. **webpack.config.js** @@ -785,7 +855,12 @@ module.exports = { test: /\.style.js$/, use: [ 'style-loader', - { loader: 'css-loader', options: { importLoaders: 2 } }, + { + loader: 'css-loader', + options: { + importLoaders: 2, + }, + }, { loader: 'postcss-loader', options: { @@ -820,29 +895,28 @@ export default { > :warning: If you are using Babel you need to do the following in order for the setup to work -> 1. Add [babel-plugin-add-module-exports] to your configuration -> 2. You need to have only one **default** export per style module - -[babel-plugin-add-module-exports]: https://github.com/59naga/babel-plugin-add-module-exports +> 1. Add [`babel-plugin-add-module-exports`](https://github.com/59naga/babel-plugin-add-module-exports) to your configuration. +> 2. You need to have only one **default** export per style module. -### [Extract CSS][extractplugin] +### Extract CSS -[extractplugin]: https://github.com/webpack-contrib/mini-css-extract-plugin +Using [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin). **`webpack.config.js`** ```js -const devMode = process.env.NODE_ENV !== 'production'; +const isProductionMode = process.env.NODE_ENV === 'production'; const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { + mode: isProductionMode ? 'production' : 'development', module: { rules: [ { test: /\.css$/, use: [ - devMode ? 'style-loader' : MiniCssExtractPlugin.loader, + isProductionMode ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'postcss-loader', ], @@ -851,15 +925,16 @@ module.exports = { }, plugins: [ new MiniCssExtractPlugin({ - filename: devMode ? '[name].css' : '[name].[hash].css', + filename: isProductionMode ? '[name].[contenthash].css' : '[name].css', }), ], }; ``` -### `Emit assets` +### Emit assets + +To write a asset from the postcss plugin to the webpack's output, need to add a message in `result.messages`. -To write a asset from the postcss plugin to the webpack's output file system, need to add a message in `result.messages`. The message should contain the following fields: - `type` = `asset` - Message type (require, should be equal `asset`) @@ -904,11 +979,11 @@ module.exports = { }; ``` -### `Add dependencies` +### Add dependencies There are two way to add dependencies: -1. (Recommended). Postcss plugin should emit message in `result.messages`. +1. (Recommended). The plugin may emit messages in `result.messages`. The message should contain the following fields: @@ -988,7 +1063,7 @@ module.exports = (loaderContext) => ({ }); ``` -**`customPlugin.js`** +**customPlugin.js** ```js const path = require('path'); @@ -1002,38 +1077,29 @@ const customPlugin = (loaderContext) => (css, result) => { module.exports = postcss.plugin('postcss-assets', customPlugin); ``` -

Maintainers

- - - - - - - - -
- - -
- Michael Ciniawsky - - 		- - -
- Alexander Krasnoyarov - -
+## Contributing + +Please take a moment to read our contributing guidelines if you haven't yet done so. + +[CONTRIBUTING](./.github/CONTRIBUTING.md) + +## License + +[MIT](./LICENSE) [npm]: https://img.shields.io/npm/v/postcss-loader.svg [npm-url]: https://npmjs.com/package/postcss-loader [node]: https://img.shields.io/node/v/postcss-loader.svg [node-url]: https://nodejs.org -[deps]: https://david-dm.org/postcss/postcss-loader.svg -[deps-url]: https://david-dm.org/postcss/postcss-loader -[tests]: https://img.shields.io/travis/postcss/postcss-loader.svg -[tests-url]: https://travis-ci.org/postcss/postcss-loader -[cover]: https://coveralls.io/repos/github/postcss/postcss-loader/badge.svg -[cover-url]: https://coveralls.io/github/postcss/postcss-loader -[chat]: https://badges.gitter.im/postcss/postcss.svg -[chat-url]: https://gitter.im/postcss/postcss +[deps]: https://david-dm.org/webpack-contrib/postcss-loader.svg +[deps-url]: https://david-dm.org/webpack-contrib/postcss-loader +[tests]: https://github.com/webpack-contrib/postcss-loader/workflows/postcss-loader/badge.svg +[tests-url]: https://github.com/webpack-contrib/postcss-loader/actions +[cover]: https://codecov.io/gh/webpack-contrib/postcss-loader/branch/master/graph/badge.svg +[cover-url]: https://codecov.io/gh/webpack-contrib/postcss-loader +[chat]: https://badges.gitter.im/webpack/webpack.svg +[chat-url]: https://gitter.im/webpack/webpack +[chat-postcss]: https://badges.gitter.im/postcss/postcss.svg +[chat-postcss-url]: https://gitter.im/postcss/postcss +[size]: https://packagephobia.now.sh/badge?p=postcss-loader +[size-url]: https://packagephobia.now.sh/result?p=postcss-loader diff --git a/src/index.js b/src/index.js index 162095f0..4bbd2cd1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,3 @@ -import path from 'path'; - import { getOptions } from 'loader-utils'; import validateOptions from 'schema-utils'; @@ -38,6 +36,7 @@ export default async function loader(content, sourceMap) { }); const callback = this.async(); + const configOption = typeof options.postcssOptions === 'undefined' || typeof options.postcssOptions.config === 'undefined' @@ -46,35 +45,8 @@ export default async function loader(content, sourceMap) { let loadedConfig = {}; if (configOption) { - const dataForLoadConfig = { - path: path.dirname(this.resourcePath), - ctx: { - file: { - extname: path.extname(this.resourcePath), - dirname: path.dirname(this.resourcePath), - basename: path.basename(this.resourcePath), - }, - options: {}, - }, - }; - - if (typeof configOption.path !== 'undefined') { - dataForLoadConfig.path = path.resolve(configOption.path); - } - - if (typeof configOption.ctx !== 'undefined') { - dataForLoadConfig.ctx.options = configOption.ctx; - } - - dataForLoadConfig.ctx.webpack = this; - try { - loadedConfig = await loadConfig( - configOption, - dataForLoadConfig.ctx, - dataForLoadConfig.path, - this - ); + loadedConfig = await loadConfig(this, configOption); } catch (error) { callback(error); diff --git a/src/options.json b/src/options.json index 193c4aa4..f86c5b96 100644 --- a/src/options.json +++ b/src/options.json @@ -11,20 +11,6 @@ "config": { "description": "Allows to specify PostCSS Config Path (https://github.com/postcss/postcss-loader#config)", "anyOf": [ - { - "type": "object", - "properties": { - "path": { - "description": "Allows to specify PostCSS Config Path (https://github.com/postcss/postcss-loader#path)", - "type": "string" - }, - "ctx": { - "description": "Allows to specify PostCSS Config Context (https://github.com/postcss/postcss-loader#context-ctx)", - "type": "object" - } - }, - "additionalProperties": false - }, { "description": "Allows to specify the path to the configuration file", "type": "string" diff --git a/src/utils.js b/src/utils.js index fedb1f42..56be7608 100644 --- a/src/utils.js +++ b/src/utils.js @@ -15,20 +15,6 @@ const stat = (inputFileSystem, filePath) => }); }); -const createContext = (context) => { - const result = { - cwd: process.cwd(), - env: process.env.NODE_ENV, - ...context, - }; - - if (!result.env) { - process.env.NODE_ENV = 'development'; - } - - return result; -}; - function exec(code, loaderContext) { const { resource, context } = loaderContext; @@ -44,12 +30,11 @@ function exec(code, loaderContext) { return module.exports; } -async function loadConfig(config, context, configPath, loaderContext) { - let searchPath = configPath ? path.resolve(configPath) : process.cwd(); - - if (typeof config === 'string') { - searchPath = path.resolve(config); - } +async function loadConfig(loaderContext, config) { + const searchPath = + typeof config === 'string' + ? path.resolve(config) + : path.dirname(loaderContext.resourcePath); let stats; @@ -77,17 +62,23 @@ async function loadConfig(config, context, configPath, loaderContext) { return {}; } - const patchedContext = createContext(context); - let resultConfig = result.config || {}; if (typeof resultConfig === 'function') { - resultConfig = resultConfig(patchedContext); + const api = { + env: process.env.NODE_ENV, + mode: loaderContext.mode, + file: loaderContext.resourcePath, + // For complex use + webpackLoaderContext: loaderContext, + }; + + resultConfig = resultConfig(api); } resultConfig.file = result.filepath; - loaderContext.addDependency(result.filepath); + loaderContext.addDependency(resultConfig.file); return resultConfig; } @@ -126,7 +117,8 @@ function pluginFactory() { } else if ( plugin && Object.keys(plugin).length === 1 && - typeof plugin[Object.keys(plugin)[0]] === 'object' && + (typeof plugin[Object.keys(plugin)[0]] === 'object' || + typeof plugin[Object.keys(plugin)[0]] === 'boolean') && plugin[Object.keys(plugin)[0]] !== null ) { const [name] = Object.keys(plugin); diff --git a/test/__snapshots__/config.test.js.snap b/test/__snapshots__/config.test.js.snap new file mode 100644 index 00000000..ccf967cf --- /dev/null +++ b/test/__snapshots__/config.test.js.snap @@ -0,0 +1,153 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`"config" option should throw an error on the invalid config: errors 1`] = ` +Array [ + "ModuleBuildError: Module build failed (from \`replaced original path\`): +Error: invalid postcss config", +] +`; + +exports[`"config" option should throw an error on the invalid config: warnings 1`] = `Array []`; + +exports[`"config" option should throw an error on the unresolved config: errors 1`] = ` +Array [ + "ModuleBuildError: Module build failed (from \`replaced original path\`): +Error: No PostCSS Config found in: /test/fixtures/config-scope/css/unresolve.js", +] +`; + +exports[`"config" option should throw an error on the unresolved config: warnings 1`] = `Array []`; + +exports[`"config" option should work "String" value (relative path): css 1`] = ` +"a { color: rgba(0, 0, 0, 1.0) } + +.foo { + float: right; +} +" +`; + +exports[`"config" option should work "String" value (relative path): errors 1`] = `Array []`; + +exports[`"config" option should work "String" value (relative path): warnings 1`] = `Array []`; + +exports[`"config" option should work with "String" value (absolute path): css 1`] = ` +"a { color: rgba(0, 0, 0, 1.0) } + +.foo { + float: right; +} +" +`; + +exports[`"config" option should work with "String" value (absolute path): errors 1`] = `Array []`; + +exports[`"config" option should work with "String" value (absolute path): warnings 1`] = `Array []`; + +exports[`"config" option should work 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[`"config" option should work with "String" value (with path to the directory with the configuration): errors 1`] = `Array []`; + +exports[`"config" option should work with "String" value (with path to the directory with the configuration): warnings 1`] = `Array []`; + +exports[`"config" option should work with "String" value and respect all options: css 1`] = ` +"a { + color: black +} + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLnNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0FBREYiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYVxuICBjb2xvcjogYmxhY2tcbiJdfQ== */" +`; + +exports[`"config" option should work with "String" value and respect all options: errors 1`] = `Array []`; + +exports[`"config" option should work with "String" value and respect all options: warnings 1`] = `Array []`; + +exports[`"config" option should work with "false" value: css 1`] = ` +"a { color: black } + +.foo { + float: right; +} +" +`; + +exports[`"config" option should work with "false" value: errors 1`] = `Array []`; + +exports[`"config" option should work with "false" value: warnings 1`] = `Array []`; + +exports[`"config" option should work with "package.json" configuration: css 1`] = ` +".import { + color: red; +} + +.test { + color: blue; +} +" +`; + +exports[`"config" option should work with "package.json" configuration: errors 1`] = `Array []`; + +exports[`"config" option should work with "package.json" configuration: warnings 1`] = `Array []`; + +exports[`"config" option should work with "true" value: css 1`] = ` +"a { color: rgba(0, 0, 0, 1.0) } + +.foo { + float: right; +} +" +`; + +exports[`"config" option should work with "true" value: errors 1`] = `Array []`; + +exports[`"config" option should work with "true" value: warnings 1`] = `Array []`; + +exports[`"config" option should work with the "postcssOptions" option: css 1`] = ` +"a { color: rgba(0, 0, 0, 1.0) } + +[dir=ltr] .foo { float: right; +} + +[dir=rtl] .foo { + float: left; +} +" +`; + +exports[`"config" option should work with the "postcssOptions" option: errors 1`] = `Array []`; + +exports[`"config" option should work with the "postcssOptions" option: warnings 1`] = `Array []`; + +exports[`"config" option should work without the specified value in the "postcssOptions" option: css 1`] = ` +"a { color: rgba(0, 0, 0, 1.0) } + +.foo { + float: right; +} +" +`; + +exports[`"config" option should work without the specified value in the "postcssOptions" option: errors 1`] = `Array []`; + +exports[`"config" option should work without the specified value in the "postcssOptions" option: warnings 1`] = `Array []`; + +exports[`"config" option should work without the specified value: css 1`] = ` +"a { color: rgba(0, 0, 0, 1.0) } + +.foo { + float: right; +} +" +`; + +exports[`"config" option should work without the specified value: errors 1`] = `Array []`; + +exports[`"config" option should work without the specified value: warnings 1`] = `Array []`; diff --git a/test/__snapshots__/exec.test.js.snap b/test/__snapshots__/exec.test.js.snap new file mode 100644 index 00000000..7767a494 --- /dev/null +++ b/test/__snapshots__/exec.test.js.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`"exec" option should work with "Boolean" value: css 1`] = ` +"a { + color: green +}" +`; + +exports[`"exec" option should work with "Boolean" value: errors 1`] = `Array []`; + +exports[`"exec" option should work with "Boolean" value: warnings 1`] = `Array []`; + +exports[`"exec" option should work with "JSS" parser: css 1`] = ` +"a { + color: yellow +}" +`; + +exports[`"exec" option should work with "JSS" parser: errors 1`] = `Array []`; + +exports[`"exec" option should work with "JSS" parser: warnings 1`] = `Array []`; diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index f90014bb..96d1e461 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -1,27 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`loader should emit Syntax Error: errors 1`] = ` -Array [ - "ModuleBuildError: Module build failed (from \`replaced original path\`): -SyntaxError - -(1:3) Unnecessary curly bracket - -> 1 | a { - | ^ - 2 | color: black; - 3 | } -", -] -`; - -exports[`loader should emit Syntax Error: warnings 1`] = `Array []`; - -exports[`loader should emit asset: errors 1`] = `Array []`; +exports[`loader should emit asset using the "messages" API: errors 1`] = `Array []`; -exports[`loader should emit asset: warnings 1`] = `Array []`; +exports[`loader should emit asset using the "messages" API: warnings 1`] = `Array []`; -exports[`loader should emit warning: css 1`] = ` +exports[`loader should emit warning using the "messages" API: css 1`] = ` "a { color: black; } @@ -68,9 +51,9 @@ a { " `; -exports[`loader should emit warning: errors 1`] = `Array []`; +exports[`loader should emit warning using the "messages" API: errors 1`] = `Array []`; -exports[`loader should emit warning: warnings 1`] = ` +exports[`loader should emit warning using the "messages" API: warnings 1`] = ` Array [ "ModuleWarning: Module Warning (from \`replaced original path\`): Warning @@ -123,6 +106,23 @@ Warning ] `; +exports[`loader should throw an error on invalid syntax: errors 1`] = ` +Array [ + "ModuleBuildError: Module build failed (from \`replaced original path\`): +SyntaxError + +(1:3) Unnecessary curly bracket + +> 1 | a { + | ^ + 2 | color: black; + 3 | } +", +] +`; + +exports[`loader should throw an error on invalid syntax: warnings 1`] = `Array []`; + exports[`loader should work: css 1`] = ` "a { color: black; diff --git a/test/__snapshots__/parser.test.js.snap b/test/__snapshots__/parser.test.js.snap new file mode 100644 index 00000000..36781ca2 --- /dev/null +++ b/test/__snapshots__/parser.test.js.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`"parser" option should throw an error on "unresolved" parser: errors 1`] = ` +Array [ + "ModuleBuildError: Module build failed (from \`replaced original path\`): +TypeError: parser is not a function", + "ModuleError: Module Error (from \`replaced original path\`): +Loading PostCSS \\"unresolved\\" parser failed: Cannot find module 'unresolved' from 'src/utils.js'", +] +`; + +exports[`"parser" option should throw an error on "unresolved" parser: warnings 1`] = `Array []`; + +exports[`"parser" option should work with "Function" value: css 1`] = ` +"a { + color: black +} +" +`; + +exports[`"parser" option should work with "Function" value: errors 1`] = `Array []`; + +exports[`"parser" option should work with "Function" value: warnings 1`] = `Array []`; + +exports[`"parser" option should work with "Object" value: css 1`] = ` +"a { + color: black +} +" +`; + +exports[`"parser" option should work with "Object" value: errors 1`] = `Array []`; + +exports[`"parser" option should work with "Object" value: warnings 1`] = `Array []`; + +exports[`"parser" option should work with "String" value: css 1`] = ` +"a { + color: black +} +" +`; + +exports[`"parser" option should work with "String" value: errors 1`] = `Array []`; + +exports[`"parser" option should work with "String" value: warnings 1`] = `Array []`; diff --git a/test/options/__snapshots__/plugins.test.js.snap b/test/__snapshots__/plugins.test.js.snap similarity index 55% rename from test/options/__snapshots__/plugins.test.js.snap rename to test/__snapshots__/plugins.test.js.snap index 4dcc39f3..90e19768 100644 --- a/test/options/__snapshots__/plugins.test.js.snap +++ b/test/__snapshots__/plugins.test.js.snap @@ -9,11 +9,11 @@ Loading PostCSS Plugin failed: Cannot find module 'postcss-unresolved' from 'src exports[`"plugins" option should throw an error on the unresolved plugin: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Array" and not throw an error on falsy plugin: errors 1`] = `Array []`; +exports[`"plugins" option should work with "Array" value and not throw an error on falsy plugin: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Array" and not throw an error on falsy plugin: warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Array" value and not throw an error on falsy plugin: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Array" and override the previous plugin options: css 1`] = ` +exports[`"plugins" option should work with "Array" value and override the previous plugin options: css 1`] = ` "a { color: black; } @@ -62,11 +62,62 @@ a { " `; -exports[`"plugins" option should work with "Array" and override the previous plugin options: errors 1`] = `Array []`; +exports[`"plugins" option should work with "Array" value and override the previous plugin options: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Array" and override the previous plugin options: warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Array" value and override the previous plugin options: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Array", and config, and override the previous plugin options: css 1`] = ` +exports[`"plugins" option should work 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[`"plugins" option should work with "Array" value and support disabling plugins from the configuration: errors 1`] = `Array []`; + +exports[`"plugins" option should work with "Array" value and support disabling plugins from the configuration: warnings 1`] = `Array []`; + +exports[`"plugins" option should work with "Array" value, and config, and override the previous plugin options: css 1`] = ` "a { color: black; } @@ -115,11 +166,11 @@ a { " `; -exports[`"plugins" option should work with "Array", and config, and override the previous plugin options: errors 1`] = `Array []`; +exports[`"plugins" option should work with "Array" value, and config, and override the previous plugin options: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Array", and config, and override the previous plugin options: warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Array" value, and config, and override the previous plugin options: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Array": css 1`] = ` +exports[`"plugins" option should work with "Array" value: css 1`] = ` "a { color: rgba(0, 0, 0, 1.0); } @@ -169,11 +220,11 @@ body.is_dark .phone_title { " `; -exports[`"plugins" option should work with "Array": errors 1`] = `Array []`; +exports[`"plugins" option should work with "Array" value: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Array": warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Array" value: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Object" and only disabled plugins: css 1`] = ` +exports[`"plugins" option should work with "Object" value and only disabled plugins: css 1`] = ` "a { color: black; } @@ -220,11 +271,11 @@ a { " `; -exports[`"plugins" option should work with "Object" and only disabled plugins: errors 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value and only disabled plugins: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Object" and only disabled plugins: warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value and only disabled plugins: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Object" and override the previous plugin options: css 1`] = ` +exports[`"plugins" option should work with "Object" value and override the previous plugin options: css 1`] = ` "a { color: black; } @@ -273,11 +324,11 @@ a { " `; -exports[`"plugins" option should work with "Object" and override the previous plugin options: errors 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value and override the previous plugin options: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Object" and override the previous plugin options: warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value and override the previous plugin options: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Object" and support disabling plugins from the configuration: css 1`] = ` +exports[`"plugins" option should work with "Object" value and support disabling plugins from the configuration: css 1`] = ` "a { color: black; } @@ -324,11 +375,11 @@ a { " `; -exports[`"plugins" option should work with "Object" and support disabling plugins from the configuration: errors 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value and support disabling plugins from the configuration: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Object" and support disabling plugins from the configuration: warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value and support disabling plugins from the configuration: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Object", and config, and override the previous plugin options: css 1`] = ` +exports[`"plugins" option should work with "Object" value, and config, and override the previous plugin options: css 1`] = ` "a { color: black; } @@ -377,11 +428,11 @@ a { " `; -exports[`"plugins" option should work with "Object", and config, and override the previous plugin options: errors 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value, and config, and override the previous plugin options: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Object", and config, and override the previous plugin options: warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value, and config, and override the previous plugin options: warnings 1`] = `Array []`; -exports[`"plugins" option should work with "Object": css 1`] = ` +exports[`"plugins" option should work with "Object" value: css 1`] = ` "a { color: black; } @@ -431,11 +482,11 @@ body.is_dark .phone_title { " `; -exports[`"plugins" option should work with "Object": errors 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value: errors 1`] = `Array []`; -exports[`"plugins" option should work with "Object": warnings 1`] = `Array []`; +exports[`"plugins" option should work with "Object" value: warnings 1`] = `Array []`; -exports[`"plugins" option should work with empty "Array": css 1`] = ` +exports[`"plugins" option should work with empty "Array" value: css 1`] = ` "a { color: black; } @@ -482,11 +533,11 @@ a { " `; -exports[`"plugins" option should work with empty "Array": errors 1`] = `Array []`; +exports[`"plugins" option should work with empty "Array" value: errors 1`] = `Array []`; -exports[`"plugins" option should work with empty "Array": warnings 1`] = `Array []`; +exports[`"plugins" option should work with empty "Array" value: warnings 1`] = `Array []`; -exports[`"plugins" option should work with empty "Object": css 1`] = ` +exports[`"plugins" option should work with empty "Object" value: css 1`] = ` "a { color: black; } @@ -533,6 +584,6 @@ a { " `; -exports[`"plugins" option should work with empty "Object": errors 1`] = `Array []`; +exports[`"plugins" option should work with empty "Object" value: errors 1`] = `Array []`; -exports[`"plugins" option should work with empty "Object": warnings 1`] = `Array []`; +exports[`"plugins" option should work with empty "Object" value: warnings 1`] = `Array []`; diff --git a/test/options/__snapshots__/postcssOptins.test.js.snap b/test/__snapshots__/postcssOptins.test.js.snap similarity index 68% rename from test/options/__snapshots__/postcssOptins.test.js.snap rename to test/__snapshots__/postcssOptins.test.js.snap index 81a514fb..c1e06f21 100644 --- a/test/options/__snapshots__/postcssOptins.test.js.snap +++ b/test/__snapshots__/postcssOptins.test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`"postcssOptions" option should work the the "map" option and generate inlined source maps: css 1`] = ` +exports[`"postcssOptions" option should work "Function" value and with "Array" syntax of the "plugins" option: css 1`] = ` "a { - color: black; + color: rgba(0, 0, 0, 1.0); } a { @@ -44,17 +44,14 @@ a { display: block; } } - -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7QUFDWjs7QUFFQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLDRCQUE0QjtFQUM1QixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSw0QkFBNEI7RUFDNUIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0U7SUFDRSxZQUFZOztJQUVaO01BQ0UsV0FBVztJQUNiOztJQUVBO01BQ0UsWUFBWTtJQUNkO0VBQ0Y7O0VBRUE7SUFDRSxjQUFjO0VBQ2hCO0FBQ0YiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7XG4gIGNvbG9yOiBibGFjaztcbn1cblxuYSB7XG4gIGNvbG9yOiByZWQ7XG59XG5cbmEge1xuICBjb2xvcjogZ3JlZW47XG59XG5cbmEge1xuICBjb2xvcjogYmx1ZTtcbn1cblxuLmNsYXNzIHtcbiAgLXgtYm9yZGVyLWNvbG9yOiBibHVlIGJsdWUgKjtcbiAgLXgtY29sb3I6ICogI2ZhZmFmYTtcbn1cblxuLmNsYXNzLWZvbyB7XG4gIC16LWJvcmRlci1jb2xvcjogYmx1ZSBibHVlICo7XG4gIC16LWNvbG9yOiAqICNmYWZhZmE7XG59XG5cbi5waG9uZSB7XG4gICZfdGl0bGUge1xuICAgIHdpZHRoOiA1MDBweDtcblxuICAgIEBtZWRpYSAobWF4LXdpZHRoOiA1MDBweCkge1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgfVxuXG4gICAgYm9keS5pc19kYXJrICYge1xuICAgICAgY29sb3I6IHdoaXRlO1xuICAgIH1cbiAgfVxuXG4gIGltZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cbiJdfQ== */" +" `; -exports[`"postcssOptions" option should work the the "map" option and generate inlined source maps: errors 1`] = `Array []`; +exports[`"postcssOptions" option should work "Function" value and with "Array" syntax of the "plugins" option: errors 1`] = `Array []`; -exports[`"postcssOptions" option should work the the "map" option and generate inlined source maps: map 1`] = `undefined`; +exports[`"postcssOptions" option should work "Function" value and with "Array" syntax of the "plugins" option: warnings 1`] = `Array []`; -exports[`"postcssOptions" option should work the the "map" option and generate inlined source maps: warnings 1`] = `Array []`; - -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function" and the "plugins" option is "Array": css 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); } @@ -101,11 +98,11 @@ a { " `; -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function" and the "plugins" option is "Array": errors 1`] = `Array []`; +exports[`"postcssOptions" option should work "Function" value and with "Object" syntax of the "plugins" option: errors 1`] = `Array []`; -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function" and the "plugins" option is "Array": warnings 1`] = `Array []`; +exports[`"postcssOptions" option should work "Function" value and with "Object" syntax of the "plugins" option: warnings 1`] = `Array []`; -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function" and the "plugins" option is "Object": css 1`] = ` +exports[`"postcssOptions" option should work "Function" value: css 1`] = ` "a { color: rgba(0, 0, 0, 1.0); } @@ -152,13 +149,13 @@ a { " `; -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function" and the "plugins" option is "Object": errors 1`] = `Array []`; +exports[`"postcssOptions" option should work "Function" value: errors 1`] = `Array []`; -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function" and the "plugins" option is "Object": warnings 1`] = `Array []`; +exports[`"postcssOptions" option should work "Function" value: warnings 1`] = `Array []`; -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function": css 1`] = ` +exports[`"postcssOptions" option should work with "from", "to" and "map" options: css 1`] = ` "a { - color: rgba(0, 0, 0, 1.0); + color: black; } a { @@ -203,11 +200,13 @@ a { " `; -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function": errors 1`] = `Array []`; +exports[`"postcssOptions" option should work with "from", "to" and "map" options: errors 1`] = `Array []`; + +exports[`"postcssOptions" option should work with "from", "to" and "map" options: map 1`] = `undefined`; -exports[`"postcssOptions" option should work when the "postcssOptions" option is "Function": warnings 1`] = `Array []`; +exports[`"postcssOptions" option should work with "from", "to" and "map" options: warnings 1`] = `Array []`; -exports[`"postcssOptions" option should work with "from", "to" and "map" options: css 1`] = ` +exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: css 1`] = ` "a { color: black; } @@ -251,11 +250,12 @@ a { display: block; } } -" + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7QUFDWjs7QUFFQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLDRCQUE0QjtFQUM1QixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSw0QkFBNEI7RUFDNUIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0U7SUFDRSxZQUFZOztJQUVaO01BQ0UsV0FBVztJQUNiOztJQUVBO01BQ0UsWUFBWTtJQUNkO0VBQ0Y7O0VBRUE7SUFDRSxjQUFjO0VBQ2hCO0FBQ0YiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7XG4gIGNvbG9yOiBibGFjaztcbn1cblxuYSB7XG4gIGNvbG9yOiByZWQ7XG59XG5cbmEge1xuICBjb2xvcjogZ3JlZW47XG59XG5cbmEge1xuICBjb2xvcjogYmx1ZTtcbn1cblxuLmNsYXNzIHtcbiAgLXgtYm9yZGVyLWNvbG9yOiBibHVlIGJsdWUgKjtcbiAgLXgtY29sb3I6ICogI2ZhZmFmYTtcbn1cblxuLmNsYXNzLWZvbyB7XG4gIC16LWJvcmRlci1jb2xvcjogYmx1ZSBibHVlICo7XG4gIC16LWNvbG9yOiAqICNmYWZhZmE7XG59XG5cbi5waG9uZSB7XG4gICZfdGl0bGUge1xuICAgIHdpZHRoOiA1MDBweDtcblxuICAgIEBtZWRpYSAobWF4LXdpZHRoOiA1MDBweCkge1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgfVxuXG4gICAgYm9keS5pc19kYXJrICYge1xuICAgICAgY29sb3I6IHdoaXRlO1xuICAgIH1cbiAgfVxuXG4gIGltZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cbiJdfQ== */" `; -exports[`"postcssOptions" option should work with "from", "to" and "map" options: errors 1`] = `Array []`; +exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: errors 1`] = `Array []`; -exports[`"postcssOptions" option should work with "from", "to" and "map" options: map 1`] = `undefined`; +exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: map 1`] = `undefined`; -exports[`"postcssOptions" option should work with "from", "to" and "map" options: warnings 1`] = `Array []`; +exports[`"postcssOptions" option should work with the "map" option and generate inlined source maps: warnings 1`] = `Array []`; diff --git a/test/options/__snapshots__/sourceMap.test.js.snap b/test/__snapshots__/sourceMap.test.js.snap similarity index 66% rename from test/options/__snapshots__/sourceMap.test.js.snap rename to test/__snapshots__/sourceMap.test.js.snap index 0d100268..51d4732b 100644 --- a/test/options/__snapshots__/sourceMap.test.js.snap +++ b/test/__snapshots__/sourceMap.test.js.snap @@ -1,33 +1,33 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`"sourceMap" option should generate source maps the "postcssOptions.map" has the "true" values and previous loader returns source maps ("sass-loader"): css 1`] = ` +exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with "true" value and previous loader returns source maps ("sass-loader"): css 1`] = ` "a { color: coral; } /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBSSxZQUFBO0FBRUoiLCJmaWxlIjoic3R5bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbImEgeyBjb2xvcjogY29yYWwgfVxuIl19 */" `; -exports[`"sourceMap" option should generate source maps the "postcssOptions.map" has the "true" values and previous loader returns source maps ("sass-loader"): errors 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with "true" value and previous loader returns source maps ("sass-loader"): errors 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps the "postcssOptions.map" has the "true" values and previous loader returns source maps ("sass-loader"): warnings 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with "true" value and previous loader returns source maps ("sass-loader"): warnings 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps the "postcssOptions.map" has values and previous loader returns source maps ("sass-loader"): css 1`] = ` +exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with values and previous loader returns source maps ("sass-loader"): css 1`] = ` "a { color: coral; } /*# sourceMappingURL=style.scss.map */" `; -exports[`"sourceMap" option should generate source maps the "postcssOptions.map" has values and previous loader returns source maps ("sass-loader"): errors 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with values and previous loader returns source maps ("sass-loader"): errors 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps the "postcssOptions.map" has values and previous loader returns source maps ("sass-loader"): source map 1`] = ` +exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with values and previous loader returns source maps ("sass-loader"): source map 1`] = ` Object { "file": "style.scss", "mappings": "AAAA;EAAI,YAAA;AAEJ", "names": Array [], "sourceRoot": "", "sources": Array [ - "../style.scss", + "style.scss", ], "sourcesContent": Array [ "a { color: coral } @@ -37,7 +37,7 @@ Object { } `; -exports[`"sourceMap" option should generate source maps the "postcssOptions.map" has values and previous loader returns source maps ("sass-loader"): warnings 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with values and previous loader returns source maps ("sass-loader"): warnings 1`] = `Array []`; exports[`"sourceMap" option should generate source maps when previous loader returns source maps ("less-loader"): css 1`] = ` "a { @@ -54,7 +54,7 @@ Object { "names": Array [], "sourceRoot": "", "sources": Array [ - "fixtures/less/style.less", + "less/style.less", ], "sourcesContent": Array [ "a { color: coral } @@ -80,7 +80,7 @@ Object { "names": Array [], "sourceRoot": "", "sources": Array [ - "fixtures/scss/style.scss", + "scss/style.scss", ], "sourcesContent": Array [ "a { color: coral } @@ -92,7 +92,7 @@ Object { exports[`"sourceMap" option should generate source maps when previous loader returns source maps ("sass-loader"): warnings 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps when value has "false" value, but the "postcssOptions.map" has values: css 1`] = ` +exports[`"sourceMap" option should generate source maps when value is not specified and the "devtool" with "source-map" value: css 1`] = ` "a { color: black; } @@ -139,16 +139,15 @@ a { " `; -exports[`"sourceMap" option should generate source maps when value has "false" value, but the "postcssOptions.map" has values: errors 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps when value is not specified and the "devtool" with "source-map" value: errors 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps when value has "false" value, but the "postcssOptions.map" has values: source map 1`] = ` +exports[`"sourceMap" option should generate source maps when value is not specified and the "devtool" with "source-map" value: source map 1`] = ` Object { - "file": "style.css", "mappings": "AAAA;EACE,YAAY;AACd;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;AACrB;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;AACrB;;AAEA;EACE;IACE,YAAY;;IAEZ;MACE,WAAW;IACb;;IAEA;MACE,YAAY;IACd;EACF;;EAEA;IACE,cAAc;EAChB;AACF", "names": Array [], "sourceRoot": "", "sources": Array [ - "../style.css", + "css/style.css", ], "sourcesContent": Array [ "a { @@ -200,9 +199,9 @@ a { } `; -exports[`"sourceMap" option should generate source maps when value has "false" value, but the "postcssOptions.map" has values: warnings 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps when value is not specified and the "devtool" with "source-map" value: warnings 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps when value has "true" value and the "devtool" option has "false" value: css 1`] = ` +exports[`"sourceMap" option should generate source maps with "false" value, but the "postcssOptions.map" has values: css 1`] = ` "a { color: black; } @@ -249,15 +248,16 @@ a { " `; -exports[`"sourceMap" option should generate source maps when value has "true" value and the "devtool" option has "false" value: errors 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps with "false" value, but the "postcssOptions.map" has values: errors 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps when value has "true" value and the "devtool" option has "false" value: source map 1`] = ` +exports[`"sourceMap" option should generate source maps with "false" value, but the "postcssOptions.map" has values: source map 1`] = ` Object { + "file": "style.css", "mappings": "AAAA;EACE,YAAY;AACd;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;AACrB;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;AACrB;;AAEA;EACE;IACE,YAAY;;IAEZ;MACE,WAAW;IACb;;IAEA;MACE,YAAY;IACd;EACF;;EAEA;IACE,cAAc;EAChB;AACF", "names": Array [], "sourceRoot": "", "sources": Array [ - "fixtures/css/style.css", + "style.css", ], "sourcesContent": Array [ "a { @@ -309,9 +309,9 @@ a { } `; -exports[`"sourceMap" option should generate source maps when value has "true" value and the "devtool" option has "false" value: warnings 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps with "false" value, but the "postcssOptions.map" has values: warnings 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps when value has "true" value and the "devtool" option has "source-map" value: css 1`] = ` +exports[`"sourceMap" option should generate source maps with "true" value and the "devtool" option with "source-map" value: css 1`] = ` "a { color: black; } @@ -358,15 +358,15 @@ a { " `; -exports[`"sourceMap" option should generate source maps when value has "true" value and the "devtool" option has "source-map" value: errors 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps with "true" value and the "devtool" option with "source-map" value: errors 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps when value has "true" value and the "devtool" option has "source-map" value: source map 1`] = ` +exports[`"sourceMap" option should generate source maps with "true" value and the "devtool" option with "source-map" value: source map 1`] = ` Object { "mappings": "AAAA;EACE,YAAY;AACd;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;AACrB;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;AACrB;;AAEA;EACE;IACE,YAAY;;IAEZ;MACE,WAAW;IACb;;IAEA;MACE,YAAY;IACd;EACF;;EAEA;IACE,cAAc;EAChB;AACF", "names": Array [], "sourceRoot": "", "sources": Array [ - "fixtures/css/style.css", + "css/style.css", ], "sourcesContent": Array [ "a { @@ -418,9 +418,9 @@ a { } `; -exports[`"sourceMap" option should generate source maps when value has "true" value and the "devtool" option has "source-map" value: warnings 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps with "true" value and the "devtool" option with "source-map" value: warnings 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps when value is not specified and the "devtool" option has "source-map" value: css 1`] = ` +exports[`"sourceMap" option should generate source maps with "true" value and the "devtool" with "false" value: css 1`] = ` "a { color: black; } @@ -467,15 +467,15 @@ a { " `; -exports[`"sourceMap" option should generate source maps when value is not specified and the "devtool" option has "source-map" value: errors 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps with "true" value and the "devtool" with "false" value: errors 1`] = `Array []`; -exports[`"sourceMap" option should generate source maps when value is not specified and the "devtool" option has "source-map" value: source map 1`] = ` +exports[`"sourceMap" option should generate source maps with "true" value and the "devtool" with "false" value: source map 1`] = ` Object { "mappings": "AAAA;EACE,YAAY;AACd;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;AACrB;;AAEA;EACE,4BAA4B;EAC5B,mBAAmB;AACrB;;AAEA;EACE;IACE,YAAY;;IAEZ;MACE,WAAW;IACb;;IAEA;MACE,YAAY;IACd;EACF;;EAEA;IACE,cAAc;EAChB;AACF", "names": Array [], "sourceRoot": "", "sources": Array [ - "fixtures/css/style.css", + "css/style.css", ], "sourcesContent": Array [ "a { @@ -527,9 +527,9 @@ a { } `; -exports[`"sourceMap" option should generate source maps when value is not specified and the "devtool" option has "source-map" value: warnings 1`] = `Array []`; +exports[`"sourceMap" option should generate source maps with "true" value and the "devtool" with "false" value: warnings 1`] = `Array []`; -exports[`"sourceMap" option should not generate source maps when value has "false" value and the "devtool" option has "false" value: css 1`] = ` +exports[`"sourceMap" option should not generate source maps when value is not specified and the "devtool" option with "source-map" value: css 1`] = ` "a { color: black; } @@ -576,11 +576,11 @@ a { " `; -exports[`"sourceMap" option should not generate source maps when value has "false" value and the "devtool" option has "false" value: errors 1`] = `Array []`; +exports[`"sourceMap" option should not generate source maps when value is not specified and the "devtool" option with "source-map" value: errors 1`] = `Array []`; -exports[`"sourceMap" option should not generate source maps when value has "false" value and the "devtool" option has "false" value: warnings 1`] = `Array []`; +exports[`"sourceMap" option should not generate source maps when value is not specified and the "devtool" option with "source-map" value: warnings 1`] = `Array []`; -exports[`"sourceMap" option should not generate source maps when value has "false" value and the "devtool" option has "source-map" value: css 1`] = ` +exports[`"sourceMap" option should not generate source maps with "false" value and the "devtool" option with "false" value: css 1`] = ` "a { color: black; } @@ -627,11 +627,11 @@ a { " `; -exports[`"sourceMap" option should not generate source maps when value has "false" value and the "devtool" option has "source-map" value: errors 1`] = `Array []`; +exports[`"sourceMap" option should not generate source maps with "false" value and the "devtool" option with "false" value: errors 1`] = `Array []`; -exports[`"sourceMap" option should not generate source maps when value has "false" value and the "devtool" option has "source-map" value: warnings 1`] = `Array []`; +exports[`"sourceMap" option should not generate source maps with "false" value and the "devtool" option with "false" value: warnings 1`] = `Array []`; -exports[`"sourceMap" option should not generate source maps when value is not specified and the "devtool" option has "source-map" value: css 1`] = ` +exports[`"sourceMap" option should not generate source maps with "false" value and the "devtool" option with "source-map" value: css 1`] = ` "a { color: black; } @@ -678,6 +678,6 @@ a { " `; -exports[`"sourceMap" option should not generate source maps when value is not specified and the "devtool" option has "source-map" value: errors 1`] = `Array []`; +exports[`"sourceMap" option should not generate source maps with "false" value and the "devtool" option with "source-map" value: errors 1`] = `Array []`; -exports[`"sourceMap" option should not generate source maps when value is not specified and the "devtool" option has "source-map" value: warnings 1`] = `Array []`; +exports[`"sourceMap" option should not generate source maps with "false" value and the "devtool" option with "source-map" value: warnings 1`] = `Array []`; diff --git a/test/options/__snapshots__/stringifier.test.js.snap b/test/__snapshots__/stringifier.test.js.snap similarity index 86% rename from test/options/__snapshots__/stringifier.test.js.snap rename to test/__snapshots__/stringifier.test.js.snap index 9e37d5e4..bb031beb 100644 --- a/test/options/__snapshots__/stringifier.test.js.snap +++ b/test/__snapshots__/stringifier.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Options Stringifier should throw an error on "unresolved" stringifier: errors 1`] = ` +exports[`"stringifier" option should throw an error on "unresolved" stringifier: errors 1`] = ` Array [ "ModuleBuildError: Module build failed (from \`replaced original path\`): TypeError: this.stringify is not a function", @@ -9,9 +9,9 @@ Loading PostCSS \\"unresolved\\" stringifier failed: Cannot find module 'unresol ] `; -exports[`Options Stringifier should throw an error on "unresolved" stringifier: warnings 1`] = `Array []`; +exports[`"stringifier" option should throw an error on "unresolved" stringifier: warnings 1`] = `Array []`; -exports[`Options Stringifier should work Stringifier - {Function}: css 1`] = ` +exports[`"stringifier" option should work "Function" value: css 1`] = ` "
a {
   color: black;
 }
@@ -58,11 +58,11 @@ exports[`Options Stringifier should work Stringifier - {Function}: css 1`] = `
" `; -exports[`Options Stringifier should work Stringifier - {Function}: errors 1`] = `Array []`; +exports[`"stringifier" option should work "Function" value: errors 1`] = `Array []`; -exports[`Options Stringifier should work Stringifier - {Function}: warnings 1`] = `Array []`; +exports[`"stringifier" option should work "Function" value: warnings 1`] = `Array []`; -exports[`Options Stringifier should work Stringifier - {Object}: css 1`] = ` +exports[`"stringifier" option should work "Object" value: css 1`] = ` "a color: black @@ -98,11 +98,11 @@ a " `; -exports[`Options Stringifier should work Stringifier - {Object}: errors 1`] = `Array []`; +exports[`"stringifier" option should work "Object" value: errors 1`] = `Array []`; -exports[`Options Stringifier should work Stringifier - {Object}: warnings 1`] = `Array []`; +exports[`"stringifier" option should work "Object" value: warnings 1`] = `Array []`; -exports[`Options Stringifier should work Stringifier - {String}: css 1`] = ` +exports[`"stringifier" option should work with "String" value: css 1`] = ` "a color: black @@ -138,6 +138,6 @@ a " `; -exports[`Options Stringifier should work Stringifier - {String}: errors 1`] = `Array []`; +exports[`"stringifier" option should work with "String" value: errors 1`] = `Array []`; -exports[`Options Stringifier should work Stringifier - {String}: warnings 1`] = `Array []`; +exports[`"stringifier" option should work with "String" value: warnings 1`] = `Array []`; diff --git a/test/__snapshots__/syntax.test.js.snap b/test/__snapshots__/syntax.test.js.snap new file mode 100644 index 00000000..cb7b0e5c --- /dev/null +++ b/test/__snapshots__/syntax.test.js.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`"syntax" option should throw an error on "unresolved" syntax: errors 1`] = ` +Array [ + "ModuleBuildError: Module build failed (from \`replaced original path\`): +TypeError: Cannot read property 'parse' of undefined", + "ModuleError: Module Error (from \`replaced original path\`): +Loading PostCSS \\"unresolved\\" syntax failed: Cannot find module 'unresolved' from 'src/utils.js'", +] +`; + +exports[`"syntax" option should throw an error on "unresolved" syntax: warnings 1`] = `Array []`; + +exports[`"syntax" option should work with "Object" value: css 1`] = ` +"a + color: black +" +`; + +exports[`"syntax" option should work with "Object" value: errors 1`] = `Array []`; + +exports[`"syntax" option should work with "Object" value: warnings 1`] = `Array []`; + +exports[`"syntax" option should work with "String" value: css 1`] = ` +"a + color: black +" +`; + +exports[`"syntax" option should work with "String" value: errors 1`] = `Array []`; + +exports[`"syntax" option should work with "String" value: warnings 1`] = `Array []`; diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap index ecbe34b2..09bd4998 100644 --- a/test/__snapshots__/validate-options.test.js.snap +++ b/test/__snapshots__/validate-options.test.js.snap @@ -43,11 +43,9 @@ exports[`validate options should throw an error on the "postcssOptions" option w -> Options to pass through to \`Postcss\`. Details: * options.postcssOptions.config should be one of these: - object { path?, ctx? } | string | boolean + string | boolean -> Allows to specify PostCSS Config Path (https://github.com/postcss/postcss-loader#config) Details: - * options.postcssOptions.config should be an object: - object { path?, ctx? } * options.postcssOptions.config should be a string. -> Allows to specify the path to the configuration file * options.postcssOptions.config should be a boolean. diff --git a/test/config-autoload.test.js b/test/config-autoload.test.js index 8904a42d..08353dba 100644 --- a/test/config-autoload.test.js +++ b/test/config-autoload.test.js @@ -1,5 +1,3 @@ -/* eslint-disable global-require */ - import path from 'path'; import fs from 'fs'; @@ -12,59 +10,52 @@ const loaderContext = { addDependency: () => true, }; -describe('config-autoload', () => { - const ctx = { - parser: true, - syntax: true, - }; - - it('.postcssrc - {Object} - Load Config', async () => { +describe('autoload config', () => { + it('should load ".postcssrc"', async () => { const expected = (config) => { expect(config.map).toEqual(false); expect(config.from).toEqual('./test/rc/fixtures/index.css'); expect(config.to).toEqual('./test/rc/expect/index.css'); - expect(Object.keys(config.plugins).length).toEqual(3); + expect(Object.keys(config.plugins).length).toEqual(2); expect(config.file).toEqual( path.resolve(testDirectory, 'rc', '.postcssrc') ); }; const config = await loadConfig( - true, - {}, - path.resolve(testDirectory, 'rc'), - loaderContext + loaderContext, + path.resolve(testDirectory, 'rc') ); expected(config); }); - it('postcss.config.js - {Object} - Load Config', async () => { + it('should load "package.json"', async () => { const expected = (config) => { + expect(config.parser).toEqual(false); + expect(config.syntax).toEqual(false); expect(config.map).toEqual(false); expect(config.from).toEqual( - './test/fixtures/config-autoload/js/object/index.css' + './test/fixtures/config-autoload/pkg/index.css' ); expect(config.to).toEqual( - './test/fixtures/config-autoload/js/object/expect/index.css' + './test/fixtures/config-autoload/pkg/expected/index.css' ); - expect(Object.keys(config.plugins).length).toEqual(3); + expect(Object.keys(config.plugins).length).toEqual(2); expect(config.file).toEqual( - path.resolve(testDirectory, 'js/object', 'postcss.config.js') + path.resolve(testDirectory, 'pkg', 'package.json') ); }; const config = await loadConfig( - true, - ctx, - path.resolve(testDirectory, 'js/object'), - loaderContext + loaderContext, + path.resolve(testDirectory, 'pkg') ); expected(config); }); - it('postcss.config.js - {Array} - Load Config', async () => { + it('should load "postcss.config.js" with "Object" syntax of plugins', async () => { const expected = (config) => { expect(config.map).toEqual(false); expect(config.from).toEqual( @@ -73,52 +64,46 @@ describe('config-autoload', () => { expect(config.to).toEqual( './test/fixtures/config-autoload/js/object/expect/index.css' ); - expect(Object.keys(config.plugins).length).toEqual(3); + expect(Object.keys(config.plugins).length).toEqual(2); expect(config.file).toEqual( - path.resolve(testDirectory, 'js/array', 'postcss.config.js') + path.resolve(testDirectory, 'js/object', 'postcss.config.js') ); }; const config = await loadConfig( - true, - ctx, - path.resolve(testDirectory, 'js/array'), - loaderContext + loaderContext, + path.resolve(testDirectory, 'js/object') ); expected(config); }); - it('package.json - {Object} - Load Config', async () => { + it('should load "postcss.config.js" with "Array" syntax of plugins', async () => { const expected = (config) => { - expect(config.parser).toEqual(false); - expect(config.syntax).toEqual(false); expect(config.map).toEqual(false); expect(config.from).toEqual( - './test/fixtures/config-autoload/pkg/index.css' + './test/fixtures/config-autoload/js/object/index.css' ); expect(config.to).toEqual( - './test/fixtures/config-autoload/pkg/expected/index.css' + './test/fixtures/config-autoload/js/object/expect/index.css' ); - expect(Object.keys(config.plugins).length).toEqual(3); + expect(Object.keys(config.plugins).length).toEqual(2); expect(config.file).toEqual( - path.resolve(testDirectory, 'pkg', 'package.json') + path.resolve(testDirectory, 'js/array', 'postcss.config.js') ); }; const config = await loadConfig( - true, - {}, - path.resolve(testDirectory, 'pkg'), - loaderContext + loaderContext, + path.resolve(testDirectory, 'js/array') ); expected(config); }); - it('Loading Config - {Error}', async () => { + it('should throw an error on "unresolved" config', async () => { try { - await loadConfig(true, {}, path.resolve('unresolved'), fs); + await loadConfig(loaderContext, path.resolve('unresolved')); } catch (error) { expect(error.message).toMatch(/^No PostCSS Config found in: (.*)$/); } diff --git a/test/options/config.test.js b/test/config.test.js similarity index 58% rename from test/options/config.test.js rename to test/config.test.js index dbc8b591..ade5b2d6 100644 --- a/test/options/config.test.js +++ b/test/config.test.js @@ -6,9 +6,9 @@ import { getErrors, getCodeFromBundle, getWarnings, -} from '../helpers/index'; +} from './helpers'; -const testDirectory = path.resolve(__dirname, '../fixtures', 'config-autoload'); +const testDirectory = path.resolve(__dirname, './fixtures', 'config-autoload'); describe('"config" option', () => { it('should work without the specified value', async () => { @@ -22,11 +22,9 @@ describe('"config" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "false" value', async () => { + it('should work without the specified value in the "postcssOptions" option', async () => { const compiler = getCompiler('./config-scope/css/index.js', { - postcssOptions: { - config: false, - }, + postcssOptions: {}, }); const stats = await compile(compiler); @@ -37,28 +35,10 @@ describe('"config" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work 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 "string" value (absolute path)', async () => { + it('should work with "false" value', async () => { const compiler = getCompiler('./config-scope/css/index.js', { postcssOptions: { - config: path.resolve( - __dirname, - '../fixtures/config-scope/css/custom.config.js' - ), + config: false, }, }); const stats = await compile(compiler); @@ -70,10 +50,10 @@ describe('"config" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work "string" value (relative path)', async () => { + it('should work with "true" value', async () => { const compiler = getCompiler('./config-scope/css/index.js', { postcssOptions: { - config: 'test/fixtures/config-scope/css/custom.config.js', + config: true, }, }); const stats = await compile(compiler); @@ -85,10 +65,13 @@ describe('"config" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "string" value (path to directory with the configuration)', async () => { + it('should work with "String" value (absolute path)', async () => { const compiler = getCompiler('./config-scope/css/index.js', { postcssOptions: { - config: 'test/fixtures/config-scope', + config: path.resolve( + __dirname, + './fixtures/config-scope/css/custom.config.js' + ), }, }); const stats = await compile(compiler); @@ -100,21 +83,10 @@ describe('"config" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "Object" value', async () => { - const compiler = getCompiler('./config-scope/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 work Config - Path - {String}', async () => { + it('should work "String" value (relative path)', async () => { const compiler = getCompiler('./config-scope/css/index.js', { postcssOptions: { - config: { path: 'test/fixtures/config-scope/config/postcss.config.js' }, + config: 'test/fixtures/config-scope/css/custom.config.js', }, }); const stats = await compile(compiler); @@ -126,13 +98,10 @@ describe('"config" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work Config - Context - {Object}', async () => { + it('should work with "String" value (with path to the directory with the configuration)', async () => { const compiler = getCompiler('./config-scope/css/index.js', { postcssOptions: { - config: { - path: 'test/fixtures/config-scope/config/postcss.config.js', - ctx: { plugin: true }, - }, + config: 'test/fixtures/config-scope', }, }); const stats = await compile(compiler); @@ -144,32 +113,10 @@ describe('"config" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work Config – Context – Loader {Object}', async () => { - const compiler = getCompiler('./css/index.js', { - postcssOptions: { - config: { - path: 'test/fixtures/config-scope/config/context/postcss.config.js', - }, - }, - }); - const stats = await compile(compiler); - - const { assets } = stats.compilation; - - const asset = 'asset.txt'; - - expect(asset in assets).toBeTruthy(); - expect(getWarnings(stats)).toMatchSnapshot('warnings'); - expect(getErrors(stats)).toMatchSnapshot('errors'); - }); - - it('should work with "postcss.config.js" and the array syntax of the "plugin" option', async () => { - const compiler = getCompiler('./config-autoload/js/array/index.js', { + it('should work with "package.json" configuration', async () => { + const compiler = getCompiler('./config-autoload/pkg/index.js', { postcssOptions: { - config: { - path: path.resolve(testDirectory, 'js/array'), - ctx: { parser: false, syntax: false }, - }, + config: path.resolve(testDirectory, 'pkg'), }, }); const stats = await compile(compiler); @@ -181,35 +128,34 @@ describe('"config" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "postcss.config.js" and the object syntax of the "plugin" option', async () => { - const compiler = getCompiler('./config-autoload/js/object/index.js', { + it('should work with the "postcssOptions" option', async () => { + const compiler = getCompiler('./config-scope/css/index.js', { postcssOptions: { - config: { - path: path.resolve(testDirectory, 'js/object'), - ctx: { parser: false, syntax: false }, - }, + config: true, + plugins: ['postcss-rtl'], }, }); const stats = await compile(compiler); - const codeFromBundle = getCodeFromBundle('index.css', stats); + 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 "package.json"', async () => { - const compiler = getCompiler('./config-autoload/pkg/index.js', { + it('should work with "String" value and respect all options', async () => { + const compiler = getCompiler('./sss/index.js', { postcssOptions: { - config: { - path: path.resolve(testDirectory, 'pkg'), - }, + config: path.resolve( + __dirname, + './fixtures/config-scope/all-options/postcss.config.js' + ), }, }); const stats = await compile(compiler); - const codeFromBundle = getCodeFromBundle('index.css', stats); + const codeFromBundle = getCodeFromBundle('style.sss', stats); expect(codeFromBundle.css).toMatchSnapshot('css'); expect(getWarnings(stats)).toMatchSnapshot('warnings'); @@ -221,7 +167,7 @@ describe('"config" option', () => { postcssOptions: { config: path.resolve( __dirname, - '../fixtures/config-scope/css/unresolve.js' + './fixtures/config-scope/css/unresolve.js' ), }, }); @@ -236,7 +182,7 @@ describe('"config" option', () => { postcssOptions: { config: path.resolve( __dirname, - '../fixtures/config-scope/css/invalid.config.js' + './fixtures/config-scope/css/invalid.config.js' ), }, }); @@ -245,38 +191,4 @@ describe('"config" option', () => { expect(getWarnings(stats)).toMatchSnapshot('warnings'); expect(getErrors(stats, true)).toMatchSnapshot('errors'); }); - - it('should work with the "postcssOptions" option', async () => { - const compiler = getCompiler('./config-scope/css/index.js', { - postcssOptions: { - config: true, - plugins: ['postcss-rtl'], - }, - }); - 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 "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'); - }); }); diff --git a/test/options/exec.test.js b/test/exec.test.js similarity index 76% rename from test/options/exec.test.js rename to test/exec.test.js index bd1b7f68..7100f0b5 100644 --- a/test/options/exec.test.js +++ b/test/exec.test.js @@ -6,10 +6,10 @@ import { getErrors, getCodeFromBundle, getWarnings, -} from '../helpers/index'; +} from './helpers'; -describe('Options Exec', () => { - it('should work Exec - {Boolean}', async () => { +describe('"exec" option', () => { + it('should work with "Boolean" value', async () => { const compiler = getCompiler( './jss/exec/index.js', {}, @@ -20,12 +20,14 @@ describe('Options Exec', () => { test: /style\.(exec\.js|js)$/i, use: [ { - loader: require.resolve('../helpers/testLoader'), + loader: require.resolve('./helpers/testLoader'), options: {}, }, { - loader: path.resolve(__dirname, '../../src'), - options: { exec: true }, + loader: path.resolve(__dirname, '../src'), + options: { + exec: true, + }, }, ], }, @@ -42,7 +44,7 @@ describe('Options Exec', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work JSS - {String}', async () => { + it('should work with "JSS" parser', async () => { const compiler = getCompiler( './jss/index.js', {}, @@ -53,11 +55,11 @@ describe('Options Exec', () => { test: /style\.js$/i, use: [ { - loader: require.resolve('../helpers/testLoader'), + loader: require.resolve('./helpers/testLoader'), options: {}, }, { - loader: path.resolve(__dirname, '../../src'), + loader: path.resolve(__dirname, '../src'), options: { postcssOptions: { parser: 'postcss-js', diff --git a/test/fixtures/config-autoload/js/array/postcss.config.js b/test/fixtures/config-autoload/js/array/postcss.config.js index 45a2b7c9..ae46c828 100644 --- a/test/fixtures/config-autoload/js/array/postcss.config.js +++ b/test/fixtures/config-autoload/js/array/postcss.config.js @@ -1,14 +1,18 @@ -module.exports = function (ctx) { +module.exports = function (api) { return { - parser: ctx.parser ? 'sugarss' : false, - syntax: ctx.syntax ? 'sugarss' : false, - map: ctx.map ? 'inline' : false, + parser: 'sugarss', + syntax: 'sugarss', + map: api.mode === 'development' ? 'inline' : false, from: './test/fixtures/config-autoload/js/object/index.css', to: './test/fixtures/config-autoload/js/object/expect/index.css', plugins: [ - require('postcss-import')(), - require('postcss-nested')(), - ctx.env === 'production' ? require('cssnano')() : false + 'postcss-import', + [ + 'postcss-nested', + { + // Options + } + ] ] } }; diff --git a/test/fixtures/config-autoload/js/object/postcss.config.js b/test/fixtures/config-autoload/js/object/postcss.config.js index 3ee56dc4..b7e044db 100644 --- a/test/fixtures/config-autoload/js/object/postcss.config.js +++ b/test/fixtures/config-autoload/js/object/postcss.config.js @@ -1,14 +1,13 @@ -module.exports = function (ctx) { +module.exports = function (api) { return { - parser: ctx.parser ? 'sugarss' : false, - syntax: ctx.syntax ? 'sugarss' : false, - map: ctx.map ? 'inline' : false, + parser: 'sugarss', + syntax: 'sugarss', + map: api.mode === 'development' ? 'inline' : false, from: './test/fixtures/config-autoload/js/object/index.css', to: './test/fixtures/config-autoload/js/object/expect/index.css', plugins: { 'postcss-import': {}, 'postcss-nested': {}, - 'cssnano': ctx.env === 'production' ? {} : false } } }; diff --git a/test/fixtures/config-autoload/pkg/package.json b/test/fixtures/config-autoload/pkg/package.json index c8178cc2..cfa3a81b 100644 --- a/test/fixtures/config-autoload/pkg/package.json +++ b/test/fixtures/config-autoload/pkg/package.json @@ -7,10 +7,9 @@ "map": false, "from": "./test/fixtures/config-autoload/pkg/index.css", "to": "./test/fixtures/config-autoload/pkg/expected/index.css", - "plugins": { - "postcss-import": {}, - "postcss-nested": {}, - "cssnano": false - } + "plugins": [ + "postcss-import", + ["postcss-nested", {}] + ] } } diff --git a/test/fixtures/config-autoload/rc/.postcssrc b/test/fixtures/config-autoload/rc/.postcssrc index a3383254..3c1b6b73 100644 --- a/test/fixtures/config-autoload/rc/.postcssrc +++ b/test/fixtures/config-autoload/rc/.postcssrc @@ -4,9 +4,8 @@ "map": false, "from": "./test/rc/fixtures/index.css", "to": "./test/rc/expect/index.css", - "plugins": { - "postcss-import": {}, - "postcss-nested": {}, - "cssnano": false - } + "plugins": [ + "postcss-import", + ["postcss-nested", {}] + ] } diff --git a/test/fixtures/config-scope/config/postcss.config.js b/test/fixtures/config-scope/config/postcss.config.js index 75904286..2fc48492 100644 --- a/test/fixtures/config-scope/config/postcss.config.js +++ b/test/fixtures/config-scope/config/postcss.config.js @@ -1,5 +1,5 @@ -module.exports = (ctx) => ({ +module.exports = () => ({ plugins: [ - ctx.options.plugin ? require('./plugin')() : false + require('./plugin')() ] }); diff --git a/test/loader.test.js b/test/loader.test.js index f11bddf9..2ef1bd13 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -10,21 +10,29 @@ import { 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: { - plugins: [], + parser: '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 emit warning', async () => { + it('should emit warning using the "messages" API', async () => { const plugin = () => (css, result) => { css.walkDecls((node) => { node.warn(result, ''); @@ -47,19 +55,7 @@ describe('loader', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should emit Syntax Error', async () => { - const compiler = getCompiler('./css/index.js', { - postcssOptions: { - parser: 'sugarss', - }, - }); - const stats = await compile(compiler); - - expect(getWarnings(stats)).toMatchSnapshot('warnings'); - expect(getErrors(stats)).toMatchSnapshot('errors'); - }); - - it('should emit asset', async () => { + it('should emit asset using the "messages" API', async () => { const plugin = () => (css, result) => { result.messages.push({ type: 'asset', diff --git a/test/options/__snapshots__/config.test.js.snap b/test/options/__snapshots__/config.test.js.snap deleted file mode 100644 index f53f1909..00000000 --- a/test/options/__snapshots__/config.test.js.snap +++ /dev/null @@ -1,213 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`"config" option should throw an error on the invalid config: errors 1`] = ` -Array [ - "ModuleBuildError: Module build failed (from \`replaced original path\`): -Error: invalid postcss config", -] -`; - -exports[`"config" option should throw an error on the invalid config: warnings 1`] = `Array []`; - -exports[`"config" option should throw an error on the unresolved config: errors 1`] = ` -Array [ - "ModuleBuildError: Module build failed (from \`replaced original path\`): -Error: No PostCSS Config found in: /test/fixtures/config-scope/css/unresolve.js", -] -`; - -exports[`"config" option should throw an error on the unresolved config: warnings 1`] = `Array []`; - -exports[`"config" option should work "string" value (relative path): css 1`] = ` -"a { color: rgba(0, 0, 0, 1.0) } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work "string" value (relative path): errors 1`] = `Array []`; - -exports[`"config" option should work "string" value (relative path): warnings 1`] = `Array []`; - -exports[`"config" option should work Config - Context - {Object}: css 1`] = ` -"a { color: rgba(0, 0, 0, 1.0) } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work Config - Context - {Object}: errors 1`] = `Array []`; - -exports[`"config" option should work Config - Context - {Object}: warnings 1`] = `Array []`; - -exports[`"config" option should work Config - Path - {String}: css 1`] = ` -"a { color: black } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work Config - Path - {String}: errors 1`] = `Array []`; - -exports[`"config" option should work Config - Path - {String}: warnings 1`] = `Array []`; - -exports[`"config" option should work Config – Context – Loader {Object}: errors 1`] = `Array []`; - -exports[`"config" option should work Config – Context – Loader {Object}: warnings 1`] = `Array []`; - -exports[`"config" option should work with "Object" value: css 1`] = ` -"a { color: rgba(0, 0, 0, 1.0) } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work with "Object" value: errors 1`] = `Array []`; - -exports[`"config" option should work with "Object" value: warnings 1`] = `Array []`; - -exports[`"config" option should work with "false" value: css 1`] = ` -"a { color: black } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work with "false" value: errors 1`] = `Array []`; - -exports[`"config" option should work with "false" value: warnings 1`] = `Array []`; - -exports[`"config" option should work with "package.json": css 1`] = ` -".import { - color: red; -} - -.test { - color: blue; -} -" -`; - -exports[`"config" option should work with "package.json": errors 1`] = `Array []`; - -exports[`"config" option should work with "package.json": warnings 1`] = `Array []`; - -exports[`"config" option should work with "postcss.config.js" and the array syntax of the "plugin" option: css 1`] = ` -".import { - color: red; -} - -.test { - color: cyan; -} -" -`; - -exports[`"config" option should work with "postcss.config.js" and the array syntax of the "plugin" option: errors 1`] = `Array []`; - -exports[`"config" option should work with "postcss.config.js" and the array syntax of the "plugin" option: warnings 1`] = `Array []`; - -exports[`"config" option should work with "postcss.config.js" and the object syntax of the "plugin" option: css 1`] = ` -".import { - color: red; -} - -.test { - color: blue; -} -" -`; - -exports[`"config" option should work with "postcss.config.js" and the object syntax of the "plugin" option: errors 1`] = `Array []`; - -exports[`"config" option should work with "postcss.config.js" and the object syntax of the "plugin" option: warnings 1`] = `Array []`; - -exports[`"config" option should work with "string" value (absolute path): css 1`] = ` -"a { color: rgba(0, 0, 0, 1.0) } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work with "string" value (absolute path): errors 1`] = `Array []`; - -exports[`"config" option should work with "string" value (absolute path): warnings 1`] = `Array []`; - -exports[`"config" option should work with "string" value (path to directory with the configuration): css 1`] = ` -"a { color: rgba(0, 0, 0, 1.0) } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work with "string" value (path to directory with the configuration): errors 1`] = `Array []`; - -exports[`"config" option should work with "string" value (path to directory with the configuration): warnings 1`] = `Array []`; - -exports[`"config" option should work with "string" value and respect all options: css 1`] = ` -"a { - color: black -} - -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLnNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0FBREYiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYVxuICBjb2xvcjogYmxhY2tcbiJdfQ== */" -`; - -exports[`"config" option should work with "string" value and respect all options: errors 1`] = `Array []`; - -exports[`"config" option should work with "string" value and respect all options: warnings 1`] = `Array []`; - -exports[`"config" option should work with "true" value: css 1`] = ` -"a { color: rgba(0, 0, 0, 1.0) } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work with "true" value: errors 1`] = `Array []`; - -exports[`"config" option should work with "true" value: warnings 1`] = `Array []`; - -exports[`"config" option should work with the "postcssOptions" option: css 1`] = ` -"a { color: rgba(0, 0, 0, 1.0) } - -[dir=ltr] .foo { float: right; -} - -[dir=rtl] .foo { - float: left; -} -" -`; - -exports[`"config" option should work with the "postcssOptions" option: errors 1`] = `Array []`; - -exports[`"config" option should work with the "postcssOptions" option: warnings 1`] = `Array []`; - -exports[`"config" option should work without the specified value: css 1`] = ` -"a { color: rgba(0, 0, 0, 1.0) } - -.foo { - float: right; -} -" -`; - -exports[`"config" option should work without the specified value: errors 1`] = `Array []`; - -exports[`"config" option should work without the specified value: warnings 1`] = `Array []`; diff --git a/test/options/__snapshots__/exec.test.js.snap b/test/options/__snapshots__/exec.test.js.snap deleted file mode 100644 index edc3fde8..00000000 --- a/test/options/__snapshots__/exec.test.js.snap +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Options Exec should work Exec - {Boolean}: css 1`] = ` -"a { - color: green -}" -`; - -exports[`Options Exec should work Exec - {Boolean}: errors 1`] = `Array []`; - -exports[`Options Exec should work Exec - {Boolean}: warnings 1`] = `Array []`; - -exports[`Options Exec should work JSS - {String}: css 1`] = ` -"a { - color: yellow -}" -`; - -exports[`Options Exec should work JSS - {String}: errors 1`] = `Array []`; - -exports[`Options Exec should work JSS - {String}: warnings 1`] = `Array []`; diff --git a/test/options/__snapshots__/parser.test.js.snap b/test/options/__snapshots__/parser.test.js.snap deleted file mode 100644 index 3b34136f..00000000 --- a/test/options/__snapshots__/parser.test.js.snap +++ /dev/null @@ -1,45 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Options Parser should throw an error on "unresolved" parser: errors 1`] = ` -Array [ - "ModuleBuildError: Module build failed (from \`replaced original path\`): -TypeError: parser is not a function", - "ModuleError: Module Error (from \`replaced original path\`): -Loading PostCSS \\"unresolved\\" parser failed: Cannot find module 'unresolved' from 'src/utils.js'", -] -`; - -exports[`Options Parser should throw an error on "unresolved" parser: warnings 1`] = `Array []`; - -exports[`Options Parser should work Parser - {Function}: css 1`] = ` -"a { - color: black -} -" -`; - -exports[`Options Parser should work Parser - {Function}: errors 1`] = `Array []`; - -exports[`Options Parser should work Parser - {Function}: warnings 1`] = `Array []`; - -exports[`Options Parser should work Parser - {Object}: css 1`] = ` -"a { - color: black -} -" -`; - -exports[`Options Parser should work Parser - {Object}: errors 1`] = `Array []`; - -exports[`Options Parser should work Parser - {Object}: warnings 1`] = `Array []`; - -exports[`Options Parser should work Parser - {String}: css 1`] = ` -"a { - color: black -} -" -`; - -exports[`Options Parser should work Parser - {String}: errors 1`] = `Array []`; - -exports[`Options Parser should work Parser - {String}: warnings 1`] = `Array []`; diff --git a/test/options/__snapshots__/syntax.test.js.snap b/test/options/__snapshots__/syntax.test.js.snap deleted file mode 100644 index 5610c828..00000000 --- a/test/options/__snapshots__/syntax.test.js.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Options Syntax should throw an error on "unresolved" syntax: errors 1`] = ` -Array [ - "ModuleBuildError: Module build failed (from \`replaced original path\`): -TypeError: Cannot read property 'parse' of undefined", - "ModuleError: Module Error (from \`replaced original path\`): -Loading PostCSS \\"unresolved\\" syntax failed: Cannot find module 'unresolved' from 'src/utils.js'", -] -`; - -exports[`Options Syntax should throw an error on "unresolved" syntax: warnings 1`] = `Array []`; - -exports[`Options Syntax should work Syntax - {Object}: css 1`] = ` -"a - color: black -" -`; - -exports[`Options Syntax should work Syntax - {Object}: errors 1`] = `Array []`; - -exports[`Options Syntax should work Syntax - {Object}: warnings 1`] = `Array []`; - -exports[`Options Syntax should work Syntax - {String}: css 1`] = ` -"a - color: black -" -`; - -exports[`Options Syntax should work Syntax - {String}: errors 1`] = `Array []`; - -exports[`Options Syntax should work Syntax - {String}: warnings 1`] = `Array []`; diff --git a/test/options/parser.test.js b/test/options/parser.test.js deleted file mode 100644 index 9ea7a050..00000000 --- a/test/options/parser.test.js +++ /dev/null @@ -1,161 +0,0 @@ -import path from 'path'; - -import { - compile, - getCompiler, - getErrors, - getCodeFromBundle, - getWarnings, -} from '../helpers/index'; - -describe('Options Parser', () => { - it('should work Parser - {String}', async () => { - const compiler = getCompiler( - './sss/index.js', - {}, - { - module: { - rules: [ - { - test: /\.sss$/i, - use: [ - { - loader: require.resolve('../helpers/testLoader'), - options: {}, - }, - { - loader: path.resolve(__dirname, '../../src'), - options: { - 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 Parser - {Object}', async () => { - const compiler = getCompiler( - './sss/index.js', - {}, - { - module: { - rules: [ - { - test: /\.sss$/i, - use: [ - { - loader: require.resolve('../helpers/testLoader'), - options: {}, - }, - { - loader: path.resolve(__dirname, '../../src'), - // eslint-disable-next-line global-require - options: { - postcssOptions: { - // eslint-disable-next-line global-require,import/no-dynamic-require - parser: require('sugarss'), - }, - }, - }, - ], - }, - ], - }, - } - ); - const stats = await compile(compiler); - - const codeFromBundle = getCodeFromBundle('style.sss', stats); - - expect(codeFromBundle.css).toMatchSnapshot('css'); - expect(getWarnings(stats)).toMatchSnapshot('warnings'); - expect(getErrors(stats)).toMatchSnapshot('errors'); - }); - - it('should work Parser - {Function}', async () => { - const compiler = getCompiler( - './sss/index.js', - {}, - { - module: { - rules: [ - { - test: /\.sss$/i, - use: [ - { - loader: require.resolve('../helpers/testLoader'), - options: {}, - }, - { - loader: path.resolve(__dirname, '../../src'), - // eslint-disable-next-line global-require - options: { - 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 on "unresolved" parser', async () => { - const compiler = getCompiler( - './sss/index.js', - {}, - { - module: { - rules: [ - { - test: /\.sss$/i, - use: [ - { - loader: require.resolve('../helpers/testLoader'), - options: {}, - }, - { - loader: path.resolve(__dirname, '../../src'), - options: { - postcssOptions: { - parser: 'unresolved', - }, - }, - }, - ], - }, - ], - }, - } - ); - - const stats = await compile(compiler); - - expect(getWarnings(stats)).toMatchSnapshot('warnings'); - expect(getErrors(stats, true)).toMatchSnapshot('errors'); - }); -}); diff --git a/test/options/syntax.test.js b/test/options/syntax.test.js deleted file mode 100644 index 4c6cdf96..00000000 --- a/test/options/syntax.test.js +++ /dev/null @@ -1,121 +0,0 @@ -import path from 'path'; - -import { - compile, - getCompiler, - getErrors, - getCodeFromBundle, - getWarnings, -} from '../helpers/index'; - -describe('Options Syntax', () => { - it('should work Syntax - {String}', async () => { - const compiler = getCompiler( - './sss/index.js', - {}, - { - module: { - rules: [ - { - test: /\.sss$/i, - use: [ - { - loader: require.resolve('../helpers/testLoader'), - options: {}, - }, - { - loader: path.resolve(__dirname, '../../src'), - options: { - 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 Syntax - {Object}', async () => { - const compiler = getCompiler( - './sss/index.js', - {}, - { - module: { - rules: [ - { - test: /\.sss$/i, - use: [ - { - loader: require.resolve('../helpers/testLoader'), - options: {}, - }, - { - loader: path.resolve(__dirname, '../../src'), - options: { - 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 on "unresolved" syntax', async () => { - const compiler = getCompiler( - './sss/index.js', - {}, - { - module: { - rules: [ - { - test: /\.sss$/i, - use: [ - { - loader: require.resolve('../helpers/testLoader'), - options: {}, - }, - { - loader: path.resolve(__dirname, '../../src'), - options: { - postcssOptions: { - syntax: 'unresolved', - }, - }, - }, - ], - }, - ], - }, - } - ); - const stats = await compile(compiler); - - expect(getWarnings(stats)).toMatchSnapshot('warnings'); - expect(getErrors(stats, true)).toMatchSnapshot('errors'); - }); -}); diff --git a/test/parser.test.js b/test/parser.test.js new file mode 100644 index 00000000..ff0c19ef --- /dev/null +++ b/test/parser.test.js @@ -0,0 +1,69 @@ +import { + compile, + getCompiler, + getErrors, + getCodeFromBundle, + getWarnings, +} from './helpers'; + +describe('"parser" option', () => { + it('should work 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 "Object" value', async () => { + const compiler = getCompiler('./sss/index.js', { + postcssOptions: { + // eslint-disable-next-line global-require,import/no-dynamic-require + parser: require('sugarss'), + }, + }); + const stats = await compile(compiler); + + const codeFromBundle = getCodeFromBundle('style.sss', stats); + + expect(codeFromBundle.css).toMatchSnapshot('css'); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); + + it('should work with "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 on "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'); + }); +}); diff --git a/test/options/plugins.test.js b/test/plugins.test.js similarity index 76% rename from test/options/plugins.test.js rename to test/plugins.test.js index d6fe8f7a..74fb2367 100644 --- a/test/options/plugins.test.js +++ b/test/plugins.test.js @@ -1,17 +1,19 @@ +import path from 'path'; + import { compile, getCompiler, getErrors, getCodeFromBundle, getWarnings, -} from '../helpers/index'; +} from './helpers'; -import myPostcssPlugin from '../fixtures/plugin/plugin'; +import myPostcssPlugin from './fixtures/plugin/plugin'; jest.setTimeout(30000); describe('"plugins" option', () => { - it('should work with "Array"', async () => { + it('should work with "Array" value', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { plugins: [ @@ -46,7 +48,7 @@ describe('"plugins" option', () => { }); }, }, - require.resolve('../fixtures/plugin/other-plugin'), + require.resolve('./fixtures/plugin/other-plugin'), myPostcssPlugin({ color: 'white', alpha: 0 }), { 'postcss-short': { prefix: 'z' } }, ], @@ -60,14 +62,14 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "Object"', async () => { + it('should work 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')]: {}, + [require.resolve('./fixtures/plugin/other-plugin')]: {}, }, }, }); @@ -80,7 +82,7 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with empty "Array"', async () => { + it('should work with empty "Array" value', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { plugins: [], @@ -95,7 +97,7 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with empty "Object"', async () => { + it('should work with empty "Object" value', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { plugins: {}, @@ -110,10 +112,26 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "Object" and support disabling plugins from the configuration', async () => { + it('should work 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 "Object" value and support disabling plugins from the configuration', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { - config: 'test/fixtures/css/plugins.config.js', + config: path.resolve(__dirname, './fixtures/css/plugins.config.js'), plugins: { 'postcss-short': false, }, @@ -128,7 +146,7 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "Object" and only disabled plugins', async () => { + it('should work with "Object" value and only disabled plugins', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { plugins: { @@ -147,7 +165,7 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "Array" and override the previous plugin options', async () => { + it('should work with "Array" value and override the previous plugin options', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { plugins: [ @@ -165,11 +183,14 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "Array", and config, and override the previous plugin options', async () => { + it('should work with "Object" value and override the previous plugin options', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { - config: 'test/fixtures/css/plugins.config.js', - plugins: [['postcss-short', { prefix: 'z' }]], + plugins: { + 'postcss-short': { prefix: 'x' }, + // eslint-disable-next-line no-dupe-keys + 'postcss-short': { prefix: 'z' }, + }, }, }); const stats = await compile(compiler); @@ -181,14 +202,11 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "Object" and override the previous plugin options', async () => { + it('should work with "Array" value, and config, 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' }, - }, + config: path.resolve(__dirname, './fixtures/css/plugins.config.js'), + plugins: [['postcss-short', { prefix: 'z' }]], }, }); const stats = await compile(compiler); @@ -200,10 +218,10 @@ describe('"plugins" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with "Object", and config, and override the previous plugin options', async () => { + it('should work with "Object" value, and config, and override the previous plugin options', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { - config: 'test/fixtures/css/plugins.config.js', + config: path.resolve(__dirname, './fixtures/css/plugins.config.js'), plugins: { 'postcss-short': { prefix: 'z' }, }, @@ -230,7 +248,7 @@ describe('"plugins" option', () => { expect(getErrors(stats, true)).toMatchSnapshot('errors'); }); - it('should work with "Array" and not throw an error on falsy plugin', async () => { + it('should work 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 diff --git a/test/options/postcssOptins.test.js b/test/postcssOptins.test.js similarity index 82% rename from test/options/postcssOptins.test.js rename to test/postcssOptins.test.js index 77492ea4..f9aa7c84 100644 --- a/test/options/postcssOptins.test.js +++ b/test/postcssOptins.test.js @@ -4,7 +4,7 @@ import { getErrors, getCodeFromBundle, getWarnings, -} from '../helpers/index'; +} from './helpers'; describe('"postcssOptions" option', () => { it('should work with "from", "to" and "map" options', async () => { @@ -41,7 +41,7 @@ describe('"postcssOptions" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work the the "map" option and generate inlined source maps', async () => { + 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 }, @@ -56,12 +56,12 @@ describe('"postcssOptions" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work when the "postcssOptions" option is "Function"', async () => { + 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')()], + plugins: [require('./fixtures/config-scope/config/plugin')()], }; }, }); @@ -74,12 +74,12 @@ describe('"postcssOptions" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work when the "postcssOptions" option is "Function" and the "plugins" option is "Array"', async () => { + 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')()], + plugins: [require('./fixtures/config-scope/config/plugin')()], }; }, }); @@ -91,12 +91,12 @@ describe('"postcssOptions" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work when the "postcssOptions" option is "Function" and the "plugins" option is "Object"', async () => { + 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')()], + plugins: [require('./fixtures/config-scope/config/plugin')()], }; }, }); diff --git a/test/options/sourceMap.test.js b/test/sourceMap.test.js similarity index 81% rename from test/options/sourceMap.test.js rename to test/sourceMap.test.js index 8b5c3030..69e4a815 100644 --- a/test/options/sourceMap.test.js +++ b/test/sourceMap.test.js @@ -11,10 +11,10 @@ import { getErrors, getCodeFromBundle, getWarnings, -} from '../helpers/index'; +} from './helpers'; describe('"sourceMap" option', () => { - it('should generate source maps when value has "true" value and the "devtool" option has "false" value', async () => { + it('should generate source maps with "true" value and the "devtool" with "false" value', async () => { const compiler = getCompiler( './css/index.js', { @@ -36,7 +36,7 @@ describe('"sourceMap" option', () => { ); return path - .relative(path.resolve(__dirname, '..'), source) + .relative(path.resolve(__dirname, './fixtures'), source) .replace(/\\/g, '/'); }); @@ -46,7 +46,7 @@ describe('"sourceMap" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should generate source maps when value has "true" value and the "devtool" option has "source-map" value', async () => { + it('should generate source maps with "true" value and the "devtool" option with "source-map" value', async () => { const compiler = getCompiler( './css/index.js', { @@ -68,7 +68,7 @@ describe('"sourceMap" option', () => { ); return path - .relative(path.resolve(__dirname, '..'), source) + .relative(path.resolve(__dirname, './fixtures'), source) .replace(/\\/g, '/'); }); @@ -78,7 +78,7 @@ describe('"sourceMap" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should generate source maps when value is not specified and the "devtool" option has "source-map" value', async () => { + it('should generate source maps when value is not specified and the "devtool" with "source-map" value', async () => { const compiler = getCompiler( './css/index.js', {}, @@ -98,7 +98,7 @@ describe('"sourceMap" option', () => { ); return path - .relative(path.resolve(__dirname, '..'), source) + .relative(path.resolve(__dirname, './fixtures'), source) .replace(/\\/g, '/'); }); @@ -108,7 +108,7 @@ describe('"sourceMap" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should generate source maps when value has "false" value, but the "postcssOptions.map" has values', async () => { + it('should generate source maps with "false" value, but the "postcssOptions.map" has values', async () => { const compiler = getCompiler( './css/index.js', { @@ -133,12 +133,10 @@ describe('"sourceMap" option', () => { expect(path.isAbsolute(source)).toBe(false); expect(source).toBe(path.normalize(source)); expect( - fs.existsSync(path.resolve(__dirname, '../fixtures/css', source)) + fs.existsSync(path.resolve(__dirname, './fixtures/css', source)) ).toBe(true); - return path - .relative(path.resolve(__dirname, '..'), source) - .replace(/\\/g, '/'); + return source.replace(/\\/g, '/'); }); expect(css).toMatchSnapshot('css'); @@ -147,7 +145,7 @@ describe('"sourceMap" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should generate source maps the "postcssOptions.map" has the "true" values and previous loader returns source maps ("sass-loader")', async () => { + 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', {}, @@ -159,11 +157,11 @@ describe('"sourceMap" option', () => { test: /\.scss$/i, use: [ { - loader: require.resolve('../helpers/testLoader'), + loader: require.resolve('./helpers/testLoader'), options: {}, }, { - loader: path.resolve(__dirname, '../../src'), + loader: path.resolve(__dirname, '../src'), options: { postcssOptions: { map: true, @@ -177,9 +175,9 @@ describe('"sourceMap" option', () => { implementation: require('sass'), sassOptions: { sourceMap: true, - outFile: path.join( + outFile: path.resolve( __dirname, - '../fixtures/scss/style.css.map' + './fixtures/scss/style.css.map' ), sourceMapContents: true, omitSourceMapUrl: true, @@ -202,7 +200,7 @@ describe('"sourceMap" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should generate source maps the "postcssOptions.map" has values and previous loader returns source maps ("sass-loader")', async () => { + 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', {}, @@ -214,11 +212,11 @@ describe('"sourceMap" option', () => { test: /\.scss$/i, use: [ { - loader: require.resolve('../helpers/testLoader'), + loader: require.resolve('./helpers/testLoader'), options: {}, }, { - loader: path.resolve(__dirname, '../../src'), + loader: path.resolve(__dirname, '../src'), options: { postcssOptions: { map: { @@ -236,9 +234,9 @@ describe('"sourceMap" option', () => { implementation: require('sass'), sassOptions: { sourceMap: true, - outFile: path.join( + outFile: path.resolve( __dirname, - '../fixtures/scss/style.css.map' + './fixtures/scss/style.css.map' ), sourceMapContents: true, omitSourceMapUrl: true, @@ -259,12 +257,10 @@ describe('"sourceMap" option', () => { sourceMap.sources = sourceMap.sources.map((source) => { expect(path.isAbsolute(source)).toBe(false); expect( - fs.existsSync(path.resolve(__dirname, '../fixtures/scss', source)) + fs.existsSync(path.resolve(__dirname, './fixtures/scss', source)) ).toBe(true); - return path - .relative(path.resolve(__dirname, '..'), source) - .replace(/\\/g, '/'); + return source.replace(/\\/g, '/'); }); expect(css).toMatchSnapshot('css'); @@ -273,6 +269,61 @@ describe('"sourceMap" option', () => { 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, + }, + { + 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, + }, + { + 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', + {}, + { + 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', @@ -285,11 +336,11 @@ describe('"sourceMap" option', () => { test: /\.scss$/i, use: [ { - loader: require.resolve('../helpers/testLoader'), + loader: require.resolve('./helpers/testLoader'), options: {}, }, { - loader: path.resolve(__dirname, '../../src'), + loader: path.resolve(__dirname, '../src'), options: {}, }, { @@ -317,7 +368,7 @@ describe('"sourceMap" option', () => { ); return path - .relative(path.resolve(__dirname, '..'), source) + .relative(path.resolve(__dirname, './fixtures'), source) .replace(/\\/g, '/'); }); @@ -341,11 +392,11 @@ describe('"sourceMap" option', () => { test: /\.less$/i, use: [ { - loader: require.resolve('../helpers/testLoader'), + loader: require.resolve('./helpers/testLoader'), options: {}, }, { - loader: path.resolve(__dirname, '../../src'), + loader: path.resolve(__dirname, '../src'), }, { loader: 'less-loader', @@ -368,7 +419,7 @@ describe('"sourceMap" option', () => { ); return path - .relative(path.resolve(__dirname, '..'), source) + .relative(path.resolve(__dirname, './fixtures'), source) .replace(/\\/g, '/'); }); @@ -377,59 +428,4 @@ describe('"sourceMap" option', () => { expect(getWarnings(stats)).toMatchSnapshot('warnings'); expect(getErrors(stats)).toMatchSnapshot('errors'); }); - - it('should not generate source maps when value has "false" value and the "devtool" option has "false" value', async () => { - const compiler = getCompiler( - './css/index.js', - { - sourceMap: false, - }, - { - 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 when value has "false" value and the "devtool" option has "source-map" value', async () => { - const compiler = getCompiler( - './css/index.js', - { - sourceMap: false, - }, - { - 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 has "source-map" value', async () => { - const compiler = getCompiler( - './css/index.js', - {}, - { - 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'); - }); }); diff --git a/test/options/stringifier.test.js b/test/stringifier.test.js similarity index 88% rename from test/options/stringifier.test.js rename to test/stringifier.test.js index 8be949ee..1103e5da 100644 --- a/test/options/stringifier.test.js +++ b/test/stringifier.test.js @@ -4,10 +4,10 @@ import { getErrors, getCodeFromBundle, getWarnings, -} from '../helpers/index'; +} from './helpers'; -describe('Options Stringifier', () => { - it('should work Stringifier - {String}', async () => { +describe('"stringifier" option', () => { + it('should work with "String" value', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { stringifier: 'sugarss', @@ -22,7 +22,7 @@ describe('Options Stringifier', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work Stringifier - {Object}', async () => { + it('should work "Object" value', async () => { const compiler = getCompiler('./css/index.js', { postcssOptions: { // eslint-disable-next-line global-require @@ -38,7 +38,7 @@ describe('Options Stringifier', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work Stringifier - {Function}', async () => { + it('should work "Function" value', async () => { // eslint-disable-next-line global-require const Midas = require('midas'); const midas = new Midas(); diff --git a/test/syntax.test.js b/test/syntax.test.js new file mode 100644 index 00000000..7089e4cc --- /dev/null +++ b/test/syntax.test.js @@ -0,0 +1,53 @@ +import { + compile, + getCompiler, + getErrors, + getCodeFromBundle, + getWarnings, +} from './helpers'; + +describe('"syntax" option', () => { + it('should work 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 "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 on "unresolved" syntax', async () => { + const compiler = getCompiler('./sss/index.js', { + postcssOptions: { + syntax: 'unresolved', + }, + }); + const stats = await compile(compiler); + + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats, true)).toMatchSnapshot('errors'); + }); +}); diff --git a/test/validate-options.test.js b/test/validate-options.test.js index 18248c66..bebe9358 100644 --- a/test/validate-options.test.js +++ b/test/validate-options.test.js @@ -38,15 +38,10 @@ describe('validate options', () => { { config: false }, { config: 'test/fixtures/config-scope/config/postcss.config.js' }, { - config: { - path: 'test/fixtures/config-scope/config/postcss.config.js', - }, - }, - { - config: { - path: 'test/fixtures/config-scope/config/postcss.config.js', - ctx: { plugin: true }, - }, + config: path.resolve( + __dirname, + './fixtures/config-scope/config/postcss.config.js' + ), }, ], failure: [