ff-stream-web

commit 048e67f957f4b0eed7e67094544eee1b47083fe4
parent 2f7d127894fd547700a784c57f83af276b3e24bd
Author: Vladimir Kutepov <frenzzy.man@gmail.com>
Date:   Fri, 21 Oct 2016 23:04:10 +0400

Add ability to import external css (#920)

- Allows to import external css from node_modules (ref #510, #824)
- Allows to properly process `url()` statements (ref #825)
- Allows to import css without css-modules prefixing (close #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 #375 and #423
Diffstat:
M
package.json
 | 
4
+++-
M
tools/webpack.config.js
 | 
17
++++++++++++++---

2 files changed, 17 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
@@ -84,13 +84,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-hot-loader": "^3.0.0-beta.6",
diff --git 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')(),
@@ -267,7 +273,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: [