Skip to content

Commit 89b0377

Browse files
haoqunjianghaoqunjiang
authored
feat!: upgrade postcss-loader, using postcss 8 by default (#6108)
1 parent 75533f1 commit 89b0377

File tree

7 files changed

+175
-28
lines changed

7 files changed

+175
-28
lines changed

‎docs/migrations/migrate-from-v4.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ Though it works in all our tests, please be aware that this approach is still so
7979
#### Underlying Loaders and Plugins
8080

8181
* `html-webpack-plugin` is upgraded from v3 to v4, see more details in the [release announcement](https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d).
82+
* `postcss-loader` is upgraded from v3 to v4. Most notably, `PostCSS` options (`plugin` / `syntax` / `parser` / `stringifier`) are moved into the `postcssOptions` field. More details available at the [changelog](https://github.com/webpack-contrib/postcss-loader/blob/master/CHANGELOG.md#400-2020-09-07).
8283
* `copy-webpack-plugin` is upgraded from v5 to v6. If you never customized its config through `config.plugin('copy')`, there should be no user-facing breaking changes. A full list of breaking changes is available at [`copy-webpack-plugin` v6.0.0 release](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.0.0).
8384
* `file-loader` is upgraded from v4 to v6, and `url-loader` from v2 to v4. The `esModule` option is now turned on by default for non-Vue-2 projects. Full changelog available at [`file-loader` changelog](https://github.com/webpack-contrib/file-loader/blob/master/CHANGELOG.md) and [`url-loader` changelog](https://github.com/webpack-contrib/url-loader/blob/master/CHANGELOG.md)
8485
* `terser-webpack-plugin` is upgraded from v2 to v4, using terser 5 and some there are some changes in the options format. See full details in its [changelog](https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/CHANGELOG.md#400-2020-08-04).

‎packages/@vue/cli-service/__tests__/css.spec.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ test('default loaders', () => {
6262
LANGS.forEach(lang => {
6363
const loader = lang === 'css' ? [] : LOADERS[lang]
6464
expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss'].concat(loader))
65-
expect(findOptions(config, lang, 'postcss').plugins).toEqual([require('autoprefixer')])
65+
expect(findOptions(config, lang, 'postcss').postcssOptions.plugins).toEqual([require('autoprefixer')])
6666
// assert css-loader options
6767
expect(findOptions(config, lang, 'css')).toEqual({
6868
sourceMap: false,
@@ -83,7 +83,7 @@ test('production defaults', () => {
8383
LANGS.forEach(lang => {
8484
const loader = lang === 'css' ? [] : LOADERS[lang]
8585
expect(findLoaders(config, lang)).toEqual([extractLoaderPath, 'css', 'postcss'].concat(loader))
86-
expect(findOptions(config, lang, 'postcss').plugins).toEqual([require('autoprefixer')])
86+
expect(findOptions(config, lang, 'postcss').postcssOptions.plugins).toEqual([require('autoprefixer')])
8787
expect(findOptions(config, lang, 'css')).toEqual({
8888
sourceMap: false,
8989
importLoaders: 2
@@ -96,7 +96,7 @@ test('override postcss config', () => {
9696
LANGS.forEach(lang => {
9797
const loader = lang === 'css' ? [] : LOADERS[lang]
9898
expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss'].concat(loader))
99-
expect(findOptions(config, lang, 'postcss').plugins).toBeFalsy()
99+
expect(findOptions(config, lang, 'postcss').postcssOptions).toBeFalsy()
100100
// assert css-loader options
101101
expect(findOptions(config, lang, 'css')).toEqual({
102102
sourceMap: false,
@@ -254,7 +254,7 @@ test('css.extract', () => {
254254
// an additional instance of postcss-loader is injected for inline minification.
255255
expect(findLoaders(config, lang)).toEqual(['vue-style', 'css', 'postcss', 'postcss'].concat(loader))
256256
expect(findOptions(config, lang, 'css').importLoaders).toBe(3)
257-
expect(findOptions(config, lang, 'postcss').plugins).toBeTruthy()
257+
expect(findOptions(config, lang, 'postcss').postcssOptions.plugins).toBeTruthy()
258258
})
259259

260260
const config2 = genConfig({
@@ -272,7 +272,7 @@ test('css.extract', () => {
272272
expect(findLoaders(config2, lang)).toEqual(['vue-style', 'css', 'postcss', 'postcss'].concat(loader))
273273
expect(findOptions(config2, lang, 'css').importLoaders).toBe(3)
274274
// minification loader should be injected before the user-facing postcss-loader
275-
expect(findOptions(config2, lang, 'postcss').plugins).toBeTruthy()
275+
expect(findOptions(config2, lang, 'postcss').postcssOptions.plugins).toBeTruthy()
276276
})
277277
})
278278

‎packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
jest.setTimeout(30000)
2+
3+
const create = require('@vue/cli-test-utils/createTestProject')
4+
const { defaultPreset } = require('@vue/cli/lib/options')
5+
6+
test('autoprefixer', async () => {
7+
const project = await create('css-autoprefixer', defaultPreset)
8+
9+
await project.write('vue.config.js', 'module.exports = { filenameHashing: false }\n')
10+
11+
const appVue = await project.read('src/App.vue')
12+
await project.write('src/App.vue', appVue.replace('#app {', '#app {\n user-select: none;'))
13+
14+
await project.run('vue-cli-service build')
15+
16+
const css = await project.read('dist/css/app.css')
17+
expect(css).toMatch('-webkit-user-select')
18+
})
19+
20+
test('CSS inline minification', async () => {
21+
const project = await create('css-inline-minification', defaultPreset)
22+
23+
await project.write('vue.config.js', 'module.exports = { filenameHashing: false, css: { extract: false } }\n')
24+
25+
const appVue = await project.read('src/App.vue')
26+
await project.write('src/App.vue',
27+
appVue.replace(
28+
'#app {',
29+
30+
'#app {\n height: calc(100px * 2);'
31+
)
32+
)
33+
await project.run('vue-cli-service build')
34+
const appJs = await project.read('dist/js/app.js')
35+
expect(appJs).not.toMatch('calc(100px')
36+
expect(appJs).toMatch('height:200px;')
37+
})
38+
39+
test('CSS minification', async () => {
40+
const project = await create('css-minification', defaultPreset)
41+
42+
await project.write('vue.config.js', 'module.exports = { filenameHashing: false }\n')
43+
44+
const appVue = await project.read('src/App.vue')
45+
await project.write('src/App.vue',
46+
appVue.replace(
47+
'#app {',
48+
49+
'#app {\n height: calc(100px * 2);'
50+
)
51+
)
52+
await project.run('vue-cli-service build')
53+
const appCss = await project.read('dist/css/app.css')
54+
expect(appCss).not.toMatch('calc(100px')
55+
expect(appCss).toMatch('height:200px;')
56+
})
57+
58+
test('Custom PostCSS plugins', async () => {
59+
const project = await create('css-custom-postcss', defaultPreset)
60+
await project.write('vue.config.js', `
61+
const toRedPlugin = () => {
62+
return {
63+
postcssPlugin: 'to-red',
64+
Declaration (decl) {
65+
if (decl.prop === 'color') {
66+
decl.value = 'red'
67+
}
68+
}
69+
}
70+
}
71+
toRedPlugin.postcss = true
72+
73+
module.exports = {
74+
filenameHashing: false,
75+
css: {
76+
loaderOptions: {
77+
postcss: {
78+
postcssOptions: { plugins: [toRedPlugin] }
79+
}
80+
}
81+
}
82+
}`)
83+
await project.run('vue-cli-service build')
84+
const appCss = await project.read('dist/css/app.css')
85+
expect(appCss).toMatch('color:red')
86+
})

‎packages/@vue/cli-service/lib/config/css.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,11 @@ module.exports = (api, rootOptions) => {
8383

8484
if (!hasPostCSSConfig) {
8585
loaderOptions.postcss = {
86-
plugins: [
87-
require('autoprefixer')
88-
]
86+
postcssOptions: {
87+
plugins: [
88+
require('autoprefixer')
89+
]
90+
}
8991
}
9092
}
9193

@@ -172,7 +174,9 @@ module.exports = (api, rootOptions) => {
172174
.loader(require.resolve('postcss-loader'))
173175
.options({
174176
sourceMap,
175-
plugins: [require('cssnano')(cssnanoOptions)]
177+
postcssOptions: {
178+
plugins: [require('cssnano')(cssnanoOptions)]
179+
}
176180
})
177181
}
178182

‎packages/@vue/cli-service/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"acorn": "^8.0.1",
3939
"acorn-walk": "^8.0.0",
4040
"address": "^1.1.2",
41-
"autoprefixer": "^9.8.6",
41+
"autoprefixer": "^10.0.4",
4242
"browserslist": "^4.14.1",
4343
"cache-loader": "^4.1.0",
4444
"case-sensitive-paths-webpack-plugin": "^2.3.0",
@@ -65,7 +65,8 @@
6565
"module-alias": "^2.2.2",
6666
"pnp-webpack-plugin": "^1.6.4",
6767
"portfinder": "^1.0.26",
68-
"postcss-loader": "^3.0.0",
68+
"postcss": "^8.1.13",
69+
"postcss-loader": "^4.1.0",
6970
"ssri": "^8.0.0",
7071
"terser-webpack-plugin": "^4.2.3",
7172
"thread-loader": "^3.0.0",

‎packages/@vue/cli-ui/vue.config.js

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
const merge = require('deepmerge')
2-
const path = require('path')
3-
41
module.exports = {
52
pluginOptions: {
63
apollo: {
@@ -16,17 +13,6 @@ module.exports = {
1613
}
1714
},
1815

19-
chainWebpack: config => {
20-
config.module.rule('stylus').oneOf('vue').use('postcss-loader')
21-
.tap(options =>
22-
merge(options, {
23-
config: {
24-
path: path.resolve(__dirname, '.postcssrc')
25-
}
26-
})
27-
)
28-
},
29-
3016
css: {
3117
loaderOptions: {
3218
stylus: {

‎yarn.lock

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5291,7 +5291,19 @@ [email protected]:
52915291
dependencies:
52925292
immediate "^3.2.3"
52935293

5294-
autoprefixer@^9.5.1, autoprefixer@^9.8.6:
5294+
autoprefixer@^10.0.4:
5295+
version "10.0.4"
5296+
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.0.4.tgz#f87ac6105d7861e31af794b8ebb1c6d4390d3d55"
5297+
integrity sha512-hmjYejN/WTyPP9cdNmiwtwqM8/ACVJPD5ExtwoOceQohNbgnFNiwpL2+U4bXS8aXozBL00WvH6WhqbuHf0Fgfg==
5298+
dependencies:
5299+
browserslist "^4.14.7"
5300+
caniuse-lite "^1.0.30001161"
5301+
colorette "^1.2.1"
5302+
normalize-range "^0.1.2"
5303+
num2fraction "^1.2.2"
5304+
postcss-value-parser "^4.1.0"
5305+
5306+
autoprefixer@^9.5.1:
52955307
version "9.8.6"
52965308
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
52975309
integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -5866,6 +5878,17 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.1, browserslist@^4
58665878
escalade "^3.1.1"
58675879
node-releases "^1.1.66"
58685880

5881+
browserslist@^4.14.7:
5882+
version "4.15.0"
5883+
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.15.0.tgz#3d48bbca6a3f378e86102ffd017d9a03f122bdb0"
5884+
integrity sha512-IJ1iysdMkGmjjYeRlDU8PQejVwxvVO5QOfXH7ylW31GO6LwNRSmm/SgRXtNsEXqMLl2e+2H5eEJ7sfynF8TCaQ==
5885+
dependencies:
5886+
caniuse-lite "^1.0.30001164"
5887+
colorette "^1.2.1"
5888+
electron-to-chromium "^1.3.612"
5889+
escalade "^3.1.1"
5890+
node-releases "^1.1.67"
5891+
58695892
[email protected]:
58705893
version "0.2.6"
58715894
resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -6304,6 +6327,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157:
63046327
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001161.tgz#64f7ffe79ee780b8c92843ff34feb36cea4651e0"
63056328
integrity sha512-JharrCDxOqPLBULF9/SPa6yMcBRTjZARJ6sc3cuKrPfyIk64JN6kuMINWqA99Xc8uElMFcROliwtz0n9pYej+g==
63066329

6330+
caniuse-lite@^1.0.30001161, caniuse-lite@^1.0.30001164:
6331+
version "1.0.30001165"
6332+
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
6333+
integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
6334+
63076335
capital-case@^1.0.3:
63086336
version "1.0.3"
63096337
resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.3.tgz#339bd77e8fab6cf75111d4fca509b3edf7c117c8"
@@ -7440,6 +7468,17 @@ cosmiconfig@^6.0.0:
74407468
path-type "^4.0.0"
74417469
yaml "^1.7.2"
74427470

7471+
cosmiconfig@^7.0.0:
7472+
version "7.0.0"
7473+
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
7474+
integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
7475+
dependencies:
7476+
"@types/parse-json" "^4.0.0"
7477+
import-fresh "^3.2.1"
7478+
parse-json "^5.0.0"
7479+
path-type "^4.0.0"
7480+
yaml "^1.10.0"
7481+
74437482
crc-32@^1.2.0:
74447483
version "1.2.0"
74457484
resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208"
@@ -8703,6 +8742,11 @@ electron-to-chromium@^1.3.591:
87038742
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.606.tgz#6ef2655d9a7c1b447dfdd6344657d00461a65e26"
87048743
integrity sha512-+/2yPHwtNf6NWKpaYt0KoqdSZ6Qddt6nDfH/pnhcrHq9hSb23e5LFy06Mlf0vF2ykXvj7avJ597psqcbKnG5YQ==
87058744

8745+
electron-to-chromium@^1.3.612:
8746+
version "1.3.616"
8747+
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.616.tgz#de63d1c79bb8eb61168774df0c11c9e1af69f9e8"
8748+
integrity sha512-CI8L38UN2BEnqXw3/oRIQTmde0LiSeqWSRlPA42ZTYgJQ8fYenzAM2Z3ni+jtILTcrs5aiXZCGJ96Pm+3/yGyQ==
8749+
87068750
elegant-spinner@^1.0.1:
87078751
version "1.0.1"
87088752
resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -15004,6 +15048,11 @@ nanoid@^3.1.16:
1500415048
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.18.tgz#0680db22ab01c372e89209f5d18283d98de3e96d"
1500515049
integrity sha512-rndlDjbbHbcV3xi+R2fpJ+PbGMdfBxz5v1fATIQFq0DP64FsicQdwnKLy47K4kZHdRpmQXtz24eGsxQqamzYTA==
1500615050

15051+
nanoid@^3.1.20:
15052+
version "3.1.20"
15053+
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
15054+
integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
15055+
1500715056
nanomatch@^1.2.9:
1500815057
version "1.2.13"
1500915058
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -15254,7 +15303,7 @@ node-notifier@^8.0.0:
1525415303
uuid "^8.3.0"
1525515304
which "^2.0.2"
1525615305

15257-
node-releases@^1.1.66:
15306+
node-releases@^1.1.66, node-releases@^1.1.67:
1525815307
version "1.1.67"
1525915308
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
1526015309
integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
@@ -16505,6 +16554,17 @@ postcss-loader@^3.0.0:
1650516554
postcss-load-config "^2.0.0"
1650616555
schema-utils "^1.0.0"
1650716556

16557+
postcss-loader@^4.1.0:
16558+
version "4.1.0"
16559+
resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.1.0.tgz#4647a6c8dad3cb6b253fbfaa21d62201086f6e39"
16560+
integrity sha512-vbCkP70F3Q9PIk6d47aBwjqAMI4LfkXCoyxj+7NPNuVIwfTGdzv2KVQes59/RuxMniIgsYQCFSY42P3+ykJfaw==
16561+
dependencies:
16562+
cosmiconfig "^7.0.0"
16563+
klona "^2.0.4"
16564+
loader-utils "^2.0.0"
16565+
schema-utils "^3.0.0"
16566+
semver "^7.3.2"
16567+
1650816568
postcss-merge-longhand@^4.0.11:
1650916569
version "4.0.11"
1651016570
resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
@@ -16806,6 +16866,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.2
1680616866
source-map "^0.6.1"
1680716867
supports-color "^6.1.0"
1680816868

16869+
postcss@^8.1.13:
16870+
version "8.1.14"
16871+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.14.tgz#77d6a5db2fdc0afa918e24af5323a53fb8727f2e"
16872+
integrity sha512-KatkyVPBKfENS+c3dpXJoDXnDD5UZs5exAnDksLqaRJPKwYphEPZt4N0m0i049v2/BtWVQibAhxW4ilXXcolpA==
16873+
dependencies:
16874+
colorette "^1.2.1"
16875+
nanoid "^3.1.20"
16876+
source-map "^0.6.1"
16877+
1680916878
prelude-ls@^1.2.1:
1681016879
version "1.2.1"
1681116880
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -21986,7 +22055,7 @@ [email protected]:
2198622055
resolved "https://registry.yarnpkg.com/yaml-js/-/yaml-js-0.0.8.tgz#87cfa5a9613f48e26005420d6a8ee0da6fe8daec"
2198722056
integrity sha1-h8+lqWE/SOJgBUINao7g2m/o2uw=
2198822057

21989-
yaml@^1.7.2:
22058+
yaml@^1.10.0, yaml@^1.7.2:
2199022059
version "1.10.0"
2199122060
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
2199222061
integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==

0 commit comments

Comments
 (0)