• Stars
    star
    1,487
  • Rank 31,595 (Top 0.7 %)
  • Language
    JavaScript
  • Created over 9 years ago
  • Updated about 4 years ago

Reviews

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

Repository Details

Working demo of CSS Modules, using Webpack's css-loader in module mode

Codeship Status for css-modules/webpack-demo

CSS Modules Webpack Demo

A working demo of CSS Modules, using Webpack's css-loader in module mode.

Run the example

$ npm install
$ npm start & open http://localhost:8080

npm modules required for CSS modules

In this project's package.json file you find a lot of npm modules for this demo application. Since not all of them are required for the actual CSS modules features, we've created the following list to describe their purposes.

Required modules

The following modules are the only ones really needed to get started with CSS modules:

Module Description
Webpack Webpack (obviously...)
webpack-dev-server (Optional) Supports hotloading of changed files etc while developing
style-loader and css-loader style-loader and css-loader process your CSS files. css-loader is the loader that actual makes CSS modules work

To make CSS modules work with Webpack you only have to include the modules mentioned above and add the following loader to your webpack.config.js file:

. . .
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}
. . .

Optional modules

The following modules control the actual CSS processing. They are not CSS modules specific and can be used with both "regular" CSS and CSS modules:

Module Description
postcss-loader Allows execution of various CSS post processor in Webpack. Required for autoprefixer-core and postcss-color-rebeccapurple
autoprefixer-core Add vendor-prefixes to your css code (according to the GitHub page it is deprecated and should be replaced by autoprefixer
postcss-color-rebeccapurple Another CSS post processor. Only needed to support rebeccapurple color in CSS
extract-text-webpack-plugin Writes the CSS code processed by Webpack into an own CSS-file and not into the generated bundle JavaScript file.

Unrelated modules

This modules are only needed for the demo application:

Module Description
babel ESx-to-ES5 compiler. Mostly needed for React code
ejs JavaScript templating language
react-to-html-webpack-plugin Webpack plug-in that renders React components
node-libs-browser Node libraries for in-browser use
gh-pages Publishes file to a gh-pages branches for GitHub pages
url-loader Webpack file handling, e.g. for images
file-loader Webpack file handling, e.g. for images
raw-loader It’s used to load raw css files (as utf8) into the demo so it can be rendered into <code>

License

MIT

More Repositories

1

css-modules

Documentation about css-modules
17,621
star
2

icss

Interoperable CSS β€” a standard for loadable, linkable CSS
612
star
3

css-modules-require-hook

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

css-modulesify

A browserify plugin to load CSS Modules
JavaScript
406
star
5

postcss-icss-values

Pass arbitrary constants between your module files
JavaScript
202
star
6

css-modules-loader-core

A loader-agnostic CSS Modules implementation, based on PostCSS
JavaScript
92
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