@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

``js
import CSSModules from '@navaru/css'

const css = CSSModules()
const { exports } = css.load('./example/basic/index.css')

// exports.box == '_basic_index_box'
const html =

// 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

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 or module (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

$3


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';
`

$3


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'
``

$3