diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md deleted file mode 100644 index 8e3ceb2d..00000000 --- a/.github/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,39 +0,0 @@ -Briefly describe the issue you are experiencing (or the feature you want to see -added to the plugin). Tell us what you were trying to do and what happened -instead. Remember, this is _not_ a place to ask questions. For that, go to -http://gitter.im/postcss/postcss - -### `Details` ---- - -Describe in more detail the problem you have been experiencing, if necessary. - -### `Error (Logs|Stacks)` ---- - -Create a [gist](https://gist.github.com) which is a paste of your **full** -logs, and link them here. - -Do **not** paste your full logs here (or at least hide them by using a `
` block), as it will make this issue long and hard -to read! If you are reporting a bug, **always** include logs! - -### `Reproduction [Code]` ---- - -Please remember that, with sample code; it's easier to reproduce bug and much -faster to fix it. - -Please refer to a simple code example. - -```bash -$ git clone https://github.com// -``` - -### `Environment` ---- - -Please provide information about your environment. - -|OS|node|npm|PostCSS| -|:-:|:--:|:-:|:------:| -|[name][version]|[version]|[version]|[version]| diff --git a/.github/ISSUE_TEMPLATE/BUG.md b/.github/ISSUE_TEMPLATE/BUG.md new file mode 100644 index 00000000..76e39d50 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/BUG.md @@ -0,0 +1,34 @@ +--- +name: πŸ› Bug +about: Report a Bug +--- + + + +### Details + + + +### Error (Logs|Stacks) + + + + + +### Reproduction (Code) + + + + + +```bash +$ git clone https://github.com// +``` + +### Environment + + + +|OS|node|npm/yarn|package| +|:-:|:--:|:-:|:------:| +|[name][version]|[version]|[version]|[version]| diff --git a/.github/ISSUE_TEMPLATE/DOCS.md b/.github/ISSUE_TEMPLATE/DOCS.md new file mode 100644 index 00000000..079242ff --- /dev/null +++ b/.github/ISSUE_TEMPLATE/DOCS.md @@ -0,0 +1,30 @@ +--- +name: πŸ“– Docs +about: Report documentation related issues +--- + +### Type + + + +- [ ] Other +- [ ] Wrong +- [ ] Unclear +- [ ] Missing + +### Details + + + +### Location + + + +- [ ] README +- [ ] LICENSE +- [ ] CHANGELOG +- [ ] ISSUE_TEMPLATE + - [ ] BUG + - [ ] DOCS + - [ ] FEATURE +- [ ] PULL_REQUEST_TEMPLATE diff --git a/.github/ISSUE_TEMPLATE/FEATURE.md b/.github/ISSUE_TEMPLATE/FEATURE.md new file mode 100644 index 00000000..a4e981ef --- /dev/null +++ b/.github/ISSUE_TEMPLATE/FEATURE.md @@ -0,0 +1,22 @@ +--- +name: 🌟 Feature +about: Request a feature +--- + +### Proposal + + + +### Use Case + + + +### Implementation + + + +- [ ] I'm open to work on this + - [ ] I need help/mentorship +- [ ] I'm unable to work on this + + diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index f8fd00e1..db913f82 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,50 +1,63 @@ -> ℹ️ Describe the big picture of your changes here to communicate to the maintainers -why we should accept this pull request. If it fixes a bug or resolves a feature -request, be sure to link to that issue. +### Notable Changes -### `Type` ---- + -> ℹ️ What types of changes does your code introduce? +#### `Commit Message Summary (CHANGELOG)` -> _Put an `x` in the boxes that apply_ + + + +```bash +# Commit Message Body +# +# Example +BREAKING CHANGE: requires `node >= v8.0.0` +BREAKING CHANGE: `options.x` requires to be a `{Function}` now +``` + +### Type + +> ℹ️ What type of changes does your code introduce? + + + +- [ ] CI - [ ] Fix - [ ] Perf - [ ] Docs - [ ] Test +- [ ] Style +- [ ] Build - [ ] Chore - [ ] Feature - [ ] Refactor -### `SemVer` ---- +### Issues -> ℹ️ What changes to the current `semver` range does your PR introduce? +> ℹ️ What issue(s) (if any) are closed by your PR? -> _Put an `x` in the boxes that apply_ + -- [ ] Bug (:label: Patch) -- [ ] Feature (:label: Minor) -- [ ] Breaking Change (:label: Major) +- Fixes `#1` -### `Issues` ---- +### SemVer -> ℹ️ What issue (if any) are closed by your PR? +> ℹ️ What changes to the current `semver` range does your PR introduce? -> _Replace `#1` with the error number that applies_ + -- Fixes `#1` +- [ ] Fix (:label: Patch) +- [ ] Feature (:label: Minor) +- [ ] Breaking Change (:label: Major) -### `Checklist` ---- +### Checklist > ℹ️ You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. This is a reminder of what we are going to look for before merging your code. -> _Put an `x` in the boxes that apply._ + - [ ] Lint and unit tests pass with my changes -- [ ] I have added tests that prove my fix is effective/works +- [ ] I have added tests that prove my fix is effective/works (if needed) - [ ] I have added necessary documentation (if appropriate) - [ ] Any dependent changes are merged and published in downstream modules diff --git a/LOADER.md b/LOADER.md deleted file mode 100644 index 8f64d78f..00000000 --- a/LOADER.md +++ /dev/null @@ -1,46 +0,0 @@ - - -## loader(css, map) β‡’ cb -PostCSS Loader - -> Loads && processes CSS with [PostCSS](https://github.com/postcss/postcss) - -**Kind**: global function -**Returns**: cb - cb Result -**Requires**: module:path, module:loader-utils, module:schema-utils, module:postcss, module:postcss-load-config, module:Error -**Version**: 2.0.0 -**Author**: Andrey Sitnik (@ai) -**License**: MIT - -| Param | Type | Description | -| --- | --- | --- | -| css | String | Source | -| map | Object | Source Map | - - -* [loader(css, map)](#loader) β‡’ cb - * [.cb](#loader.cb) : function - * [.cb](#loader.cb) : function - - - -### loader.cb : function -**Kind**: static typedef of [loader](#loader) - -| Param | Type | Description | -| --- | --- | --- | -| null | Object | Error | -| result | String | Result (JS Module) | -| map | Object | Source Map | - - - -### loader.cb : function -**Kind**: static typedef of [loader](#loader) - -| Param | Type | Description | -| --- | --- | --- | -| null | Object | Error | -| css | String | Result (Raw Module) | -| map | Object | Source Map | - diff --git a/README.md b/README.md index f7546968..6b03ad79 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ npm i -D postcss-loader ### `Configuration` -**postcss.config.js** +**`postcss.config.js`** ```js module.exports = { parser: 'sugarss', @@ -72,7 +72,7 @@ Config lookup starts from `path.dirname(file)` and walks the file tree upwards u 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 **after** `css-loader` and `style-loader`, but **before** other preprocessor loaders like e.g `sass|less|stylus-loader`, if you use any. -**webpack.config.js** +**`webpack.config.js`** ```js module.exports = { module: { @@ -88,7 +88,7 @@ module.exports = { > ⚠️ When `postcss-loader` is used standalone (without `css-loader`) don't use `@import` in your CSS, since this can lead to quite bloated bundles -**webpack.config.js (recommended)** +**`webpack.config.js` (recommended)** ```js module.exports = { module: { @@ -122,6 +122,7 @@ module.exports = { If you use JS styles without the [`postcss-js`][postcss-js] parser, add the `exec` option. +**`webpack.config.js`** ```js { test: /\.style.js$/, @@ -148,7 +149,7 @@ You can manually specify the path to search for your config (`postcss.config.js` > ⚠️ 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 -**webpack.config.js** +**`webpack.config.js`** ```js { loader: 'postcss-loader', @@ -173,7 +174,7 @@ You can manually specify the path to search for your config (`postcss.config.js` `postcss-loader` exposes context `ctx` to the config file, making your `postcss.config.js` dynamic, so can use it to do some real magic ✨ -**postcss.config.js** +**`postcss.config.js`** ```js module.exports = ({ file, options, env }) => ({ parser: file.extname === '.sss' ? 'sugarss' : false, @@ -185,7 +186,7 @@ module.exports = ({ file, options, env }) => ({ }) ``` -**webpack.config.js** +**`webpack.config.js`** ```js { loader: 'postcss-loader', @@ -202,7 +203,7 @@ module.exports = ({ file, options, env }) => ({ ### `Plugins` -**webpack.config.js** +**`webpack.config.js`** ```js { loader: 'postcss-loader', @@ -229,7 +230,7 @@ module.exports = ({ file, options, env }) => ({ #### `Parser` -**webpack.config.js** +**`webpack.config.js`** ```js { test: /\.sss$/, @@ -242,7 +243,7 @@ module.exports = ({ file, options, env }) => ({ #### `Syntax` -**webpack.config.js** +**`webpack.config.js`** ```js { test: /\.css$/, @@ -255,7 +256,7 @@ module.exports = ({ file, options, env }) => ({ #### `Stringifier` -**webpack.config.js** +**`webpack.config.js`** ```js { test: /\.css$/, @@ -270,7 +271,7 @@ module.exports = ({ file, options, env }) => ({ Enables source map support, `postcss-loader` will use the previous source map given by other loaders and update it accordingly, if no previous loader is applied before `postcss-loader`, the loader will generate a source map for you. -**webpack.config.js** +**`webpack.config.js`** ```js { test: /\.css/, @@ -288,7 +289,7 @@ Enables source map support, `postcss-loader` will use the previous source map gi You can set the `sourceMap: 'inline'` option to inline the source map within the CSS directly as an annotation comment. -**webpack.config.js** +**`webpack.config.js`** ```js { loader: 'postcss-loader', @@ -308,7 +309,7 @@ within the CSS directly as an annotation comment. ### `Stylelint` -**webpack.config.js** +**`webpack.config.js`** ```js { test: /\.css$/, @@ -330,9 +331,9 @@ within the CSS directly as an annotation comment. } ``` -### Autoprefixing +### `Autoprefixing` -**webpack.config.js** +**`webpack.config.js`** ```js { test: /\.css$/, @@ -361,7 +362,7 @@ 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. -**webpack.config.js** +**`webpack.config.js`** ```js { test: /\.css$/, @@ -386,6 +387,7 @@ If you want to process styles written in JavaScript, use the [postcss-js] parser [postcss-js]: https://github.com/postcss/postcss-js +**`webpack.config.js`** ```js { test: /\.style.js$/, @@ -425,10 +427,11 @@ export default { [ExtractPlugin]: https://github.com/webpack-contrib/mini-css-extract-plugin -**webpack.config.js** +**`webpack.config.js`** ```js -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const devMode = process.env.NODE_ENV !== 'production'; +const devMode = process.env.NODE_ENV !== 'production' + +const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { module: { @@ -438,14 +441,14 @@ module.exports = { use: [ devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', - 'postcss-loader', + 'postcss-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ - filename: devMode ? '[name].css' : '[name].[hash].css', + filename: devMode ? '[name].css' : '[name].[hash].css' }) ] } diff --git a/docs/LOADER.md b/docs/LOADER.md new file mode 100644 index 00000000..deb2d04d --- /dev/null +++ b/docs/LOADER.md @@ -0,0 +1,130 @@ +## Modules + +
+
postcss-loader
+
+
+ +## Classes + +
+
SyntaxError ⇐ Error
+
+
Warning ⇐ Error
+
+
+ +## Functions + +
+
loader(css, map) β‡’ cb
+

