@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

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

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'

License ISC