Css-loader: a way to assign the result of a required css file to :global

[bdefore]

Before using css modules, I was able to import styles from react-select defaults using the following:

require('react-select/dist/default.css');

But those styles are not required by default to :global and since they are not being referenced anywhere explicitly they are not being included in the bundle. A workaround I've made is to duplicate the default.css and prepend all selectors with :global(.class-name) but it'd be nice if I could signify that I'd like this require to be loaded into :global along the lines of:

require('global!react-select/dist/default.css');

[sokra]

module: {
  loaders: [
    [
      {
        test: /\.css$/,
        include: path.resolve("./node_modules/react-select"),
        loader: "style-loader!css-loader"
      },
      { test: /\.css$/, loader: "style-loader!css-loader?modules" },
  ]
}

[dtothefp]

It seems like when creating/using a global module it would be more useful to do something like

.flex,
:global .flex {
  display: flex;
}

but this throws an error in the css-loader. It seems that in the example above if you wanted to use something out of the react-select module locally, and then the same thing globally, say in some HTML generated outside of Webpack, you would get duplicated code.

[sokra]

.flex,
:global(.flex) {
  display: flex;
}

[dtothefp]

@sokra thanks for the tip. I'm a little confused because when looking at this example they are able to use :global without the parenthesis, which I was assuming was "sugar".

https://github.com/css-modules/webpack-demo/blob/master/src/components/2-GlobalSelectors/GlobalSelectors.css

Confusing why that works for the scenario for only one class name, but not when two class names are associated with a given css block:

_Works_

.flex-row,
:global(.flex-row) {
  flex-direction: row;
}

:global .flex-column {
  flex-direction: column;
}

_Doesn't Work_

.flex-row,
:global .flex-row {
  flex-direction: row;
}

:global .flex-column {
  flex-direction: column;
}

[edygar]

What if there was a loader for importing CSS modules as global, one we could simply import like:

require('globally!react-select/dist/default.css');

Tha way would be pretty easy to just use a third-party without hacking/injecting in its CSS.

[StevenLangbroek]

@edygar

:global {
  @import '~react-select/scss/default';
}

[adamgruber]

@StevenLangbroek I'm doing this inside my app.css file

:global {
  @import 'some-vendor-component.css';
}

However, in the output css I still see classes like this: app--vendor-class-that-i-want-to-be-global{rules...} Should this work or is something else missing?

[sohkai]

@adamgruber Although :global { @import ... } works for most of the cases, it can sometimes break when you use a preprocessor or postcss plugin that enables the & operator. I've left a comment in https://github.com/css-modules/css-modules/pull/65#issuecomment-214221200 describing this. Is this what you're seeing as well or is there another issue causing it?

[simongfxu]

@sokra I am using postcss and extract text plugin, this does not work.
also tried this way, failed too.

:global {
  @import 'some-vendor-component.css';
}

I am just going to copy the css from node_modules and edit it manually.