Add ability to import external css

[frenzzy]

• Allows to import external css from node_modules (ref Having issues using CSS #510, Error "Unexpected token ." while import external css to a component #824, 'Unexpected token .' when importing a React component from node_modules #902)

• Allows to properly process url() statements (ref Error "Cannot resolve module" when import a external css file contains url(image.png) #825)

• Allows to import css without css-modules prefixing (close How do you include a CSS file from node_modules without it prefixing? #771)

  /* 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

[langpavel]

LGTM

[kevin-chau]

This feature isn't working for me. I'm trying to the css from a node module called rc-slider ('rc-slider/dist/rc-slider.css') similar to #510 and #771. Using the :global import syntax in my component stylesheet doesn't seem to be working. But I have gotten the external css to load using import s from '!!isomorphic-style-loader!css-loader!rc-slider/dist/rc-slider.css'; or by just linking the css in the html like <link rel="stylesheet" href="https://npmcdn.com/rc-slider@6.1.1/dist/rc-slider.css" />.

I'm not really happy with either one of these work arounds so I'm wondering what I'm doing wrong with my global import.

[frenzzy]

It happens because of issue with csstools/postcss-partial-import#35
refs #1123, #1144, #1145
As a temp solution you can rollback this plugin to v2.*
Or consider to start using postcss-global-import plugin:
css-modules/css-modules#65 (comment)

[glenne]

What is the status of this? kevinchau321 commented on Feb 21 that the :global import did not work. This is also my experience but fortunately his import s from example did work for me.

[frenzzy]

@glenne you just need to import external css inside your component:

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import external from 'external.css';
import s from './MyComponent.css';

class MyComponent extends React.Component {
  render() {
    return <div className={s.local}><div className="global">Hi</div></div>
  }
}

export default withStyles(external, s)(MyComponent);

refs #1277, #1274