Awesome
CSS Modules: Resolve Imports
Transforms:
:import("library/button.css") {
i__imported_button_0: button;
}
:export {
continueButton: _source_continueButton i__imported_button_0;
}
._source_continueButton {
color: green;
}
into:
:export {
continueButton: _source_continueButton _button_button
}
._button_button {
/*common button styles*/
}
._source_continueButton {
color: green
}
Note: should be used after postcss-modules-extract-imports and postcss-modules-scope.
The postcss-modules-resolve-imports
plugin also fixes @import
and url()
paths (which doesn't start from /
) for the included modules from the different folders.
Options
icssExports
boolean
Adds the :export
declaration to the resulting css. In case you need the JavaScript object with tokens, you may obtain it by accessing the lazyResult.root.exports
property. For example,
const lazyResult = postcss([...plugins]).process(cssString, {from: filepath});
const tokens = lazyResult.root.exports;
resolve
object
Configure how modules should be resolved.
resolve.alias
object
Create an aliases for the modules paths. For example, create an alias for the lib directory with common modules:
alias: {
lib: path.resolve(__dirname, 'lib'),
},
Now, instead of using relative paths when composing:
.button {
composes: normal from '../../lib/button.css';
}
you can use the alias:
.button {
composes: normal from 'lib/button.css';
}
resolve.extensions
array
Automaticaly check files with the provided extensions.
['.css']
Allows you to omit file extensions while using compose:
.button {
composes: normal from '../lib/button';
}
resolve.modules
array
Provide additional directories to check the modules in. Should be absolute paths only.
[path.resolve(__dirname, 'lib')]
resolve.mainFile
string
Specifies the default filename to be used while resolving directories. Default: index.css
.
resolve.preserveSymlinks
boolean
Wether to resolve symlinks in paths. Defaults to nodejs behaviour: false
,
(parsed from --preserve-symlinks
or environment variable PRESERVE_SYMLINKS
).
Reference Guides
- Interoperable CSS: https://github.com/css-modules/icss
- NodeJS modules resolving mechanism: https://nodejs.org/dist/latest-v6.x/docs/api/modules.html#modules_all_together
License
The MIT License