Skip to content

Beta #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 40 commits into from
Feb 22, 2016
Merged

Beta #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
88674f1
demo
mightyaleksey Jan 11, 2016
0d27119
barely working app
mightyaleksey Jan 11, 2016
1df2a31
common setup for the editor
mightyaleksey Feb 12, 2016
0a5c7bd
the new tests
mightyaleksey Feb 12, 2016
9d34fd3
raw preset implementation
mightyaleksey Feb 12, 2016
18e9c9b
package update
mightyaleksey Feb 12, 2016
72ee0a0
more tests for the public api
mightyaleksey Feb 17, 2016
7a54d1f
test for generateScopedName option
mightyaleksey Feb 17, 2016
3292d25
validation draft
mightyaleksey Feb 18, 2016
0a4abde
implemented validation
mightyaleksey Feb 18, 2016
ded4430
ignore option draft
mightyaleksey Feb 18, 2016
b76dd64
simple css test cases
mightyaleksey Feb 18, 2016
0cb6adc
small fallback for the modern versions
mightyaleksey Feb 18, 2016
f642f8a
todo
mightyaleksey Feb 18, 2016
42f5488
cleanup
mightyaleksey Feb 18, 2016
d9ceb68
fix for the compose-node-module test
mightyaleksey Feb 19, 2016
57caf73
scripts update
mightyaleksey Feb 19, 2016
1e16d59
ignore option implementation
mightyaleksey Feb 19, 2016
2ddce59
extra test
mightyaleksey Feb 19, 2016
a985863
falling test for preset
mightyaleksey Feb 19, 2016
1373275
presets implementation
mightyaleksey Feb 20, 2016
903c058
added babel compiler to tests
mightyaleksey Feb 21, 2016
45bc7ee
npmignore
mightyaleksey Feb 21, 2016
60460ad
build script
mightyaleksey Feb 21, 2016
57249c7
test command updated for babel
mightyaleksey Feb 21, 2016
13a2da8
test for environment
mightyaleksey Feb 22, 2016
1afd7af
small update
mightyaleksey Feb 22, 2016
86a0a08
readme update
mightyaleksey Feb 22, 2016
164873b
added description about ignore option
mightyaleksey Feb 22, 2016
6f57c7f
test fix
mightyaleksey Feb 22, 2016
02008fd
debugability
mightyaleksey Feb 22, 2016
bddbf22
preset fix
mightyaleksey Feb 22, 2016
3dfdca9
devMode
mightyaleksey Feb 22, 2016
470a33a
coverage report
mightyaleksey Feb 22, 2016
5b08828
multiple extensions
mightyaleksey Feb 22, 2016
3816896
devMode test
mightyaleksey Feb 22, 2016
13f1f01
preset update
mightyaleksey Feb 22, 2016
1b1f440
small fix
mightyaleksey Feb 22, 2016
aa1bee5
extra extensions test
mightyaleksey Feb 22, 2016
ac0edf3
readme update
mightyaleksey Feb 22, 2016
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"presets": [
"es2015"
]
}
11 changes: 11 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# cheat sheet: http://EditorConfig.org
8 changes: 0 additions & 8 deletions .eslintignore

This file was deleted.

11 changes: 0 additions & 11 deletions .eslintrc

This file was deleted.

3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,3 @@ node_modules/*

# added automatically by precommit-hook as defaults
.jshint*

dist/
!node_modules/awesome-theme
13 changes: 5 additions & 8 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
# Generated by dmn (https://github.com/inikulin/dmn)

.git*
.babelrc
.editorconfig
.gitignore
.npmignore
.travis.yml
generate-tests.js
src/
test/
utils/
webpack.config.js
coverage
demo
3 changes: 1 addition & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
language: node_js
node_js:
- "4.1"
- "0.12"
- "4.3"
52 changes: 34 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,7 @@ Compiling in runtime, [universal](https://medium.com/@mjackson/universal-javascr

## Requirements

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

- [postcss](https://github.com/postcss/postcss) version 5 or higher
- [postcss-modules-values](https://github.com/css-modules/postcss-modules-values)
- [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports)
- [postcss-modules-local-by-default](https://github.com/css-modules/postcss-modules-local-by-default)
- [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope)
To use this tool we require [Node.js v0.12.x](https://github.com/nodejs/node) (or higher).

## Installation

Expand All @@ -30,28 +24,45 @@ $ npm i css-modules-require-hook

## Usage

In this section I've tried to cover the common cases of usage.
Now, there are two ways to attach hook: manually or using preset file.

### Development mode
The first one allows you to pass options manually after module was required. Example:

Usually, Node.js caches all the `require` calls by default. In order to invalidate cache for the purpose of development you should set the environment variable `NODE_ENV` to `development`. For example:
```javascript
const hook = require('css-modules-require-hook');

```bash
$ NODE_ENV=development node server.js
```
hook({
generateScopedName: '[name]__[local]___[hash:base64:5]',
});

Still you can use `devMode` option (see below) to override behavior which is imposed by environment variable.
// const styles = require('./icon.css');
```

### Basic example
The second one allows you to move options to the separate file `cmrh.conf.js`. Config file should be located in the same directory where executor is or in its ancestor directories. In that case hook will be attached right after the `css-modules-require-hook/preset` module will be required. Example:

Basically to attach the require hook you need to require this module. If you need to adjust it see the tuning section below.
```javascript
// cmrh.conf.js
module.exports = {
generateScopedName: '[name]__[local]___[hash:base64:5]',
};
```

```javascript
require('css-modules-require-hook');
require('css-modules-require-hook/preset');

// var styles = require('./icon.css');
// const styles = require('./icon.css');
```

### Development mode

Usually, Node.js caches all the `require` calls by default. In order to invalidate cache for the purpose of development you should set the environment variable `NODE_ENV` to `development`. For example:

```bash
$ NODE_ENV=development node server.js
```

Still you can use `devMode` option (see below) to override behavior which is imposed by environment variable.

### Adding custom PostCSS plugins

```javascript
Expand Down Expand Up @@ -166,6 +177,10 @@ hook({

Attach the require hook to additional file extensions (for example `['.scss']`).

### `ignore` function|regex|string

Provides possibility to exclude particular files from processing. Supports glob and regular expressions syntax. Also you may provide custom function.

### `rootDir` string

Provides 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.
Expand Down Expand Up @@ -213,6 +228,7 @@ Short alias for the [postcss-modules-local-by-default](https://github.com/css-mo

[debug](https://www.npmjs.com/package/debug) package is used for debugging. So to turn it on simply specify the **DEBUG** environment variable:
- `DEBUG=css-modules:fetch` — to see resolved paths to the files.
- `DEBUG=css-modules:preset` — to see whether config was found or not.
- `DEBUG=css-modules:setup` — to see the new options list.
- `DEBUG=css-modules:*` — to see everything.

Expand Down
7 changes: 7 additions & 0 deletions demo/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"presets": [
"es2015",
"react",
"stage-0"
]
}
Loading