postcss-global-import

Postcss global import.

Installation

npm install --save postcss-global-import

Example

Having files foo.css:

.foo {
  color: green;
}

@media (min-width: 640px) {
  .foo {
    color: red
  }
}

And local.css:

@global-import "./foo.css";

/* Some Css */

We will get:

:global .foo {
  color: green;
}

@media (min-width: 640px) {
  :global .foo {
    color: red
  }
}

/* Some Css */

Options

sync

In case of sync enabled this plugin will be work synchronously. It's useful in case with usage css-modules-require-hook hook, which doesn't support async postcss plugins.

globalizeKeyframes

By default, postcss-global-import do nothing with keyframe names, because there is no way to escape animation name in animation-name or animation properties for plugin postcss-modules-local-by-default which currently using as dependency postcss-modules plugin. So, in other words, if you are using postcss-modules or postcss-modules-local-by-default plugins and turn on globalizeKeyframes option, following css would be not imported properly:

@keyframes myCoolAnimation {
}

.foo {
  animation: myCoolAnimation;
}

And animation property value myCoolAnimation will be renamed but keyframe name not:

@keyframes myCoolAnimation {
}

.foo {
  animation: _myCoolAnimation__7zliz_1;
}

Turn this option on only if you want import keyframes itself and there are no usage of these keyframes in imported file. In this case postcss-global-import plugin turns

@keyframes myCoolAnimation {
}

into

@keyframes :global(myCoolAnimation) {
}

This semantic for keyframe names is supported by postcss-modules-local-by-default. There is new postcss-icss-keyframes plugin (which is coming to replace postcss-modules-local-by-default along with postcss-icss-selectors) which currently doesn't support any mechanics for escaping keyframe names from renaming. PRs for both postcss-icss-keyframes and postcss-global-import are welcome.

Configuring Webpack

Basically only thing you should do is include this plugin to plugin list inside your postcss.config.js file and configure any postcss loader for your css files.