From 5c1c10834fa072785a9d73a0e5cfe75318b1f9c3 Mon Sep 17 00:00:00 2001 From: Yury Timofeev Date: Mon, 16 Jul 2018 18:00:55 +0300 Subject: [PATCH 01/27] docs(README): clarify `path` option description (`options.config.path`) (#371) --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a3465703..b53e640b 100644 --- a/README.md +++ b/README.md @@ -137,7 +137,7 @@ If you use JS styles without the [`postcss-js`][postcss-js] parser, add the `exe |Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| -|[`path`](#path)|`{String}`|`undefined`|PostCSS Config Path| +|[`path`](#path)|`{String}`|`undefined`|PostCSS Config Directory| |[`context`](#context)|`{Object}`|`undefined`|PostCSS Config Context| #### `Path` @@ -146,18 +146,23 @@ You can manually specify the path to search for your config (`postcss.config.js` > ⚠️ Otherwise it is **unnecessary** to set this option and is **not** 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 + **webpack.config.js** ```js { loader: 'postcss-loader', options: { config: { - path: 'path/to/postcss.config.js' + path: 'path/to/.config/' ✅ + path: 'path/to/.config/css.config.js' ❌ } } } ``` +[supported config formats]: https://github.com/michael-ciniawsky/postcss-load-config#usage + #### `Context (ctx)` |Name|Type|Default|Description| From 060e3cbb216dcf24ccac13528a1b06b9aaf4aa2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Fri, 27 Jul 2018 02:20:56 +0200 Subject: [PATCH 02/27] docs(README): resolve http redirects and use https (#377) --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b53e640b..89f47b96 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@
PostCSS Logo + src="https://api.postcss.org/logo.svg"> @@ -20,7 +20,7 @@

PostCSS Loader

-

Loader for webpack to process CSS with PostCSS

+

Loader for webpack to process CSS with PostCSS

Install

@@ -356,7 +356,7 @@ 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/outpunk/postcss-modules +[postcss-modules]: https://github.com/css-modules/postcss-modules ### `CSS-in-JS` @@ -461,7 +461,7 @@ module.exports = { [deps]: https://david-dm.org/postcss/postcss-loader.svg [deps-url]: https://david-dm.org/postcss/postcss-loader -[tests]: http://img.shields.io/travis/postcss/postcss-loader.svg +[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 From e44fed65402c6ce456aab9cb15234cf280298383 Mon Sep 17 00:00:00 2001 From: Alexander Ergin Date: Wed, 1 Aug 2018 21:08:14 +0500 Subject: [PATCH 03/27] docs(README): update extract CSS example (#378) --- README.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 89f47b96..2dbf2d62 100644 --- a/README.md +++ b/README.md @@ -401,29 +401,30 @@ export default { ### [Extract CSS][ExtractPlugin] -[ExtractPlugin]: https://github.com/webpack-contrib/extract-text-webpack-plugin +[ExtractPlugin]: https://github.com/webpack-contrib/mini-css-extract-plugin **webpack.config.js** ```js -const ExtractTextPlugin = require('extract-text-webpack-plugin') +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const devMode = process.env.NODE_ENV !== 'production'; module.exports = { module: { rules: [ { test: /\.css$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: [ - { loader: 'css-loader', options: { importLoaders: 1 } }, - 'postcss-loader' - ] - }) + use: [ + devMode ? 'style-loader' : MiniCssExtractPlugin.loader, + 'css-loader', + 'postcss-loader', + ] } ] }, plugins: [ - new ExtractTextPlugin('[name].css') + new MiniCssExtractPlugin({ + filename: devMode ? '[name].css' : '[name].[hash].css', + }) ] } ``` From 5e2bca9f34ff93e99f8bac744960371026d2587d Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Fri, 3 Aug 2018 15:53:20 +0200 Subject: [PATCH 04/27] docs(README): replace `postcss-cssnext` with `postcss-preset-env` (#379) --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 2dbf2d62..6a25d4f1 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ module.exports = { parser: 'sugarss', plugins: { 'postcss-import': {}, - 'postcss-cssnext': {}, + 'postcss-preset-env': {}, 'cssnano': {} } } @@ -179,8 +179,7 @@ module.exports = ({ file, options, env }) => ({ parser: file.extname === '.sss' ? 'sugarss' : false, plugins: { 'postcss-import': { root: file.dirname }, - 'postcss-cssnext': options.cssnext ? options.cssnext : false, - 'autoprefixer': env === 'production' ? options.autoprefixer : false, + 'postcss-preset-env': options.presetEnv ? options.presetEnv : false, 'cssnano': env === 'production' ? options.cssnano : false } }) @@ -212,7 +211,7 @@ module.exports = ({ file, options, env }) => ({ ident: 'postcss', plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), - require('postcss-cssnext')(), + require('postcss-preset-env')(), require('autoprefixer')(), require('cssnano')() ] From 0bb835cd487b7583d359ff47a59a1c638ae9fd7e Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 03:51:58 +0200 Subject: [PATCH 05/27] ci(package): run tests in an explicit environment (`jest --env=node`) (#382) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 91f7872d..4d26c130 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ }, "scripts": { "lint": "standard --env jest", - "test": "jest --verbose --coverage", + "test": "jest --env=node --verbose --coverage", "docs": "jsdoc2md lib/index.js > LOADER.md", "clean": "rm -rf coverage test/outputs", "release": "standard-version" From 6f10898e5c8ca22ca84f4279dd91c2688a21f5b5 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 03:59:17 +0200 Subject: [PATCH 06/27] ci(appveyor): readd Appveyor CI (#381) --- appveyor.yml | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 appveyor.yml diff --git a/appveyor.yml b/appveyor.yml new file mode 100644 index 00000000..9b3b9f50 --- /dev/null +++ b/appveyor.yml @@ -0,0 +1,21 @@ +init: + - git config --global core.autocrlf input + +build: 'off' + +matrix: + fast_finish: true + +environment: + matrix: + - nodejs_version: '10' + - nodejs_version: '8' + - nodejs_version: '6' + +install: + - ps: Install-Product node $env:nodejs_version x64 + - npm i -g npm + - npm i + +test_script: + - npm t From 8ef443fe7555bf928585691003473db7cd6a2e35 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 04:23:26 +0200 Subject: [PATCH 07/27] ci(travis): build stages --- .travis.yml | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index 04451558..5262a9a8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,13 +1,25 @@ language: node_js -node_js: - - stable - - lts/* - - 6 +jobs: + fast_finish: true + include: + - stage: Lint + env: SCRIPT=lint + node_js: 'stable' + - &test + stage: 'Test' + env: SCRIPT=test + node_js: 'stable' + - <<: *test + node_js: 'lts/*' + - <<: *test + node_js: 6 + +script: npm run $SCRIPT after_success: - npm i coveralls - - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js + - cat ./coverage/lcov.info | $(npm bin)/coveralls notifications: email: false From 877281480682c3a056c319870927f850e3c29648 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 06:35:34 +0200 Subject: [PATCH 08/27] style(standard): fix linting issues --- lib/index.js | 2 +- test/fixtures/config/context/plugin.js | 8 ++--- test/loader.test.js | 18 ++++++----- test/options/config.test.js | 41 +++++++++++++------------- test/options/exec.test.js | 14 ++++----- test/options/parser.test.js | 16 +++++----- test/options/plugins.test.js | 32 ++++++++++---------- test/options/sourceMap.test.js | 24 +++++++-------- test/options/stringifier.test.js | 16 +++++----- test/options/syntax.test.js | 16 +++++----- 10 files changed, 95 insertions(+), 92 deletions(-) diff --git a/lib/index.js b/lib/index.js index 623ff184..5dc545e2 100644 --- a/lib/index.js +++ b/lib/index.js @@ -90,7 +90,7 @@ module.exports = function loader (css, map, meta) { } } - rc.ctx.webpack = this; + rc.ctx.webpack = this return postcssrc(rc.ctx, rc.path) }).then((config) => { diff --git a/test/fixtures/config/context/plugin.js b/test/fixtures/config/context/plugin.js index 027eb431..17164458 100644 --- a/test/fixtures/config/context/plugin.js +++ b/test/fixtures/config/context/plugin.js @@ -5,11 +5,11 @@ const postcss = require('postcss') // This plugin creates asset file in webpack compilation module.exports = postcss.plugin('plugin', (ctx) => { ctx.webpack._compilation.assets['asset.txt'] = { - source() { - return '123'; + source () { + return '123' }, - size() { - return 0; + size () { + return 0 } } }) diff --git a/test/loader.test.js b/test/loader.test.js index c7f1cf7d..d3296840 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -2,7 +2,7 @@ const webpack = require('./helpers/compiler') const { loader } = require('./helpers/compilation') -const { copyFile, deleteFile } = require('./helpers/fs'); +const { copyFile, deleteFile } = require('./helpers/fs') describe('Loader', () => { test('Default', () => { @@ -15,11 +15,11 @@ describe('Loader', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: black }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: black }\\n"') + expect(src).toMatchSnapshot() + }) }) describe('Watching', () => { @@ -40,7 +40,7 @@ describe('Loader', () => { options: { plugins: [ require('postcss-import') - ], + ] } } } @@ -66,7 +66,7 @@ describe('Loader', () => { const { err, src } = loader(stats) expect(src).toMatchSnapshot() - expect(src).toEqual("module.exports = \"a { color: black }\\n\"") + expect(src).toEqual('module.exports = "a { color: black }\\n"') expect(err.length).toEqual(0) return close() @@ -77,6 +77,10 @@ describe('Loader', () => { const options = { watch (err, stats, close) { + if (err) { + throw err + } + steps[step](stats, close) step++ diff --git a/test/options/config.test.js b/test/options/config.test.js index cc98c00c..9bb52a31 100644 --- a/test/options/config.test.js +++ b/test/options/config.test.js @@ -10,11 +10,11 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: rgba(255, 0, 0, 1.0) }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') + expect(src).toMatchSnapshot() + }) }) test('Config - Path - {String}', () => { @@ -27,11 +27,11 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: black }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: black }\\n"') + expect(src).toMatchSnapshot() + }) }) test('Config - Context - {Object}', () => { @@ -47,14 +47,13 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: rgba(255, 0, 0, 1.0) }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') + expect(src).toMatchSnapshot() + }) }) - test('Config - Context - {Object} - with ident', () => { const config = { loader: { @@ -69,11 +68,11 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: rgba(255, 0, 0, 1.0) }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') + expect(src).toMatchSnapshot() + }) }) test('Pass loader object to config context', () => { @@ -88,11 +87,11 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const assets = stats.compilation.assets; - const expectedAssetName = 'asset.txt'; + const assets = stats.compilation.assets + const expectedAssetName = 'asset.txt' - expect(expectedAssetName in assets).toBeTruthy(); - expect(assets[expectedAssetName].source()).toBe('123'); + expect(expectedAssetName in assets).toBeTruthy() + expect(assets[expectedAssetName].source()).toBe('123') }) }) }) diff --git a/test/options/exec.test.js b/test/options/exec.test.js index 33795b98..ac61490e 100644 --- a/test/options/exec.test.js +++ b/test/options/exec.test.js @@ -15,11 +15,11 @@ describe('Options', () => { } return webpack('jss/exec/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a {\\n color: green\\n}\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a {\\n color: green\\n}"') + expect(src).toMatchSnapshot() + }) }) test('JSS - {String}', () => { @@ -32,9 +32,9 @@ describe('Options', () => { } return webpack('jss/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toMatchSnapshot() - }) + expect(src).toMatchSnapshot() + }) }) }) diff --git a/test/options/parser.test.js b/test/options/parser.test.js index 7c4bde78..58e3ecf4 100644 --- a/test/options/parser.test.js +++ b/test/options/parser.test.js @@ -14,11 +14,11 @@ describe('Options', () => { } return webpack('sss/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a {\\n color: black\\n}\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a {\\n color: black\\n}\\n"') + expect(src).toMatchSnapshot() + }) }) test('Parser - {Object}', () => { @@ -32,10 +32,10 @@ describe('Options', () => { } return webpack('sss/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a {\\n color: black\\n}\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a {\\n color: black\\n}\\n"') + expect(src).toMatchSnapshot() + }) }) }) diff --git a/test/options/plugins.test.js b/test/options/plugins.test.js index 32293cc6..bc98ad3c 100644 --- a/test/options/plugins.test.js +++ b/test/options/plugins.test.js @@ -15,11 +15,11 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: rgba(255, 0, 0, 1.0) }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') + expect(src).toMatchSnapshot() + }) }) test('Plugins - {Object}', () => { @@ -33,11 +33,11 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: rgba(255, 0, 0, 1.0) }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') + expect(src).toMatchSnapshot() + }) }) test('Plugins - {Function} - {Array}', () => { @@ -51,11 +51,11 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: rgba(255, 0, 0, 1.0) }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') + expect(src).toMatchSnapshot() + }) }) test('Plugins - {Function} - {Object}', () => { @@ -69,10 +69,10 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: rgba(255, 0, 0, 1.0) }\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') + expect(src).toMatchSnapshot() + }) }) }) diff --git a/test/options/sourceMap.test.js b/test/options/sourceMap.test.js index 873e786d..3669127a 100644 --- a/test/options/sourceMap.test.js +++ b/test/options/sourceMap.test.js @@ -15,18 +15,18 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a { color: rgba(255, 0, 0, 1.0) }\\n\"") - expect(src).toMatchSnapshot() + expect(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n"') + expect(src).toMatchSnapshot() - const map = loader(stats).map + const map = loader(stats).map - map.file = path.relative(__dirname, map.file) - map.sources = map.sources.map((src) => path.relative(__dirname, src)) + map.file = path.relative(__dirname, map.file) + map.sources = map.sources.map((src) => path.relative(__dirname, src)) - expect(map).toMatchSnapshot() - }) + expect(map).toMatchSnapshot() + }) }) test('Sourcemap - {String}', () => { @@ -39,10 +39,10 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - 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(src).toEqual('module.exports = "a { color: rgba(255, 0, 0, 1.0) }\\n\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvY3NzL3N0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFJLDJCQUFZLEVBQUUiLCJmaWxlIjoidGVzdC9maXh0dXJlcy9jc3Mvc3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7IGNvbG9yOiBibGFjayB9XG4iXX0= */"') + expect(src).toMatchSnapshot() + }) }) }) diff --git a/test/options/stringifier.test.js b/test/options/stringifier.test.js index f4f450be..bf94b46a 100644 --- a/test/options/stringifier.test.js +++ b/test/options/stringifier.test.js @@ -14,11 +14,11 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a color: black\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a color: black\\n"') + expect(src).toMatchSnapshot() + }) }) test('Stringifier - {Object}', () => { @@ -32,10 +32,10 @@ describe('Options', () => { } return webpack('css/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a color: black\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a color: black\\n"') + expect(src).toMatchSnapshot() + }) }) }) diff --git a/test/options/syntax.test.js b/test/options/syntax.test.js index 597c58c5..27d152cc 100644 --- a/test/options/syntax.test.js +++ b/test/options/syntax.test.js @@ -14,11 +14,11 @@ describe('Options', () => { } return webpack('sss/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a\\n color: black\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a\\n color: black\\n"') + expect(src).toMatchSnapshot() + }) }) test('Syntax - {Object}', () => { @@ -32,10 +32,10 @@ describe('Options', () => { } return webpack('sss/index.js', config).then((stats) => { - const src = loader(stats).src + const src = loader(stats).src - expect(src).toEqual("module.exports = \"a\\n color: black\\n\"") - expect(src).toMatchSnapshot() - }) + expect(src).toEqual('module.exports = "a\\n color: black\\n"') + expect(src).toMatchSnapshot() + }) }) }) From 114db125074a80db436c25323683c94f5d7aa741 Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Sat, 4 Aug 2018 16:27:09 +0200 Subject: [PATCH 09/27] docs(README): add autoprefixing example (#380) --- README.md | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6a25d4f1..f7546968 100644 --- a/README.md +++ b/README.md @@ -179,7 +179,7 @@ module.exports = ({ file, options, env }) => ({ parser: file.extname === '.sss' ? 'sugarss' : false, plugins: { 'postcss-import': { root: file.dirname }, - 'postcss-preset-env': options.presetEnv ? options.presetEnv : false, + 'postcss-preset-env': options['postcss-preset-env'] ? options['postcss-preset-env'] : false, 'cssnano': env === 'production' ? options.cssnano : false } }) @@ -192,9 +192,8 @@ module.exports = ({ file, options, env }) => ({ options: { config: { ctx: { - cssnext: {...options}, + 'postcss-preset-env': {...options}, cssnano: {...options}, - autoprefixer: {...options} } } } @@ -212,7 +211,6 @@ module.exports = ({ file, options, env }) => ({ plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), require('postcss-preset-env')(), - require('autoprefixer')(), require('cssnano')() ] } @@ -332,6 +330,31 @@ within the CSS directly as an annotation comment. } ``` +### Autoprefixing + +**webpack.config.js** +```js +{ + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'postcss-loader', + options: { + ident: 'postcss', + plugins: [ + require('autoprefixer')({...options}), + ..., + ] + } + } + ] +} +``` + +> :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` This loader [cannot be used] with [CSS Modules] out of the box due From daa0da8a7492ccc11c6735855a9c34cfd2d3ca54 Mon Sep 17 00:00:00 2001 From: Patrick Abkarian Date: Sat, 4 Aug 2018 06:45:35 +0200 Subject: [PATCH 10/27] chore(package): update `postcss` v6.0.0...7.0.0 (`dependencies`) (#375) BREAKING CHANGE: requires `node >= v6.0.0` --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 4d26c130..bbeaf8da 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,11 @@ "lib" ], "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" }, @@ -20,7 +20,7 @@ "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", From fbf05deac273224cff723d52038bb484c333f0f1 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 11:27:14 +0200 Subject: [PATCH 11/27] test: replace helpers with `@webpack-utilities/test` (#386) --- package.json | 15 +++-- {lib => src}/Error.js | 0 {lib => src}/index.js | 0 {lib => src}/options.js | 0 {lib => src}/options.json | 0 test/Errors.test.js | 54 +++++++++++++---- test/__snapshots__/Errors.test.js.snap | 6 +- test/__snapshots__/loader.test.js.snap | 6 -- test/fixtures/watch/error.css | 1 - test/fixtures/watch/index.css | 1 - test/fixtures/watch/index.js | 3 - test/fixtures/watch/style.css | 1 - test/helpers/compilation.js | 66 -------------------- test/helpers/compiler.js | 63 ------------------- test/helpers/fs.js | 38 ------------ test/loader.test.js | 83 ++------------------------ test/options/config.test.js | 57 +++++++++++------- test/options/exec.test.js | 18 +++--- test/options/parser.test.js | 19 +++--- test/options/plugins.test.js | 45 +++++++++----- test/options/sourceMap.test.js | 34 +++++++---- test/options/stringifier.test.js | 19 +++--- test/options/syntax.test.js | 19 +++--- 23 files changed, 180 insertions(+), 368 deletions(-) rename {lib => src}/Error.js (100%) rename {lib => src}/index.js (100%) rename {lib => src}/options.js (100%) rename {lib => src}/options.json (100%) delete mode 100644 test/fixtures/watch/error.css delete mode 100644 test/fixtures/watch/index.css delete mode 100644 test/fixtures/watch/index.js delete mode 100644 test/fixtures/watch/style.css delete mode 100644 test/helpers/compilation.js delete mode 100644 test/helpers/compiler.js delete mode 100644 test/helpers/fs.js diff --git a/package.json b/package.json index bbeaf8da..4388e118 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,9 @@ "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": ">= 6" @@ -16,21 +16,20 @@ "schema-utils": "^0.4.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": "^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 > LOADER.md", "clean": "rm -rf coverage test/outputs", "release": "standard-version" }, diff --git a/lib/Error.js b/src/Error.js similarity index 100% rename from lib/Error.js rename to src/Error.js diff --git a/lib/index.js b/src/index.js similarity index 100% rename from lib/index.js rename to src/index.js diff --git a/lib/options.js b/src/options.js similarity index 100% rename from lib/options.js rename to src/options.js diff --git a/lib/options.json b/src/options.json similarity index 100% rename from lib/options.json rename to src/options.json diff --git a/test/Errors.test.js b/test/Errors.test.js index da8b4cb9..718f8c9a 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') + .slice(1) + .join('\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/__snapshots__/Errors.test.js.snap b/test/__snapshots__/Errors.test.js.snap index cba7269b..6db3e25c 100644 --- a/test/__snapshots__/Errors.test.js.snap +++ b/test/__snapshots__/Errors.test.js.snap @@ -1,18 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Errors Syntax Error 1`] = ` -[ModuleBuildError: Module build failed: Syntax Error +"Syntax Error (1:3) Unexpected separator in property > 1 | a { color: black }  |  ^  2 |  -] +" `; exports[`Errors Validation Error 1`] = ` -"PostCSS Loader Invalid Options +"ValidationError: PostCSS Loader Invalid Options options.sourceMap should be string,boolean " 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() }) }) }) From 549ea0882ceab46f316c304ca8efd635bf903a10 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 12:35:45 +0200 Subject: [PATCH 12/27] fix(options): improved `ValidationError` messages --- src/options.json | 18 ++++++++++++++++++ test/__snapshots__/Errors.test.js.snap | 8 +++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/options.json b/src/options.json index e4546157..956cd39c 100644 --- a/src/options.json +++ b/src/options.json @@ -11,6 +11,12 @@ "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": { @@ -39,5 +45,17 @@ "type": [ "string", "boolean" ] } }, + "errorMessage": { + "properties": { + "exec": "should be {Boolean} (https://github.com/postcss/postcss-loader#exec)", + "ident": "should be {String} (https://github.com/postcss/postcss-loader#plugins)", + "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/__snapshots__/Errors.test.js.snap b/test/__snapshots__/Errors.test.js.snap index 6db3e25c..dedd2684 100644 --- a/test/__snapshots__/Errors.test.js.snap +++ b/test/__snapshots__/Errors.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Errors Syntax Error 1`] = ` -"Syntax Error +"Syntax Error (1:3) Unexpected separator in property @@ -14,6 +14,8 @@ exports[`Errors Syntax Error 1`] = ` exports[`Errors Validation Error 1`] = ` "ValidationError: PostCSS Loader Invalid Options -options.sourceMap should be string,boolean -" +options.sourceMap should be {String|Boolean} (https://github.com/postcss/postcss-loader#sourcemap) + + at validateOptions (/Users/Cini/Github/webpack/loaders/postcss/node_modules/@webpack-utilities/schema/src/validateOptions.js:25:11) + at Object.loader (/Users/Cini/Github/webpack/loaders/postcss/src/index.js:44:3)" `; From 2c6033b50f2ac6c3dd15c49e91b30642bd65dc85 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 14:19:11 +0200 Subject: [PATCH 13/27] test(Errors): remove stacktrace from snapshot --- test/Errors.test.js | 6 +++--- test/__snapshots__/Errors.test.js.snap | 9 +-------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/test/Errors.test.js b/test/Errors.test.js index 718f8c9a..5379df1d 100644 --- a/test/Errors.test.js +++ b/test/Errors.test.js @@ -23,9 +23,9 @@ describe('Errors', () => { error() } catch (err) { const message = err.message - .split('\n') - .slice(1) - .join('\n') + .split('\n\n') + .slice(1, -1) + .join('\n\n') expect(message).toMatchSnapshot() } diff --git a/test/__snapshots__/Errors.test.js.snap b/test/__snapshots__/Errors.test.js.snap index dedd2684..126692fa 100644 --- a/test/__snapshots__/Errors.test.js.snap +++ b/test/__snapshots__/Errors.test.js.snap @@ -11,11 +11,4 @@ exports[`Errors Syntax Error 1`] = ` " `; -exports[`Errors Validation Error 1`] = ` -"ValidationError: PostCSS Loader Invalid Options - -options.sourceMap should be {String|Boolean} (https://github.com/postcss/postcss-loader#sourcemap) - - at validateOptions (/Users/Cini/Github/webpack/loaders/postcss/node_modules/@webpack-utilities/schema/src/validateOptions.js:25:11) - at Object.loader (/Users/Cini/Github/webpack/loaders/postcss/src/index.js:44:3)" -`; +exports[`Errors Validation Error 1`] = `"options.sourceMap should be {String|Boolean} (https://github.com/postcss/postcss-loader#sourcemap)"`; From 8ac6fb57a2e80803c75b6aa30336126c45a5693c Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 14:20:43 +0200 Subject: [PATCH 14/27] fix(index): emit `warnings` as an instance of `{Error}` --- src/Warning.js | 14 ++++++++++ src/index.js | 8 ++++-- test/Warnings.test.js | 33 ++++++++++++++++++++++++ test/__snapshots__/Warnings.test.js.snap | 7 +++++ 4 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 src/Warning.js create mode 100644 test/Warnings.test.js create mode 100644 test/__snapshots__/Warnings.test.js.snap diff --git a/src/Warning.js b/src/Warning.js new file mode 100644 index 00000000..97273e63 --- /dev/null +++ b/src/Warning.js @@ -0,0 +1,14 @@ +class Warning extends Error { + constructor (warning) { + super() + + const { line, column, text } = warning + + this.name = 'LoaderWarning' + this.message = `\n(${line}:${column}) ${text}\n` + + this.stack = false + } +} + +module.exports = Warning diff --git a/src/index.js b/src/index.js index 5dc545e2..caf2a17a 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,9 @@ 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 @@ -143,7 +145,9 @@ module.exports = function loader (css, map, meta) { return postcss(plugins) .process(css, options) .then((result) => { - result.warnings().forEach((msg) => this.emitWarning(msg.toString())) + result.warnings().forEach((warning) => { + this.emitWarning(new Warning(warning)) + }) result.messages.forEach((msg) => { if (msg.type === 'dependency') this.addDependency(msg.file) 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__/Warnings.test.js.snap b/test/__snapshots__/Warnings.test.js.snap new file mode 100644 index 00000000..d1d876e1 --- /dev/null +++ b/test/__snapshots__/Warnings.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Warnings Plugins 1`] = ` +" +(1:5) +" +`; From f34954f7342159051f21a16acebd9e814dc51212 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 14:56:08 +0200 Subject: [PATCH 15/27] fix(index): add ast version (`meta.ast`) --- src/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index caf2a17a..dce3db7e 100644 --- a/src/index.js +++ b/src/index.js @@ -163,7 +163,13 @@ module.exports = function loader (css, map, meta) { if (!meta) meta = {} - meta.ast = { 'type': 'postcss', root: result.root } + const ast = { + type: 'postcss', + version: processor.version, + root + } + + meta.ast = ast meta.messages = result.messages if (this.loaderIndex === 0) { From bdcbef03968363df7b85601713fa2a6dbce1c3a3 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sat, 4 Aug 2018 17:40:48 +0200 Subject: [PATCH 16/27] refactor(src): update code base with latest ES2015+ features --- src/Error.js | 8 ++-- src/Warning.js | 2 +- src/index.js | 59 +++++++++++++++++--------- src/options.js | 32 ++++++-------- test/__snapshots__/Errors.test.js.snap | 2 +- 5 files changed, 59 insertions(+), 44 deletions(-) diff --git a/src/Error.js b/src/Error.js index 05ea46ea..1ecf9fac 100644 --- a/src/Error.js +++ b/src/Error.js @@ -1,13 +1,13 @@ -'use strict' - class SyntaxError extends Error { constructor (err) { super(err) - this.name = 'Syntax Error' + const { line, column, reason } = err + + this.name = 'SyntaxError' this.message = '' - this.message += `${this.name} \n\n(${err.line}:${err.column}) ${err.reason}` + this.message += `${this.name} \n\n(${line}:${column}) ${reason}` this.message += `\n\n${err.showSourceCode()}\n` this.stack = false diff --git a/src/Warning.js b/src/Warning.js index 97273e63..31e97df8 100644 --- a/src/Warning.js +++ b/src/Warning.js @@ -2,7 +2,7 @@ class Warning extends Error { constructor (warning) { super() - const { line, column, text } = warning + const { text, line, column } = warning this.name = 'LoaderWarning' this.message = `\n(${line}:${column}) ${text}\n` diff --git a/src/index.js b/src/index.js index dce3db7e..e100eb54 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,6 @@ -'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') @@ -42,7 +38,7 @@ const parseOptions = require('./options.js') * @return {cb} cb Result */ module.exports = function loader (css, map, meta) { - const options = Object.assign({}, loaderUtils.getOptions(this)) + const options = Object.assign({}, getOptions(this)) validateOptions(require('./options.json'), options, 'PostCSS Loader') @@ -96,16 +92,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 @@ -139,29 +144,39 @@ 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) => { + let { css, map, root, processor, messages } = result + result.warnings().forEach((warning) => { this.emitWarning(new Warning(warning)) }) - result.messages.forEach((msg) => { - if (msg.type === 'dependency') this.addDependency(msg.file) + messages.forEach((msg) => { + if (msg.type === 'dependency') { + this.addDependency(msg.file) + } }) - css = result.css - map = result.map ? result.map.toJSON() : null + 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', @@ -170,7 +185,7 @@ module.exports = function loader (css, map, meta) { } meta.ast = ast - meta.messages = result.messages + meta.messages = messages if (this.loaderIndex === 0) { /** @@ -199,8 +214,12 @@ 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) }) } diff --git a/src/options.js b/src/options.js index 980e9366..dc0b21bf 100644 --- a/src/options.js +++ b/src/options.js @@ -1,25 +1,21 @@ -'use strict' - -module.exports = function parseOptions (params) { - if (typeof params.plugins === 'function') { - params.plugins = params.plugins.call(this, this) +function parseOptions ({ exec, parser, syntax, stringifier, plugins }) { + if (typeof plugins === 'function') { + plugins = 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 ] + if (typeof plugins === 'undefined') { + plugins = [] + } else if (!Array.isArray(plugins)) { + plugins = [ plugins ] + } const options = {} - if (typeof params !== 'undefined') { - options.parser = params.parser - options.syntax = params.syntax - options.stringifier = params.stringifier - } - - const exec = params && params.exec + options.parser = parser + options.syntax = syntax + options.stringifier = stringifier - return Promise.resolve({ options: options, plugins: plugins, exec: exec }) + return Promise.resolve({ options, plugins, exec }) } + +module.exports = parseOptions diff --git a/test/__snapshots__/Errors.test.js.snap b/test/__snapshots__/Errors.test.js.snap index 126692fa..117cc8c7 100644 --- a/test/__snapshots__/Errors.test.js.snap +++ b/test/__snapshots__/Errors.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Errors Syntax Error 1`] = ` -"Syntax Error +"SyntaxError (1:3) Unexpected separator in property From 319d1f789ab41c4999f350adb3d1d0fd25765a19 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sun, 5 Aug 2018 04:25:20 +0200 Subject: [PATCH 17/27] chore(PULL_REQUEST_TEMPLATE): improve format and content --- .github/PULL_REQUEST_TEMPLATE.md | 59 +++++++++++++++++++------------- 1 file changed, 36 insertions(+), 23 deletions(-) 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 From 4a0328e81e834d44ff6139d4aef5d49ab64be04a Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sun, 5 Aug 2018 05:31:38 +0200 Subject: [PATCH 18/27] chore(ISSUE_TEMPLATE/BUG): move bug reports into their own template --- .github/ISSUE_TEMPLATE.md | 39 ----------------------------------- .github/ISSUE_TEMPLATE/BUG.md | 34 ++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 39 deletions(-) delete mode 100644 .github/ISSUE_TEMPLATE.md create mode 100644 .github/ISSUE_TEMPLATE/BUG.md 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]| From 70f442631ad67f1cbcba4f461abc251da27b9b71 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sun, 5 Aug 2018 05:42:07 +0200 Subject: [PATCH 19/27] chore(ISSUE_TEMPLATE/FEATURE): add feature request template --- .github/ISSUE_TEMPLATE/FEATURE.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/FEATURE.md 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 + + From 73a8c663e84fc890771bdd110378e61eeb4c855e Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Sun, 5 Aug 2018 05:45:48 +0200 Subject: [PATCH 20/27] chore(ISSUE_TEMPLATE/DOCS): add template for documentation issues --- .github/ISSUE_TEMPLATE/DOCS.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/DOCS.md 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 From ea68a42f546db1870411779ea29aadea3890abb8 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Wed, 8 Aug 2018 16:38:39 +0200 Subject: [PATCH 21/27] chore(package): update `schema-utils` v0.4.5...1.0.0 (`dependencies`) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4388e118..104dc793 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "loader-utils": "^1.1.0", "postcss": "^7.0.0", "postcss-load-config": "^2.0.0", - "schema-utils": "^0.4.0" + "schema-utils": "^1.0.0" }, "devDependencies": { "@webpack-utilities/test": "^1.0.0-alpha.0", From 95de4c1e5466156668f89ff1687e3435c986f687 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Wed, 8 Aug 2018 17:15:32 +0200 Subject: [PATCH 22/27] docs(LOADER): update JSDoc --- LOADER.md | 46 ----------------- docs/LOADER.md | 130 +++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- src/Error.js | 10 ++++ src/Warning.js | 10 ++++ src/index.js | 55 ++++++++++++--------- src/options.js | 15 ++++++ 7 files changed, 197 insertions(+), 71 deletions(-) delete mode 100644 LOADER.md create mode 100644 docs/LOADER.md 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/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 + +
+
SyntaxErrorError
+
+
WarningError
+
+
+ +## 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/package.json b/package.json index 104dc793..0ebf1bbb 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "scripts": { "lint": "standard --env jest", "test": "jest --env node --verbose --coverage", - "docs": "jsdoc2md src/*.js > LOADER.md", + "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 index 1ecf9fac..8c6d6a2b 100644 --- a/src/Error.js +++ b/src/Error.js @@ -1,3 +1,13 @@ +/** + * **PostCSS Syntax Error** + * + * Loader wrapper for postcss syntax errors + * + * @class SyntaxError + * @extends Error + * + * @param {Object} err CssSyntaxError + */ class SyntaxError extends Error { constructor (err) { super(err) diff --git a/src/Warning.js b/src/Warning.js index 31e97df8..6d032720 100644 --- a/src/Warning.js +++ b/src/Warning.js @@ -1,3 +1,13 @@ +/** + * **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() diff --git a/src/index.js b/src/index.js index e100eb54..bb576c32 100644 --- a/src/index.js +++ b/src/index.js @@ -11,33 +11,18 @@ const SyntaxError = require('./Error.js') const parseOptions = require('./options.js') /** - * PostCSS Loader + * **PostCSS Loader** * - * > Loads && processes CSS with [PostCSS](https://github.com/postcss/postcss) - * - * @author Andrey Sitnik (@ai) - * - * @license MIT - * @version 2.0.0 - * - * @requires path - * - * @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) { +function loader (css, map, meta) { const options = Object.assign({}, getOptions(this)) validateOptions(require('./options.json'), options, 'PostCSS Loader') @@ -192,9 +177,9 @@ module.exports = function loader (css, map, meta) { * @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) @@ -223,3 +208,25 @@ module.exports = function loader (css, map, meta) { : 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 index dc0b21bf..fbe71369 100644 --- a/src/options.js +++ b/src/options.js @@ -1,3 +1,18 @@ +/** + * **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) From 1f98aee4534f87eca93cfd374cc485e82899d716 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Wed, 8 Aug 2018 17:18:25 +0200 Subject: [PATCH 23/27] refactor(Warning): add `warning` property checks --- src/Warning.js | 13 ++++++++++--- test/__snapshots__/Warnings.test.js.snap | 6 +++--- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/Warning.js b/src/Warning.js index 6d032720..2355f4f5 100644 --- a/src/Warning.js +++ b/src/Warning.js @@ -10,12 +10,19 @@ */ class Warning extends Error { constructor (warning) { - super() + super(warning) const { text, line, column } = warning - this.name = 'LoaderWarning' - this.message = `\n(${line}:${column}) ${text}\n` + this.name = 'Warning' + + this.message = `${this.name}\n\n` + + if (typeof line !== 'undefined') { + this.message += `(${line}:${column}) ` + } + + this.message += `${text}` this.stack = false } diff --git a/test/__snapshots__/Warnings.test.js.snap b/test/__snapshots__/Warnings.test.js.snap index d1d876e1..9524418a 100644 --- a/test/__snapshots__/Warnings.test.js.snap +++ b/test/__snapshots__/Warnings.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Warnings Plugins 1`] = ` -" -(1:5) -" +"Warning + +(1:5) " `; From 962b1d60f41084630c33c5fdf1b886847178d214 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Wed, 8 Aug 2018 17:19:50 +0200 Subject: [PATCH 24/27] refactor(options): remove `ident` from validation schema --- src/options.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/options.json b/src/options.json index 956cd39c..1141d84a 100644 --- a/src/options.json +++ b/src/options.json @@ -22,9 +22,6 @@ "exec": { "type": "boolean" }, - "ident": { - "type": "string" - }, "parser": { "type": [ "string", "object" ] }, @@ -48,7 +45,6 @@ "errorMessage": { "properties": { "exec": "should be {Boolean} (https://github.com/postcss/postcss-loader#exec)", - "ident": "should be {String} (https://github.com/postcss/postcss-loader#plugins)", "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)", From d6931da177ac79707bd758436e476036a55e4f59 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Wed, 8 Aug 2018 19:00:22 +0200 Subject: [PATCH 25/27] refactor(Error): add `error` property checks --- src/Error.js | 22 ++++++++++++++++------ test/__snapshots__/Errors.test.js.snap | 2 +- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/Error.js b/src/Error.js index 8c6d6a2b..db05aac3 100644 --- a/src/Error.js +++ b/src/Error.js @@ -9,16 +9,26 @@ * @param {Object} err CssSyntaxError */ class SyntaxError extends Error { - constructor (err) { - super(err) + constructor (error) { + super(error) - const { line, column, reason } = err + const { line, column, reason } = error this.name = 'SyntaxError' - this.message = '' - this.message += `${this.name} \n\n(${line}:${column}) ${reason}` - this.message += `\n\n${err.showSourceCode()}\n` + 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 } diff --git a/test/__snapshots__/Errors.test.js.snap b/test/__snapshots__/Errors.test.js.snap index 117cc8c7..b3651a12 100644 --- a/test/__snapshots__/Errors.test.js.snap +++ b/test/__snapshots__/Errors.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Errors Syntax Error 1`] = ` -"SyntaxError +"SyntaxError (1:3) Unexpected separator in property From 313c3c458c431f13bc438b6780073a5644547b09 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Wed, 8 Aug 2018 19:12:30 +0200 Subject: [PATCH 26/27] docs(README): update filename formatting --- README.md | 45 ++++++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 21 deletions(-) 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' }) ] } From 7647ac9051a17a3a6add7364828bf7bd9955b968 Mon Sep 17 00:00:00 2001 From: Michael Ciniawsky Date: Wed, 8 Aug 2018 19:42:27 +0200 Subject: [PATCH 27/27] chore(release): 3.0.0 --- CHANGELOG.md | 22 ++++++++++++++++++++++ package.json | 2 +- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 326af73a..fcdcebb3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,28 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. + +# [3.0.0](https://github.com/postcss/postcss-loader/compare/v2.1.6...v3.0.0) (2018-08-08) + + +### Bug Fixes + +* **index:** add ast version (`meta.ast`) ([f34954f](https://github.com/postcss/postcss-loader/commit/f34954f)) +* **index:** emit `warnings` as an instance of `{Error}` ([8ac6fb5](https://github.com/postcss/postcss-loader/commit/8ac6fb5)) +* **options:** improved `ValidationError` messages ([549ea08](https://github.com/postcss/postcss-loader/commit/549ea08)) + + +### Chores + +* **package:** update `postcss` v6.0.0...7.0.0 (`dependencies`) ([#375](https://github.com/postcss/postcss-loader/issues/375)) ([daa0da8](https://github.com/postcss/postcss-loader/commit/daa0da8)) + + +### BREAKING CHANGES + +* **package:** requires `node >= v6.0.0` + + + ## [2.1.6](https://github.com/postcss/postcss-loader/compare/v2.1.5...v2.1.6) (2018-07-10) diff --git a/package.json b/package.json index 0ebf1bbb..0a317336 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "postcss-loader", - "version": "2.1.6", + "version": "3.0.0", "description": "PostCSS loader for webpack", "main": "src/index.js", "files": [