• Stars
    star
    92
  • Rank 362,966 (Top 8 %)
  • Language
    JavaScript
  • Created over 9 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A loader-agnostic CSS Modules implementation, based on PostCSS

CSS Module Loader Core

A loader-agnostic CSS Modules implementation, based on PostCSS

Build Status

API

import Core from 'css-modules-loader-core'
let core = new Core()

core.load( sourceString , sourcePath , pathFetcher ) =>
  Promise({ injectableSource, exportTokens })

Processes the input CSS sourceString, looking for dependencies such as @import or :import. Any localisation will happen by prefixing a sanitised version of sourcePath When dependencies are found, it will ask the pathFetcher for each dependency, resolve & inline any imports, and return the following object:

  • injectableSource: the final, merged CSS file without @import or :import statements
  • exportTokens: the mapping from local name to scoped name, as described in the file's :export block

These should map nicely to what your build-tool-specific loader needs to do its job.

new Core([plugins])

The default set of plugins is [postcss-modules-local-by-default, postcss-modules-extract-imports, postcss-modules-scope] (i.e. the CSS Modules specification). This can override which PostCSS plugins you wish to execute, e.g.

import Core from 'css-loader-core'
import autoprefixer from 'autoprefixer'
import colorFunctions from 'postcss-color-function'

// Don't run local-by-default, but use colorFunctions 
// beforehand and autoprefixer afterwards:
let core = new Core([
  colorFunctions, 
  core.plugins.extractImports, 
  core.plugins.scope, 
  autoprefixer("Last 2 Versions")
])

More Repositories

1

css-modules

Documentation about css-modules
17,621
star
2

webpack-demo

Working demo of CSS Modules, using Webpack's css-loader in module mode
JavaScript
1,487
star
3

icss

Interoperable CSS — a standard for loadable, linkable CSS
612
star
4

css-modules-require-hook

A require hook to compile CSS Modules in runtime
JavaScript
485
star
5

css-modulesify

A browserify plugin to load CSS Modules
JavaScript
406
star
6

postcss-icss-values

Pass arbitrary constants between your module files
JavaScript
202
star
7

browserify-demo

A working demo of CSS Modules, using css-modulesify
JavaScript
87
star
8

css-selector-tokenizer

Parses and stringifies CSS selectors.
JavaScript
84
star
9

postcss-icss-composes

A CSS Modules transform to extract export statements from local-scope classes
JavaScript
55
star
10

jspm-demo

CSS Modules & JSPM
JavaScript
52
star
11

postcss-modules-extract-imports

A CSS Modules transform to extract local aliases for inline imports
JavaScript
40
star
12

postcss-modules-values

Pass arbitrary constants between your module files
JavaScript
35
star
13

postcss-modules-scope

A CSS Modules transform to extract export statements from local-scope classes
JavaScript
23
star
14

icss-utils

Search & replace tokens during the linking stage of ICSS loading
JavaScript
22
star
15

postcss-modules-local-by-default

PostCSS plugin for css modules to local-scope classes and ids
JavaScript
20
star
16

cssm-rails

WIP of a Rails plugin for CSS Modules
Ruby
17
star
17

generic-names

Helper for building generic names, similar to webpack
JavaScript
15
star
18

postcss-modules-resolve-imports

Resolves ICSS imports
JavaScript
9
star
19

postcss-modules-lint

PostCSS plugin to verify the scoping of selectors in CSS Modules
JavaScript
8
star
20

logos

Official CSS Modules logos
5
star
21

postcss-icss-keyframes

PostCSS plugin for css-modules to local-scope keyframes
JavaScript
5
star
22

postcss-icss

Postcss plugin to process css modules and extract tokens
JavaScript
4
star
23

postcss-icss-import

PostCSS plugin for css-modules to convert @import statements to ICSS
JavaScript
2
star
24

postcss-icss-url

JavaScript
2
star