Skip to content

Commit 9d44f83

Browse files
committed
short description and basic examples
1 parent 9f33845 commit 9d44f83

File tree

1 file changed

+42
-5
lines changed

1 file changed

+42
-5
lines changed

README.md

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
css-modules-require-hook
22
========================
33

4-
Summary
4+
The require hook compiles [CSS Modules](https://github.com/css-modules/css-modules) in runtime. This is similar to Babel's [babel/register](https://babeljs.io/docs/usage/require/).
55

66
## What is CSS Modules
77

8-
Summary
8+
A **CSS Module** is a CSS file in which all class names and animation names are scoped locally by default. Learn more in the article [CSS Modules - Welcome to the Future](http://glenmaddern.com/articles/css-modules) by Glen Maddern.
99

1010
## Features
1111

12-
Compiling in runtime, universal apps
12+
Compiling in runtime, [universal](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) usage.
1313

1414
## Usage
1515

1616
### Requirements
1717

18-
To use this tool we require [Node.js](https://github.com/nodejs/node) v0.12.x (or higher) and several modules to be installed.
18+
To use this tool we require [Node.js v0.12.x](https://github.com/nodejs/node) (or higher) and several modules to be installed.
1919

2020
- [postcss](https://github.com/postcss/postcss) version 4 or higher
2121
- [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports)
@@ -40,10 +40,29 @@ $ npm i css-modules-require-hook
4040
### Examples
4141

4242
Basically you need to require this plugin before other requires for your styles will occur.
43+
For example:
44+
45+
*icon.css*
46+
```css
47+
.icon
48+
{
49+
composes: fa fa-hand-peace-o from 'font-awesome/css/font-awesome.css';
50+
}
51+
```
4352

53+
*server.js*
4454
```javascript
4555
require('css-modules-require-hook');
46-
// ...
56+
57+
var styles = require('./icon.css');
58+
var html = '<i class="' + styles.icon + '"></i>';
59+
// send it somehow :)
60+
```
61+
62+
You'll get:
63+
64+
```html
65+
<i class="_icon_font-awesome-css-font-awesome__fa _icon_font-awesome-css-font-awesome__fa-hand-peace-o"></i>'
4766
```
4867

4968
In rare cases you may want to tune the require hook for better experience.
@@ -57,3 +76,21 @@ hook({
5776
rootDir: path.join(__dirname, '..')
5877
});
5978
```
79+
80+
If you want to add any postcss plugins to the pipeline - you should use the `use` option.
81+
82+
```javascript
83+
var hook = require('css-modules-require-hook');
84+
85+
hook({
86+
use: [
87+
// adding CSS Next plugin
88+
require('cssnext')(),
89+
90+
// adding basic css-modules plugins
91+
require('postcss-modules-extract-imports'),
92+
require('postcss-modules-local-by-default'),
93+
require('postcss-modules-scope')
94+
]
95+
});
96+
```

0 commit comments

Comments
 (0)