PostCSS plugin for css-modules to local-scope keyframes
npm install postcss-icss-keyframescss
@keyframes foo {
from { width: 10px; }
to { width: 100px; }
}
/ transforms to /
:export {
foo: __scope__foo
}
@keyframes __scope__foo {
from { width: 10px; }
to { width: 100px; }
}
`
Usage
`js
postcss([ require('postcss-icss-keyframes')(options) ])
`
See [PostCSS] docs for examples for your environment.
$3
#### generateScopeName(keyframesName, filepath, css)
Converts every new animation name in @keyframes defintion to global alias.
By default returns __filename__keyframesName.
$3
Via postcss-modules-values
`
/ imported.css /
@keyframes foo {}
/ importer.css /
@value foo from './imported.css';
.bar {
animation-name: foo;
}
`
$3
Animation names are not replaced if css module does not contain @keyframes or @value defintions with the same name.
`
.foo {
animation-name: fade-in;
}
`
$3
postcss-icss-keyframes passes result.messages for each defined keyframes
`
{
plugin: 'postcss-icss-keyframes',
type: 'icss-scoped',
name: string, // local name
value: string // scoped name
}
``