|
5 | 5 |
|
6 | 6 | Seamless mapping of class names to CSS modules inside of React components.
|
7 | 7 |
|
| 8 | +- [What's the Problem?](#whats-the-problem) |
| 9 | +- [Usage](#usage) |
| 10 | + - [Options](#options) |
| 11 | + - [`allowMultiple`](#allowmultiple) |
| 12 | + - [`keepOriginal`](#keeporiginal) |
| 13 | + - [`errorNotFound`](#errornotfound) |
| 14 | +- [SASS, SCSS, LESS and other CSS Preprocessors](#sass-scss-less-and-other-css-preprocessors) |
| 15 | +- [Multiple CSS Classes](#multiple-css-classes) |
| 16 | + |
8 | 17 | ## What's the Problem?
|
9 | 18 |
|
10 | 19 | [CSS modules](https://github.com/css-modules/css-modules) are awesome. If you are not familiar with CSS modules, it is a concept of using a module bundler such as [webpack](http://webpack.github.io/docs/) to load CSS scoped to a particular document. CSS modules loader will generate a unique name for a each CSS class at the time of loading the CSS. Refer to [webpack-demo](https://css-modules.github.io/webpack-demo/) for a full example.
|
@@ -111,6 +120,38 @@ Thats it!
|
111 | 120 |
|
112 | 121 | ### Options
|
113 | 122 |
|
| 123 | +Options are supplied as the third parameter to the `CSSModules` function. |
| 124 | + |
| 125 | +```js |
| 126 | +CSSModules(Component, styles, options); |
| 127 | +``` |
| 128 | + |
| 129 | +#### `allowMultiple` |
| 130 | + |
| 131 | +Allows multiple CSS class names. Default: `true`. |
| 132 | + |
| 133 | +When `false`, the following will cause an error: |
| 134 | + |
| 135 | +```js |
| 136 | +<div className='foo bar' /> |
| 137 | +``` |
| 138 | + |
| 139 | +#### `keepOriginal` |
| 140 | + |
| 141 | +Keeps original CSS class name in addition to names of the CSS Modules. Default: `true`. |
| 142 | + |
| 143 | +When `true`, the following `ReactElement`: |
| 144 | + |
| 145 | +```js |
| 146 | +<div className='foo bar' /> |
| 147 | +``` |
| 148 | + |
| 149 | +will be rendered with a `className` property "foo foo-unique-css-module reference bar bar-unique-css-module-reference". |
| 150 | + |
| 151 | +#### `errorNotFound` |
| 152 | + |
| 153 | +Throws an error when class name cannot be mapped to a CSS Module. Default: `false`. |
| 154 | + |
114 | 155 | ## SASS, SCSS, LESS and other CSS Preprocessors
|
115 | 156 |
|
116 | 157 | [ICSS](https://github.com/css-modules/icss) is compatible with the CSS Preprocessors. All you need is to add the preprocessor to the chain of loaders, e.g. in the case of webpack it is as simple as installing `sass-loader` and adding `!sass` to the end of the `style-loader` loader chain declaration (loaders are processed from right to left):
|
|
0 commit comments