@navaru/css
CSS Modules are files in which all class names are scoped locally by default, this fixes the problem of global scope in CSS.
Example
import CSSModules from '@navaru/css'
const css = CSSModules()
const { exports } = css.load('./example/basic/index.css')
// exports.box == '_basic_index_box'
const html = `
<div class="${ exports.box }">some content</div>
`
// get the loaded bundle
const bundle = css.bundle()
APIs
import CSSModules from '@navaru/css'
const css = CSSModules(options)
Options:
-
resolve(request, from)
- resolve the-
request
- the requested import from:@import name from 'request'
-
from
(optional) - the folder name from which the request is made
-
-
setName(name, file)
- generates the class names- defaults to
_${folder}_${filename}_${classname}
-
name
- the CSS class name
- defaults to
CSS module object format:
-
path
— the file path -
source
— the source file contents -
ast
— the CSS abstract syntax tree -
imports
— the imported class names -
local
— an object containing class names and generated names -
exports
— an object containing class names and generated names plus composed values
css.load(path, type)
Parses source code and returns a module
object.
-
path
- CSS file path -
type
- CSS Module type,raw
ormodule
(optional)
const cssModule = css.load('./file.css')
css.bundle()
Return the CSS bundled source.
const source = css.bundle()
css.use(plugin)
Plugins allow you to customise the format and output of a CSS module.
-
plugin
- a plugin function with the following format(module, bundler) => {}
const logAST = (module, css) => {
console.log(module.ast)
}
css.use(logAST)
css.parse(options)
-
file
- absolute file path -
source
- CSS source string -
type
- raw or module-
module
- will parse the file generating class names and exporting values -
raw
- will load the CSS file as is, not generating class names, useful when bundling 3rd party CSS files
-
Loads a CSS file and returns an object module
containing
const cssModule = css.parse({
file: '/path/to/file.css',
source: 'body { background: white }',
type: 'raw',
})
Specifications
Importing styles
Include all styles into bundle, parsing and generating class names:
@import from './file.css';
Import class names into local scope, prefixed with base
:
@import * as base from './base.css';
.iconButton {
compose: base.button;
}
Import specific class names into local scope:
@import button, icon from './base.css';
.button_icon {
compose: button, icon;
}
Import a file as is, without parsing its content, designed for bundling external resources.
@import raw './some_library_styles.css';
Composition
Declaration compose
composes parent class name with the provided class names.
theme.css
.icon {
border: 1px solid #999999;
width: 2em;
height: 2em;
}
index.css
@import icon from './theme.css';
.button {
border: 1px solid #DEDEDE;
}
.button_icon {
compose: button, icon;
font-size: .875em;
}
index.js
import style from './style.css'
style.button_icon == '.button_icon .button .icon'