diff --git a/package.json b/package.json index 5fc907446..6c62ffa16 100644 --- a/package.json +++ b/package.json @@ -87,13 +87,15 @@ "postcss-custom-properties": "^5.0.1", "postcss-custom-selectors": "^3.0.0", "postcss-flexbugs-fixes": "^2.0.0", - "postcss-import": "^8.1.2", "postcss-loader": "^0.13.0", "postcss-media-minmax": "^2.1.2", + "postcss-nested": "^1.0.0", "postcss-nesting": "^2.3.1", + "postcss-partial-import": "^2.0.0", "postcss-pseudoelements": "^3.0.0", "postcss-selector-matches": "^2.0.5", "postcss-selector-not": "^2.0.0", + "postcss-url": "^5.1.2", "raw-loader": "^0.5.1", "react-addons-test-utils": "15.3.2", "react-transform-catch-errors": "^1.0.2", diff --git a/tools/webpack.config.js b/tools/webpack.config.js index 4a8628f25..8653ac7e9 100644 --- a/tools/webpack.config.js +++ b/tools/webpack.config.js @@ -147,8 +147,11 @@ const config = { return { default: [ // Transfer @import rule by inlining content, e.g. @import 'normalize.css' - // https://github.com/postcss/postcss-import - require('postcss-import')({ addDependencyTo: bundler }), + // https://github.com/jonathantneal/postcss-partial-import + require('postcss-partial-import')({ addDependencyTo: bundler }), + // Allow you to fix url() according to postcss to and/or from options + // https://github.com/postcss/postcss-url + require('postcss-url')(), // W3C variables, e.g. :root { --color: red; } div { background: var(--color); } // https://github.com/postcss/postcss-custom-properties require('postcss-custom-properties')(), @@ -167,6 +170,9 @@ const config = { // Allows you to nest one style rule inside another // https://github.com/jonathantneal/postcss-nesting require('postcss-nesting')(), + // Unwraps nested rules like how Sass does it + // https://github.com/postcss/postcss-nested + require('postcss-nested')(), // W3C color() function, e.g. div { background: color(red alpha(90%)); } // https://github.com/postcss/postcss-color-function require('postcss-color-function')(), @@ -273,7 +279,12 @@ const serverConfig = extend(true, {}, config, { externals: [ /^\.\/assets$/, - /^[@a-z][a-z\/\.\-0-9]*$/i, + (context, request, callback) => { + const isExternal = + request.match(/^[@a-z][a-z\/\.\-0-9]*$/i) && + !request.match(/\.(css|less|scss|sss)$/i); + callback(null, Boolean(isExternal)); + }, ], plugins: [