Add ability to import external css

- Allows to import external css from node_modules (ref kriasoft#510, kriasoft#824)
- Allows to properly process `url()` statements (ref kriasoft#825)
- Allows to import css without css-modules prefixing (close kriasoft#771)

  ```css
  /* Example: MyTextEditorComponent.css */
  :global {
    @import 'draft-js/dist/Draft.css'; /* external style without prefixing */
  }
  .button { color: red; } /* keep the prefixes for your own style */
  ```

Also closes kriasoft#375 and kriasoft#423

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",

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: [