Skip to content

Commit 9f33845

Browse files
committed
overview
1 parent a85a5c3 commit 9f33845

File tree

1 file changed

+32
-53
lines changed

1 file changed

+32
-53
lines changed

README.md

Lines changed: 32 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,59 @@
11
css-modules-require-hook
22
========================
33

4-
Automatically compiles a CSS Module to a low-level interchange format called ICSS or [Interoperable CSS](https://github.com/css-modules/icss).
4+
Summary
55

6-
One of the ways you can compile [CSS Modules](https://github.com/css-modules/css-modules) to the ICSS format is through the require hook. The require hook will bind itself to node's require and automatically compile files on the fly. This is similar to Babel's [babel/register](https://babeljs.io/docs/usage/require/).
6+
## What is CSS Modules
77

8-
## Requirements
8+
Summary
99

10-
To use this tool we require postcss and few plugins to be installed on your project. See the list below:
10+
## Features
1111

12-
- `"postcss": "4.x"`
13-
- `"postcss-modules-extract-imports": "0.x"`
14-
- `"postcss-modules-local-by-default": "0.x"`
15-
- `"postcss-modules-scope": "0.x"`
16-
17-
## Install
18-
19-
```bash
20-
$ npm i css-modules-require-hook
21-
```
12+
Compiling in runtime, universal apps
2213

2314
## Usage
2415

25-
```javascript
26-
require('css-modules-require-hook');
27-
```
28-
29-
## Available options
30-
31-
Providing additional options allows you to get advanced experience. See the variants below.
32-
33-
```javascript
34-
var hook = require('css-modules-require-hook');
35-
hook({ /* options */ });
36-
```
37-
38-
### `rootDir` option
39-
40-
Aliases are `root`, `d`.
41-
42-
Absolute path to your project's root directory. This is optional but providing it will result in better generated classnames. It can be obligatory, if you run require hook and build tools, like [css-modulesify](https://github.com/css-modules/css-modulesify) from different working directories.
43-
44-
### `use` option
16+
### Requirements
4517

46-
Alias is `u`.
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.
4719

48-
Custom list of plugins. This is optional but helps you to extend list of basic [postcss](https://github.com/postcss/postcss) plugins. Also helps to specify options for particular plugins.
20+
- [postcss](https://github.com/postcss/postcss) version 4 or higher
21+
- [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports)
22+
- [postcss-modules-local-by-default](https://github.com/css-modules/postcss-modules-local-by-default)
23+
- [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope)
4924

50-
### `createImportedName` option
25+
### Installation
5126

52-
Alias for the `createImportedName` option from the [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports) plugin. This is optional. Won't work if you `use` option.
27+
```bash
28+
$ npm i css-modules-require-hook
29+
```
5330

54-
### `generateScopedName` option
31+
### Tuning (options)
5532

56-
Custom function to generate class names. This is optional. Alias for the `generateScopedName` option from the [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope) plugin. Won't work if you `use` option.
33+
* `function` **createImportedName** — short alias for the [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports) plugin's `createImportedName` option.
34+
* `function` **generateScopedName** — short alias for the [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope) plugin's option. Helps you to specify the custom way to build generic names for the class selectors.
35+
* `function` **processCss** — in rare cases you may want to get compiled styles in runtime, so providing this option helps.
36+
* `string` **rootDir** — absolute path to the project directory. Providing this will result in better generated class names. It can be obligatory, if you run require hook and build tools (like [css-modulesify](https://github.com/css-modules/css-modulesify)) from different working directories.
37+
* `string` **to** — provides `to` option to the [LazyResult instance](https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts).
38+
* `array` **use** — custom subset of postcss plugins.
5739

58-
### `mode` option
40+
### Examples
5941

60-
Alias for the `mode` option from the [postcss-modules-local-by-default](https://github.com/css-modules/postcss-modules-local-by-default) plugin. This is optional. Won't work if you `use` option.
42+
Basically you need to require this plugin before other requires for your styles will occur.
6143

62-
## Examples
44+
```javascript
45+
require('css-modules-require-hook');
46+
// ...
47+
```
6348

64-
If you want to add custom functionality, for example [CSS Next](http://cssnext.io/setup/#as-a-postcss-plugin) plugin, you should provide the `use` option.
49+
In rare cases you may want to tune the require hook for better experience.
6550

6651
```javascript
6752
var hook = require('css-modules-require-hook');
53+
var path = require('path');
6854

6955
hook({
70-
use: [
71-
// adding CSS Next plugin
72-
require('cssnext')(),
73-
74-
// adding basic css-modules plugins
75-
require('postcss-modules-extract-imports'),
76-
require('postcss-modules-local-by-default'),
77-
require('postcss-modules-scope')
78-
]
56+
// setting root to the parent directory
57+
rootDir: path.join(__dirname, '..')
7958
});
8059
```

0 commit comments

Comments
 (0)