PostCSS Loader

+

Loads && processes CSS with PostCSS

+
+
parseOptions(exec, parser, syntax, stringifier, plugins) β‡’ Promise
+

PostCSS Options Parser

+

Transforms the loader options into a valid postcss config {Object}

+
+
+ + + +## postcss-loader +**Requires**: module:path, module:loader-utils, module:schema-utils, module:postcss, module:postcss-load-config, module:./options.js, module:./Warning.js, module:./SyntaxError.js +**Version**: 3.0.0 +**Author**: Andrey Sitnik (@ai) +**License**: MIT + + +## SyntaxError ⇐ Error +**Kind**: global class +**Extends**: Error + + +### new SyntaxError(err) +**PostCSS Syntax Error** + +Loader wrapper for postcss syntax errors + + +| Param | Type | Description | +| --- | --- | --- | +| err | Object | CssSyntaxError | + + + +## Warning ⇐ Error +**Kind**: global class +**Extends**: Error + + +### new Warning(warning) +**PostCSS Plugin Warning** + +Loader wrapper for postcss plugin warnings (`root.messages`) + + +| Param | Type | Description | +| --- | --- | --- | +| warning | Object | PostCSS Warning | + + + +## loader(css, map) β‡’ cb +**PostCSS Loader** + +Loads && processes CSS with [PostCSS](https://github.com/postcss/postcss) + +**Kind**: global function +**Returns**: cb - cb Result + +| Param | Type | Description | +| --- | --- | --- | +| css | String | Source | +| map | Object | Source Map | + + +* [loader(css, map)](#loader) β‡’ cb + * [.cb](#loader.cb) : function + * [.cb](#loader.cb) : function + + + +### loader.cb : function +**Kind**: static typedef of [loader](#loader) + +| Param | Type | Description | +| --- | --- | --- | +| null | Object | Error | +| css | String | Result (JS Module) | +| map | Object | Source Map | + + + +### loader.cb : function +**Kind**: static typedef of [loader](#loader) + +| Param | Type | Description | +| --- | --- | --- | +| null | Object | Error | +| css | String | Result (Raw Module) | +| map | Object | Source Map | + + + +## parseOptions(exec, parser, syntax, stringifier, plugins) β‡’ Promise +**PostCSS Options Parser** + +Transforms the loader options into a valid postcss config `{Object}` + +**Kind**: global function +**Returns**: Promise - PostCSS Config + +| Param | Type | Description | +| --- | --- | --- | +| exec | Boolean | Execute CSS-in-JS | +| parser | String \| Object | PostCSS Parser | +| syntax | String \| Object | PostCSS Syntax | +| stringifier | String \| Object | PostCSS Stringifier | +| plugins | Array \| Object \| function | PostCSS Plugins | + diff --git a/lib/Error.js b/lib/Error.js deleted file mode 100644 index 05ea46ea..00000000 --- a/lib/Error.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict' - -class SyntaxError extends Error { - constructor (err) { - super(err) - - this.name = 'Syntax Error' - - this.message = '' - this.message += `${this.name} \n\n(${err.line}:${err.column}) ${err.reason}` - this.message += `\n\n${err.showSourceCode()}\n` - - this.stack = false - } -} - -module.exports = SyntaxError diff --git a/lib/options.js b/lib/options.js deleted file mode 100644 index 980e9366..00000000 --- a/lib/options.js +++ /dev/null @@ -1,25 +0,0 @@ -'use strict' - -module.exports = function parseOptions (params) { - if (typeof params.plugins === 'function') { - params.plugins = params.plugins.call(this, this) - } - - let plugins - - if (typeof params.plugins === 'undefined') plugins = [] - else if (Array.isArray(params.plugins)) plugins = params.plugins - else plugins = [ params.plugins ] - - const options = {} - - if (typeof params !== 'undefined') { - options.parser = params.parser - options.syntax = params.syntax - options.stringifier = params.stringifier - } - - const exec = params && params.exec - - return Promise.resolve({ options: options, plugins: plugins, exec: exec }) -} diff --git a/lib/options.json b/lib/options.json deleted file mode 100644 index e4546157..00000000 --- a/lib/options.json +++ /dev/null @@ -1,43 +0,0 @@ -{ - "type": "object", - "properties": { - "config": { - "type": "object", - "properties": { - "path": { - "type": "string" - }, - "ctx": { - "type": "object" - } - }, - "additionalProperties": false - }, - "exec": { - "type": "boolean" - }, - "ident": { - "type": "string" - }, - "parser": { - "type": [ "string", "object" ] - }, - "syntax": { - "type": [ "string", "object" ] - }, - "stringifier": { - "type": [ "string", "object" ] - }, - "plugins": { - "anyOf": [ - { "type": "array" }, - { "type": "object" }, - { "instanceof": "Function" } - ] - }, - "sourceMap": { - "type": [ "string", "boolean" ] - } - }, - "additionalProperties": true -} diff --git a/package.json b/package.json index 4d26c130..0ebf1bbb 100644 --- a/package.json +++ b/package.json @@ -2,35 +2,34 @@ "name": "postcss-loader", "version": "2.1.6", "description": "PostCSS loader for webpack", - "main": "lib/index.js", + "main": "src/index.js", "files": [ - "lib" + "src" ], "engines": { - "node": ">= 4" + "node": ">= 6" }, "dependencies": { "loader-utils": "^1.1.0", - "postcss": "^6.0.0", + "postcss": "^7.0.0", "postcss-load-config": "^2.0.0", - "schema-utils": "^0.4.0" + "schema-utils": "^1.0.0" }, "devDependencies": { - "jest": "^22.0.0", + "@webpack-utilities/test": "^1.0.0-alpha.0", + "jest": "^23.0.0", "jsdoc-to-markdown": "^4.0.0", - "memory-fs": "^0.4.0", "postcss-import": "^11.0.0", - "postcss-js": "^1.0.0", + "postcss-js": "^2.0.0", "standard": "^11.0.0", "standard-version": "^4.0.0", "sugarss": "^1.0.0", - "util.promisify": "^1.0.0", - "webpack": "^3.0.0" + "webpack": "^4.0.0" }, "scripts": { "lint": "standard --env jest", - "test": "jest --env=node --verbose --coverage", - "docs": "jsdoc2md lib/index.js > LOADER.md", + "test": "jest --env node --verbose --coverage", + "docs": "jsdoc2md src/*.js > docs/LOADER.md", "clean": "rm -rf coverage test/outputs", "release": "standard-version" }, diff --git a/src/Error.js b/src/Error.js new file mode 100644 index 00000000..db05aac3 --- /dev/null +++ b/src/Error.js @@ -0,0 +1,37 @@ +/** + * **PostCSS Syntax Error** + * + * Loader wrapper for postcss syntax errors + * + * @class SyntaxError + * @extends Error + * + * @param {Object} err CssSyntaxError + */ +class SyntaxError extends Error { + constructor (error) { + super(error) + + const { line, column, reason } = error + + this.name = 'SyntaxError' + + this.message = `${this.name}\n\n` + + if (typeof line !== 'undefined') { + this.message += `(${line}:${column}) ` + } + + this.message += `${reason}` + + const code = error.showSourceCode() + + if (code) { + this.message += `\n\n${code}\n` + } + + this.stack = false + } +} + +module.exports = SyntaxError diff --git a/src/Warning.js b/src/Warning.js new file mode 100644 index 00000000..2355f4f5 --- /dev/null +++ b/src/Warning.js @@ -0,0 +1,31 @@ +/** + * **PostCSS Plugin Warning** + * + * Loader wrapper for postcss plugin warnings (`root.messages`) + * + * @class Warning + * @extends Error + * + * @param {Object} warning PostCSS Warning + */ +class Warning extends Error { + constructor (warning) { + super(warning) + + const { text, line, column } = warning + + this.name = 'Warning' + + this.message = `${this.name}\n\n` + + if (typeof line !== 'undefined') { + this.message += `(${line}:${column}) ` + } + + this.message += `${text}` + + this.stack = false + } +} + +module.exports = Warning diff --git a/lib/index.js b/src/index.js similarity index 64% rename from lib/index.js rename to src/index.js index 5dc545e2..bb576c32 100644 --- a/lib/index.js +++ b/src/index.js @@ -1,46 +1,29 @@ -'use strict' - const path = require('path') -const loaderUtils = require('loader-utils') - -const parseOptions = require('./options') +const { getOptions } = require('loader-utils') const validateOptions = require('schema-utils') const postcss = require('postcss') const postcssrc = require('postcss-load-config') -const SyntaxError = require('./Error') +const Warning = require('./Warning.js') +const SyntaxError = require('./Error.js') +const parseOptions = require('./options.js') /** - * PostCSS Loader - * - * > Loads && processes CSS with [PostCSS](https://github.com/postcss/postcss) - * - * @author Andrey Sitnik (@ai) - * - * @license MIT - * @version 2.0.0 - * - * @requires path + * **PostCSS Loader** * - * @requires loader-utils - * @requires schema-utils - * - * @requires postcss - * @requires postcss-load-config - * - * @requires Error + * Loads && processes CSS with [PostCSS](https://github.com/postcss/postcss) * * @method loader * - * @param {String} css Source - * @param {Object} map Source Map + * @param {String} css Source + * @param {Object} map Source Map * - * @return {cb} cb Result + * @return {cb} cb Result */ -module.exports = function loader (css, map, meta) { - const options = Object.assign({}, loaderUtils.getOptions(this)) +function loader (css, map, meta) { + const options = Object.assign({}, getOptions(this)) validateOptions(require('./options.json'), options, 'PostCSS Loader') @@ -94,16 +77,25 @@ module.exports = function loader (css, map, meta) { return postcssrc(rc.ctx, rc.path) }).then((config) => { - if (!config) config = {} + if (!config) { + config = {} + } - if (config.file) this.addDependency(config.file) + if (config.file) { + this.addDependency(config.file) + } // Disable override `to` option from `postcss.config.js` - if (config.options.to) delete config.options.to + if (config.options.to) { + delete config.options.to + } // Disable override `from` option from `postcss.config.js` - if (config.options.from) delete config.options.from + if (config.options.from) { + delete config.options.from + } let plugins = config.plugins || [] + let options = Object.assign({ from: file, map: sourceMap @@ -137,39 +129,57 @@ module.exports = function loader (css, map, meta) { css = this.exec(css, this.resource) } - if (sourceMap && typeof map === 'string') map = JSON.parse(map) - if (sourceMap && map) options.map.prev = map + if (sourceMap && typeof map === 'string') { + map = JSON.parse(map) + } + + if (sourceMap && map) { + options.map.prev = map + } return postcss(plugins) .process(css, options) .then((result) => { - result.warnings().forEach((msg) => this.emitWarning(msg.toString())) + let { css, map, root, processor, messages } = result - result.messages.forEach((msg) => { - if (msg.type === 'dependency') this.addDependency(msg.file) + result.warnings().forEach((warning) => { + this.emitWarning(new Warning(warning)) }) - css = result.css - map = result.map ? result.map.toJSON() : null + messages.forEach((msg) => { + if (msg.type === 'dependency') { + this.addDependency(msg.file) + } + }) + + map = map ? map.toJSON() : null if (map) { map.file = path.resolve(map.file) map.sources = map.sources.map((src) => path.resolve(src)) } - if (!meta) meta = {} + if (!meta) { + meta = {} + } + + const ast = { + type: 'postcss', + version: processor.version, + root + } - meta.ast = { 'type': 'postcss', root: result.root } - meta.messages = result.messages + meta.ast = ast + meta.messages = messages if (this.loaderIndex === 0) { /** * @memberof loader * @callback cb * - * @param {Object} null Error - * @param {String} result Result (JS Module) - * @param {Object} map Source Map + * @param {Object} null Error + * @param {String} css Result (JS Module) + * @param {Object} map Source Map */ cb(null, `module.exports = ${JSON.stringify(css)}`, map) @@ -189,8 +199,34 @@ module.exports = function loader (css, map, meta) { return null }) }).catch((err) => { - if (err.file) this.addDependency(err.file) + if (err.file) { + this.addDependency(err.file) + } - return err.name === 'CssSyntaxError' ? cb(new SyntaxError(err)) : cb(err) + return err.name === 'CssSyntaxError' + ? cb(new SyntaxError(err)) + : cb(err) }) } + +/** + * @author Andrey Sitnik (@ai) + * + * @license MIT + * @version 3.0.0 + * + * @module postcss-loader + * + * @requires path + * + * @requires loader-utils + * @requires schema-utils + * + * @requires postcss + * @requires postcss-load-config + * + * @requires ./options.js + * @requires ./Warning.js + * @requires ./SyntaxError.js + */ +module.exports = loader diff --git a/src/options.js b/src/options.js new file mode 100644 index 00000000..fbe71369 --- /dev/null +++ b/src/options.js @@ -0,0 +1,36 @@ +/** + * **PostCSS Options Parser** + * + * Transforms the loader options into a valid postcss config `{Object}` + * + * @method parseOptions + * + * @param {Boolean} exec Execute CSS-in-JS + * @param {String|Object} parser PostCSS Parser + * @param {String|Object} syntax PostCSS Syntax + * @param {String|Object} stringifier PostCSS Stringifier + * @param {Array|Object|Function} plugins PostCSS Plugins + * + * @return {Promise} PostCSS Config + */ +function parseOptions ({ exec, parser, syntax, stringifier, plugins }) { + if (typeof plugins === 'function') { + plugins = plugins.call(this, this) + } + + if (typeof plugins === 'undefined') { + plugins = [] + } else if (!Array.isArray(plugins)) { + plugins = [ plugins ] + } + + const options = {} + + options.parser = parser + options.syntax = syntax + options.stringifier = stringifier + + return Promise.resolve({ options, plugins, exec }) +} + +module.exports = parseOptions diff --git a/src/options.json b/src/options.json new file mode 100644 index 00000000..1141d84a --- /dev/null +++ b/src/options.json @@ -0,0 +1,57 @@ +{ + "type": "object", + "properties": { + "config": { + "type": "object", + "properties": { + "path": { + "type": "string" + }, + "ctx": { + "type": "object" + } + }, + "errorMessage": { + "properties": { + "ctx": "should be {Object} (https://github.com/postcss/postcss-loader#context-ctx)", + "path": "should be {String} (https://github.com/postcss/postcss-loader#path)" + } + }, + "additionalProperties": false + }, + "exec": { + "type": "boolean" + }, + "parser": { + "type": [ "string", "object" ] + }, + "syntax": { + "type": [ "string", "object" ] + }, + "stringifier": { + "type": [ "string", "object" ] + }, + "plugins": { + "anyOf": [ + { "type": "array" }, + { "type": "object" }, + { "instanceof": "Function" } + ] + }, + "sourceMap": { + "type": [ "string", "boolean" ] + } + }, + "errorMessage": { + "properties": { + "exec": "should be {Boolean} (https://github.com/postcss/postcss-loader#exec)", + "config": "should be {Object} (https://github.com/postcss/postcss-loader#config)", + "parser": "should be {String|Object} (https://github.com/postcss/postcss-loader#parser)", + "syntax": "should be {String|Object} (https://github.com/postcss/postcss-loader#syntax)", + "stringifier": "should be {String|Object} (https://github.com/postcss/postcss-loader#stringifier)", + "plugins": "should be {Array|Object|Function} (https://github.com/postcss/postcss-loader#plugins)", + "sourceMap": "should be {String|Boolean} (https://github.com/postcss/postcss-loader#sourcemap)" + } + }, + "additionalProperties": true +} diff --git a/test/Errors.test.js b/test/Errors.test.js index da8b4cb9..5379df1d 100644 --- a/test/Errors.test.js +++ b/test/Errors.test.js @@ -1,21 +1,41 @@ -'use strict' - -const webpack = require('./helpers/compiler') -const { loader } = require('./helpers/compilation') +const { webpack } = require('@webpack-utilities/test') describe('Errors', () => { test('Validation Error', () => { - const loader = require('../lib') + const config = { + loader: { + test: /\.css$/, + options: { + sourceMap: 1 + } + } + } + + return webpack('css/index.js', config).then((stats) => { + const { source } = stats.toJson().modules[1] - const error = () => loader.call({ query: { sourceMap: 1 } }) + // eslint-disable-next-line + const error = () => eval(source) - expect(error).toThrow() - expect(error).toThrowErrorMatchingSnapshot() + expect(error).toThrow() + + try { + error() + } catch (err) { + const message = err.message + .split('\n\n') + .slice(1, -1) + .join('\n\n') + + expect(message).toMatchSnapshot() + } + }) }) test('Syntax Error', () => { const config = { loader: { + test: /\.css$/, options: { parser: 'sugarss' } @@ -23,9 +43,23 @@ describe('Errors', () => { } return webpack('css/index.js', config).then((stats) => { - const error = loader(stats).err + const { source } = stats.toJson().modules[1] - expect(error[0]).toMatchSnapshot() + // eslint-disable-next-line + const error = () => eval(source) + + expect(error).toThrow() + + try { + error() + } catch (err) { + const message = err.message + .split('\n') + .slice(1) + .join('\n') + + expect(message).toMatchSnapshot() + } }) }) }) diff --git a/test/Warnings.test.js b/test/Warnings.test.js new file mode 100644 index 00000000..7c5875b7 --- /dev/null +++ b/test/Warnings.test.js @@ -0,0 +1,33 @@ +const { webpack } = require('@webpack-utilities/test') + +const plugin = (options = {}) => (css, result) => { + css.walkDecls((node) => { + node.warn(result, '') + }) +} + +describe('Warnings', () => { + test('Plugins', () => { + const config = { + loader: { + test: /\.css$/, + options: { + plugins: [ + plugin() + ] + } + } + } + + return webpack('css/index.js', config).then((stats) => { + const warning = stats.compilation.warnings[0] + + const message = warning.message + .split('\n') + .slice(1) + .join('\n') + + expect(message).toMatchSnapshot() + }) + }) +}) diff --git a/test/__snapshots__/Errors.test.js.snap b/test/__snapshots__/Errors.test.js.snap index cba7269b..b3651a12 100644 --- a/test/__snapshots__/Errors.test.js.snap +++ b/test/__snapshots__/Errors.test.js.snap @@ -1,19 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Errors Syntax Error 1`] = ` -[ModuleBuildError: Module build failed: Syntax Error +"SyntaxError (1:3) Unexpected separator in property > 1 | a { color: black }  |  ^  2 |  -] -`; - -exports[`Errors Validation Error 1`] = ` -"PostCSS Loader Invalid Options - -options.sourceMap should be string,boolean " `; + +exports[`Errors Validation Error 1`] = `"options.sourceMap should be {String|Boolean} (https://github.com/postcss/postcss-loader#sourcemap)"`; diff --git a/test/__snapshots__/Warnings.test.js.snap b/test/__snapshots__/Warnings.test.js.snap new file mode 100644 index 00000000..9524418a --- /dev/null +++ b/test/__snapshots__/Warnings.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Warnings Plugins 1`] = ` +"Warning + +(1:5) " +`; diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index b88ef9ef..97a69ae8 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -1,9 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loader Default 1`] = `"module.exports = \\"a { color: black }\\\\n\\""`; - -exports[`Loader Watching Dependencies Error 1`] = `"module.exports = \\"a { color: black }\\\\n\\""`; - -exports[`Loader Watching Dependencies Error 2`] = `"throw new Error(\\"Module build failed: Syntax Error \\\\n\\\\n(1:5) Unknown word\\\\n\\\\n\\\\u001b[31m\\\\u001b[1m>\\\\u001b[22m\\\\u001b[39m\\\\u001b[90m 1 | \\\\u001b[39ma \\\\u001b[33m{\\\\u001b[39m color black \\\\u001b[33m}\\\\u001b[39m\\\\n \\\\u001b[90m | \\\\u001b[39m \\\\u001b[31m\\\\u001b[1m^\\\\u001b[22m\\\\u001b[39m\\\\n \\\\u001b[90m 2 | \\\\u001b[39m\\\\n\\");"`; - -exports[`Loader Watching Dependencies Error 3`] = `"module.exports = \\"a { color: black }\\\\n\\""`; diff --git a/test/fixtures/watch/error.css b/test/fixtures/watch/error.css deleted file mode 100644 index 4943cb88..00000000 --- a/test/fixtures/watch/error.css +++ /dev/null @@ -1 +0,0 @@ -a { color black } diff --git a/test/fixtures/watch/index.css b/test/fixtures/watch/index.css deleted file mode 100644 index fa33ad5f..00000000 --- a/test/fixtures/watch/index.css +++ /dev/null @@ -1 +0,0 @@ -a { color: black } diff --git a/test/fixtures/watch/index.js b/test/fixtures/watch/index.js deleted file mode 100644 index 61e122b2..00000000 --- a/test/fixtures/watch/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import style from './style.css' - -export default style diff --git a/test/fixtures/watch/style.css b/test/fixtures/watch/style.css deleted file mode 100644 index 40d6c214..00000000 --- a/test/fixtures/watch/style.css +++ /dev/null @@ -1 +0,0 @@ -@import "./import"; diff --git a/test/helpers/compilation.js b/test/helpers/compilation.js deleted file mode 100644 index 2f61ffbf..00000000 --- a/test/helpers/compilation.js +++ /dev/null @@ -1,66 +0,0 @@ -'use strict' - -const loader = (stats) => { - const modules = stats.compilation.modules - - return { - err: modules.map((module) => module.errors)[1], - src: modules.map((module) => module._source._value)[1], - map: modules.map((module) => module._source._sourceMap)[1], - meta: modules.map((module) => module.meta), - warnings: modules.map((module) => module.warnings)[1] - } -} - -const loaders = (stats, i) => { - const modules = stats.compilation.modules - - return i >= 0 - ? { - err: modules.map((module) => module.errors)[i], - src: modules.map((module) => module._source._value)[i], - map: modules.map((module) => module._source._sourceMap)[i], - meta: modules.map((module) => module.meta)[i], - warning: modules.map((module) => module.warnings)[i] - } - : { - err: modules.map((module) => module.errors), - src: modules.map((module) => module._source._value), - map: modules.map((module) => module._source._sourceMap), - meta: modules.map((module) => module.meta), - warning: modules.map((module) => module.warnings) - } -} - -const assets = (stats, i) => { - const asset = (asset) => { - if (/map/.test(asset)) return false - return stats.compilation.assets[asset].sourceAndMap() - } - - const assets = Object.keys(stats.compilation.assets) - .map(asset) - .filter(Boolean) - - return i >= 0 ? assets[i] : assets -} - -const errors = (stats, i) => { - const errors = stats.compilation.errors - - return i >= 0 ? errors[i] : errors -} - -const warnings = (stats, i) => { - const warnings = stats.compilation.warnings - - return i >= 0 ? warnings[i] : warnings -} - -module.exports = { - loader, - loaders, - assets, - errors, - warnings -} diff --git a/test/helpers/compiler.js b/test/helpers/compiler.js deleted file mode 100644 index bef499a2..00000000 --- a/test/helpers/compiler.js +++ /dev/null @@ -1,63 +0,0 @@ -'use strict' - -const path = require('path') -const webpack = require('webpack') -const MemoryFS = require('memory-fs') - -module.exports = function compiler (fixture, config, options) { - config = { - devtool: config.devtool || 'sourcemap', - context: path.resolve(__dirname, '..', 'fixtures'), - entry: `./${fixture}`, - output: { - path: path.resolve( - __dirname, - `../outputs/${config.path ? config.path : ''}` - ), - filename: '[name].bundle.js' - }, - module: { - rules: config.rules || config.loader - ? [ - { - test: config.loader.test || /\.(css|sss)$/, - use: { - loader: path.resolve(__dirname, '../../lib'), - options: config.loader.options || {} - } - } - ] - : [] - }, - plugins: [ - new webpack.optimize.CommonsChunkPlugin({ - name: [ 'runtime' ], - minChunks: Infinity - }) - ].concat(config.plugins || []) - } - - options = Object.assign({ emit: false }, options) - - const compiler = webpack(config) - - if (!options.emit) compiler.outputFileSystem = new MemoryFS() - - if (options.watch) { - return new Promise((resolve, reject) => { - const watcher = compiler.watch({}, (err, stats) => { - options.watch(err, stats, () => { - watcher.close(resolve) - }) - }) - }) - } else { - return new Promise((resolve, reject) => { - return compiler.run((err, stats) => { - if (err) reject(err) - - resolve(stats) - }) - }) - } -} diff --git a/test/helpers/fs.js b/test/helpers/fs.js deleted file mode 100644 index 9c806461..00000000 --- a/test/helpers/fs.js +++ /dev/null @@ -1,38 +0,0 @@ -const path = require('path') -const promisify = require('util.promisify') - -const { - unlink: _unlink, - readFile: _readFile, - writeFile: _writeFile -} = require('fs') - -const fs = { - readFile: promisify(_readFile), - writeFile: promisify(_writeFile), - unlink: promisify(_unlink) -} - -function readFile (name) { - const file = path.join(__dirname, '../fixtures', name) - - return fs.readFile(file) - .then((data) => data.toString()) -} - -function writeFile (name, data) { - const file = path.join(__dirname, '../fixtures', name) - - return fs.writeFile(file, data) -} - -module.exports.copyFile = function copyFile (src, dest) { - return readFile(src) - .then((data) => writeFile(dest, data)) -} - -module.exports.deleteFile = function deleteFile (name) { - const file = path.join(__dirname, '../fixtures', name) - - return fs.unlink(file) -} diff --git a/test/loader.test.js b/test/loader.test.js index d3296840..8c8ae36d 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -1,13 +1,10 @@ -'use strict' - -const webpack = require('./helpers/compiler') -const { loader } = require('./helpers/compilation') -const { copyFile, deleteFile } = require('./helpers/fs') +const { webpack } = require('@webpack-utilities/test') describe('Loader', () => { test('Default', () => { const config = { loader: { + test: /\.css$/, options: { plugins: [] } @@ -15,80 +12,10 @@ describe('Loader', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src - - expect(src).toEqual('module.exports = "a { color: black }\\n"') - expect(src).toMatchSnapshot() - }) - }) - - describe('Watching', () => { - describe('Dependencies', () => { - const files = { - css: 'watch/index.css', - error: 'watch/error.css', - changed: 'watch/import.css' - } - - beforeEach(() => copyFile(files.css, files.changed)) - - afterEach(() => deleteFile(files.changed)) - - test('Error', () => { - const config = { - loader: { - options: { - plugins: [ - require('postcss-import') - ] - } - } - } - - const steps = [ - (stats) => { - const { err, src } = loader(stats) - - expect(src).toMatchSnapshot() - expect(err.length).toEqual(0) - - return copyFile(files.error, files.changed) - }, - (stats) => { - const { err, src } = loader(stats) - - expect(src).toMatchSnapshot() - expect(err.length).toEqual(1) - - return copyFile(files.css, files.changed) - }, - (stats, close) => { - const { err, src } = loader(stats) - - expect(src).toMatchSnapshot() - expect(src).toEqual('module.exports = "a { color: black }\\n"') - expect(err.length).toEqual(0) - - return close() - } - ] - - let step = 0 - - const options = { - watch (err, stats, close) { - if (err) { - throw err - } - - steps[step](stats, close) - - step++ - } - } + const { source } = stats.toJson().modules[1] - return webpack('watch/index.js', config, options) - }) + expect(source).toEqual('module.exports = "a { color: black }\\n"') + expect(source).toMatchSnapshot() }) }) }) diff --git a/test/options/config.test.js b/test/options/config.test.js index 9bb52a31..d9025a99 100644 --- a/test/options/config.test.js +++ b/test/options/config.test.js @@ -1,25 +1,28 @@ -'use strict' - -const webpack = require('../helpers/compiler') -const { loader } = require('../helpers/compilation') +const { webpack } = require('@webpack-utilities/test') describe('Options', () => { test('Config - {Object}', () => { const config = { - loader: {} + loader: { + test: /\.css$/ + } } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] + + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"' + ) - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() }) }) test('Config - Path - {String}', () => { const config = { loader: { + test: /\.css$/, options: { config: { path: 'test/fixtures/config/postcss.config.js' } } @@ -27,16 +30,17 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a { color: black }\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual('module.exports = "a { color: black }\\n"') + expect(source).toMatchSnapshot() }) }) test('Config - Context - {Object}', () => { const config = { loader: { + test: /\.css$/, options: { config: { path: 'test/fixtures/config/postcss.config.js', @@ -47,16 +51,20 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"' + ) + + expect(source).toMatchSnapshot() }) }) test('Config - Context - {Object} - with ident', () => { const config = { loader: { + test: /\.css$/, options: { ident: 'postcss', config: { @@ -68,16 +76,20 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] + + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"' + ) - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() }) }) - test('Pass loader object to config context', () => { + test('Config – Context – Loader {Object}', () => { const config = { loader: { + test: /\.css$/, options: { config: { path: 'test/fixtures/config/context/postcss.config.js' @@ -87,11 +99,12 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const assets = stats.compilation.assets - const expectedAssetName = 'asset.txt' + const { assets } = stats.compilation + + const asset = 'asset.txt' - expect(expectedAssetName in assets).toBeTruthy() - expect(assets[expectedAssetName].source()).toBe('123') + expect(asset in assets).toBeTruthy() + expect(assets[asset].source()).toBe('123') }) }) }) diff --git a/test/options/exec.test.js b/test/options/exec.test.js index ac61490e..45716078 100644 --- a/test/options/exec.test.js +++ b/test/options/exec.test.js @@ -1,7 +1,4 @@ -'use strict' - -const webpack = require('../helpers/compiler') -const { loader } = require('../helpers/compilation') +const { webpack } = require('@webpack-utilities/test') describe('Options', () => { test('Exec - {Boolean}', () => { @@ -15,10 +12,13 @@ describe('Options', () => { } return webpack('jss/exec/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] + + expect(source).toEqual( + 'module.exports = "a {\\n color: green\\n}"' + ) - expect(src).toEqual('module.exports = "a {\\n color: green\\n}"') - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() }) }) @@ -32,9 +32,9 @@ describe('Options', () => { } return webpack('jss/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() }) }) }) diff --git a/test/options/parser.test.js b/test/options/parser.test.js index 58e3ecf4..2480744a 100644 --- a/test/options/parser.test.js +++ b/test/options/parser.test.js @@ -1,12 +1,10 @@ -'use strict' - -const webpack = require('../helpers/compiler') -const { loader } = require('../helpers/compilation') +const { webpack } = require('@webpack-utilities/test') describe('Options', () => { test('Parser - {String}', () => { const config = { loader: { + test: /\.sss$/, options: { parser: 'sugarss' } @@ -14,16 +12,17 @@ describe('Options', () => { } return webpack('sss/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a {\\n color: black\\n}\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual('module.exports = "a {\\n color: black\\n}\\n"') + expect(source).toMatchSnapshot() }) }) test('Parser - {Object}', () => { const config = { loader: { + test: /\.sss$/, options: { ident: 'postcss', parser: require('sugarss') @@ -32,10 +31,10 @@ describe('Options', () => { } return webpack('sss/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a {\\n color: black\\n}\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual('module.exports = "a {\\n color: black\\n}\\n"') + expect(source).toMatchSnapshot() }) }) }) diff --git a/test/options/plugins.test.js b/test/options/plugins.test.js index bc98ad3c..0f700b68 100644 --- a/test/options/plugins.test.js +++ b/test/options/plugins.test.js @@ -1,12 +1,10 @@ -'use strict' - -const webpack = require('../helpers/compiler') -const { loader } = require('../helpers/compilation') +const { webpack } = require('@webpack-utilities/test') describe('Options', () => { test('Plugins - {Array}', () => { const config = { loader: { + test: /\.css$/, options: { ident: 'postcss', plugins: [ require('../fixtures/config/plugin')() ] @@ -15,16 +13,20 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] + + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"' + ) - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() }) }) test('Plugins - {Object}', () => { const config = { loader: { + test: /\.css$/, options: { ident: 'postcss', plugins: require('../fixtures/config/plugin') @@ -33,16 +35,20 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] + + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"' + ) - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() }) }) test('Plugins - {Function} - {Array}', () => { const config = { loader: { + test: /\.css$/, options: { ident: 'postcss', plugins: () => [ require('../fixtures/config/plugin')() ] @@ -51,16 +57,20 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"' + ) + + expect(source).toMatchSnapshot() }) }) test('Plugins - {Function} - {Object}', () => { const config = { loader: { + test: /\.css$/, options: { ident: 'postcss', plugins: () => require('../fixtures/config/plugin')() @@ -69,10 +79,13 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] + + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"' + ) - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() }) }) }) diff --git a/test/options/sourceMap.test.js b/test/options/sourceMap.test.js index 3669127a..b321c77f 100644 --- a/test/options/sourceMap.test.js +++ b/test/options/sourceMap.test.js @@ -1,13 +1,12 @@ -'use strict' - const path = require('path') -const webpack = require('../helpers/compiler') -const { loader } = require('../helpers/compilation') +const { webpack } = require('@webpack-utilities/test') describe('Options', () => { test('Sourcemap - {Boolean}', () => { const config = { + devtool: 'sourcemap', loader: { + test: /\.css$/, options: { sourceMap: true } @@ -15,15 +14,20 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] + + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"' + ) - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() - const map = loader(stats).map + const map = stats.compilation.modules[1]._source._sourceMap - map.file = path.relative(__dirname, map.file) - map.sources = map.sources.map((src) => path.relative(__dirname, src)) + map.file = path.posix.relative(__dirname, map.file) + map.sources = map.sources.map( + (src) => path.posix.relative(__dirname, src) + ) expect(map).toMatchSnapshot() }) @@ -32,6 +36,7 @@ describe('Options', () => { test('Sourcemap - {String}', () => { const config = { loader: { + test: /\.css$/, options: { sourceMap: 'inline' } @@ -39,10 +44,13 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] + + expect(source).toEqual( + 'module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvY3NzL3N0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFJLDJCQUFZLEVBQUUiLCJmaWxlIjoidGVzdC9maXh0dXJlcy9jc3Mvc3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7IGNvbG9yOiBibGFjayB9XG4iXX0= */"' + ) - expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvY3NzL3N0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFJLDJCQUFZLEVBQUUiLCJmaWxlIjoidGVzdC9maXh0dXJlcy9jc3Mvc3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7IGNvbG9yOiBibGFjayB9XG4iXX0= */"') - expect(src).toMatchSnapshot() + expect(source).toMatchSnapshot() }) }) }) diff --git a/test/options/stringifier.test.js b/test/options/stringifier.test.js index bf94b46a..e8c37288 100644 --- a/test/options/stringifier.test.js +++ b/test/options/stringifier.test.js @@ -1,12 +1,10 @@ -'use strict' - -const webpack = require('../helpers/compiler') -const { loader } = require('../helpers/compilation') +const { webpack } = require('@webpack-utilities/test') describe('Options', () => { test('Stringifier - {String}', () => { const config = { loader: { + test: /\.css$/, options: { stringifier: 'sugarss' } @@ -14,16 +12,17 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a color: black\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual('module.exports = "a color: black\\n"') + expect(source).toMatchSnapshot() }) }) test('Stringifier - {Object}', () => { const config = { loader: { + test: /\.css$/, options: { ident: 'postcss', stringifier: require('sugarss') @@ -32,10 +31,10 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a color: black\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual('module.exports = "a color: black\\n"') + expect(source).toMatchSnapshot() }) }) }) diff --git a/test/options/syntax.test.js b/test/options/syntax.test.js index 27d152cc..45617909 100644 --- a/test/options/syntax.test.js +++ b/test/options/syntax.test.js @@ -1,12 +1,10 @@ -'use strict' - -const webpack = require('../helpers/compiler') -const { loader } = require('../helpers/compilation') +const { webpack } = require('@webpack-utilities/test') describe('Options', () => { test('Syntax - {String}', () => { const config = { loader: { + test: /\.sss$/, options: { syntax: 'sugarss' } @@ -14,16 +12,17 @@ describe('Options', () => { } return webpack('sss/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a\\n color: black\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual('module.exports = "a\\n color: black\\n"') + expect(source).toMatchSnapshot() }) }) test('Syntax - {Object}', () => { const config = { loader: { + test: /\.sss$/, options: { ident: 'postcss', syntax: require('sugarss') @@ -32,10 +31,10 @@ describe('Options', () => { } return webpack('sss/index.js', config).then((stats) => { - const src = loader(stats).src + const { source } = stats.toJson().modules[1] - expect(src).toEqual('module.exports = "a\\n color: black\\n"') - expect(src).toMatchSnapshot() + expect(source).toEqual('module.exports = "a\\n color: black\\n"') + expect(source).toMatchSnapshot() }) }) })