From 962a4e20d68baad133d9d3f1dc07667913e79add Mon Sep 17 00:00:00 2001 From: Clark Du Date: Wed, 17 Jan 2018 16:46:58 +0800 Subject: [PATCH 1/3] feat: use ~ with postcss-import --- lib/builder/webpack/postcss.js | 20 +++++++++++++------- package.json | 1 + yarn.lock | 8 +++++++- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/lib/builder/webpack/postcss.js b/lib/builder/webpack/postcss.js index 97bb073318..2918b20d63 100644 --- a/lib/builder/webpack/postcss.js +++ b/lib/builder/webpack/postcss.js @@ -1,7 +1,8 @@ const { existsSync } = require('fs') -const { resolve } = require('path') +const { resolve, join } = require('path') const { cloneDeep } = require('lodash') const { isPureObject } = require('../../common/utils') +const createResolver = require('postcss-import-webpack-resolver') module.exports = function postcssConfig() { let config = cloneDeep(this.options.build.postcss) @@ -47,12 +48,17 @@ module.exports = function postcssConfig() { plugins: { // https://github.com/postcss/postcss-import 'postcss-import': { - root: this.options.rootDir, - path: [ - this.options.srcDir, - this.options.rootDir, - ...this.options.modulesDir - ] + resolve: createResolver({ + alias: { + '~': join(this.options.srcDir), + '~~': join(this.options.rootDir) + }, + modules: [ + this.options.srcDir, + this.options.rootDir, + ...this.options.modulesDir + ] + }) }, // https://github.com/postcss/postcss-url diff --git a/package.json b/package.json index 793b74feef..57f17e0043 100644 --- a/package.json +++ b/package.json @@ -141,6 +141,7 @@ "jsdom": "^11.5.1", "json-loader": "^0.5.7", "nyc": "^11.4.1", + "postcss-import-webpack-resolver": "^1.0.1", "puppeteer": "^1.0.0", "request": "^2.83.0", "request-promise-native": "^1.0.5", diff --git a/yarn.lock b/yarn.lock index 9e79acf4ed..004fb24737 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2549,7 +2549,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0: dependencies: once "^1.4.0" -enhanced-resolve@^3.4.0: +enhanced-resolve@^3.4.0, enhanced-resolve@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e" dependencies: @@ -5779,6 +5779,12 @@ postcss-image-set-polyfill@^0.3.5: postcss "^6.0.1" postcss-media-query-parser "^0.2.3" +postcss-import-webpack-resolver@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/postcss-import-webpack-resolver/-/postcss-import-webpack-resolver-1.0.1.tgz#4be0e9400b7609313e11258a17c3c4d7db186ac9" + dependencies: + enhanced-resolve "^3.4.1" + postcss-import@^11.0.0: version "11.0.0" resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.0.0.tgz#a962e2df82d3bc5a6da6a386841747204f41ef5b" From c796d1d2315b14aaf5d9bdcfe58fed186ba65841 Mon Sep 17 00:00:00 2001 From: Clark Du Date: Wed, 17 Jan 2018 17:54:48 +0800 Subject: [PATCH 2/3] refactor: use postcss-import-resolver --- lib/builder/webpack/postcss.js | 2 +- package.json | 2 +- yarn.lock | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/builder/webpack/postcss.js b/lib/builder/webpack/postcss.js index 2918b20d63..6a09691769 100644 --- a/lib/builder/webpack/postcss.js +++ b/lib/builder/webpack/postcss.js @@ -2,7 +2,7 @@ const { existsSync } = require('fs') const { resolve, join } = require('path') const { cloneDeep } = require('lodash') const { isPureObject } = require('../../common/utils') -const createResolver = require('postcss-import-webpack-resolver') +const createResolver = require('postcss-import-resolver') module.exports = function postcssConfig() { let config = cloneDeep(this.options.build.postcss) diff --git a/package.json b/package.json index 57f17e0043..a9bb7dfa46 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,7 @@ "jsdom": "^11.5.1", "json-loader": "^0.5.7", "nyc": "^11.4.1", - "postcss-import-webpack-resolver": "^1.0.1", + "postcss-import-resolver": "^1.1.0", "puppeteer": "^1.0.0", "request": "^2.83.0", "request-promise-native": "^1.0.5", diff --git a/yarn.lock b/yarn.lock index 004fb24737..8f891a35f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5779,9 +5779,9 @@ postcss-image-set-polyfill@^0.3.5: postcss "^6.0.1" postcss-media-query-parser "^0.2.3" -postcss-import-webpack-resolver@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/postcss-import-webpack-resolver/-/postcss-import-webpack-resolver-1.0.1.tgz#4be0e9400b7609313e11258a17c3c4d7db186ac9" +postcss-import-resolver@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/postcss-import-resolver/-/postcss-import-resolver-1.1.0.tgz#08a1a9811da625d28317abc31565a8408ff28cd2" dependencies: enhanced-resolve "^3.4.1" From a419aab70407b9c19d4649cf31af9d30881e8cd4 Mon Sep 17 00:00:00 2001 From: Clark Du Date: Fri, 19 Jan 2018 11:56:29 +0800 Subject: [PATCH 3/3] refactor: add @ in postcss-import alias --- lib/builder/webpack/postcss.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/builder/webpack/postcss.js b/lib/builder/webpack/postcss.js index 6a09691769..8acf8b3cf5 100644 --- a/lib/builder/webpack/postcss.js +++ b/lib/builder/webpack/postcss.js @@ -51,7 +51,9 @@ module.exports = function postcssConfig() { resolve: createResolver({ alias: { '~': join(this.options.srcDir), - '~~': join(this.options.rootDir) + '~~': join(this.options.rootDir), + '@': join(this.options.srcDir), + '@@': join(this.options.rootDir) }, modules: [ this.options.srcDir,