postcss-global-import v1.0.6
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.