Skip to content

Commit 45dc4af

Browse files
joshwnjjoshwnj
committed
Merge pull request #2 from markdalgleish/rename-project
Rename project to css-modulesify
2 parents 3503ea8 + 8723274 commit 45dc4af

File tree

5 files changed

+24
-58
lines changed

5 files changed

+24
-58
lines changed

‎README.md

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
1-
local-css
2-
====
1+
# css-modulesify
32

4-
A browserify transform allowing you to `require('styles.css')` and get back locally scoped classnames.
3+
A browserify transform to load [CSS Modules](https://github.com/css-modules/css-modules).
54

6-
This is based on some ideas around [css-modules](http://github.com/css-modules), but not yet as fully-featured.
5+
** Please note that this is still highly experimental. **
76

8-
Why local css?
9-
----
7+
## Why CSS Modules?
108

11-
Normally you need to use a strict naming convention like BEM to ensure that one component's CSS doesn't collide with another's. Locally-scoped css allows you to use names that are meaningful within the context of the component, without any danger of name collision.
9+
Normally you need to use a strict naming convention like BEM to ensure that one component's CSS doesn't collide with another's. CSS Modules are locally scoped, which allows you to use names that are meaningful within the context of the component, without any danger of name collision.
1210

1311
Read Mark Dalgleish's excellent ["End of Global CSS"](https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284) and check out [css-modules](http://github.com/css-modules) for more context.
1412

15-
Usage
16-
----
13+
## Usage
1714

18-
First install the package: `npm install --save local-css`
15+
First install the package: `npm install --save css-modulesify`
1916

20-
Then you can use it as a browserify transform, eg: `browserify -t local-css example/index.js`
17+
Then you can use it as a browserify transform, eg: `browserify -t css-modulesify example/index.js`
2118

2219
Inside `example/index.js` you can now load css into your scripts. When you do `var box1 = require('./box1.css')`, `box1` will be an object to lookup the localized classname for one of the selectors in that file.
2320

@@ -31,21 +28,21 @@ var div = `<div class="${styles.inner}">...</div>`;
3128
To add the css to the html page there are 2 easy options:
3229

3330
- add the css to the DOM at runtime (good for component-based css): `require('insert-css')(require('./styles.css'))`
34-
- export a static css file at build-time: `browserify -t local-css example/export-css.js | node > bundle.css`
31+
- export a static css file at build-time: `browserify -t css-modulesify example/export-css.js | node > bundle.css`
3532

36-
Example
37-
----
33+
## Example
3834

39-
Take a look at the [example](./example/index.js) for more details, or [inspect the source](http://joshwnj.github.io/local-css/).
35+
Take a look at the [example](./example/index.js) for more details, or [inspect the source](https://css-modules.github.io/css-modulesify/).
4036

4137

42-
Licence
43-
----
38+
## Licence
4439

4540
MIT
4641

4742

48-
Thanks and inspiration
49-
----
43+
## Thanks and inspiration
5044

5145
To all the fine folk working on [css-modules](https://github.com/css-modules)
46+
47+
----
48+
Josh Johnston, 2015.

‎example/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Local CSS Demo</title>
4+
<title>css-modulesify demo</title>
55
</head>
66
<body>
7-
<h1><a href="https://github.com/joshwnj/local-css">local-css</a></h1>
7+
<h1><a href="https://github.com/css-modules/css-modulesify">css-modulesify</a></h1>
88
<div id="content"></div>
99
<script src="dist/index.js"></script>
1010
</body>

‎lib/local-css.js renamed to ‎lib/index.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
var path = require('path');
22
var through = require('through');
3-
var postcss = require('postcss');
4-
var autoprefixer = require('autoprefixer-core');
5-
var shasum = require('shasum');
6-
var prefixSelector = require('./prefix-selector');
73
var FileSystemLoader = require('css-modules-loader-core/lib/file-system-loader');
84

95
var cssExt = /\.css$/;

‎lib/prefix-selector.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎package.json

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
{
2-
"name": "local-css",
2+
"name": "css-modulesify",
33
"version": "1.1.1",
4-
"description": "A browserify transform allowing you to `require('styles.css')` and get back locally scoped classnames.",
5-
"main": "index.js",
4+
"description": "A browserify transform to load CSS Modules",
5+
"main": "lib/index.js",
66
"dependencies": {
7-
"autoprefixer-core": "^5.2.0",
87
"css-modules-loader-core": "0.0.3",
9-
"css-selector-tokenizer": "^0.3.1",
10-
"postcss": "^4.1.11",
11-
"shasum": "^1.0.1",
128
"through": "^2.3.7"
139
},
1410
"devDependencies": {
1511
"gh-pages": "^0.3.0",
1612
"hyperscript": "^1.4.6",
17-
"insert-css": "^0.2.0",
18-
"watchify": "^3.2.1"
13+
"insert-css": "^0.2.0"
1914
},
2015
"scripts": {
21-
"build-example": "browserify -t ./lib/local-css -o example/dist/index.js example/index.js",
22-
"export-css": "browserify -t ./lib/local-css example/export-css.js | node",
16+
"build-example": "browserify -t ./lib -o example/dist/index.js example/index.js",
17+
"export-css": "browserify -t ./lib example/export-css.js | node",
2318
"publish-gh-pages": "npm run build-example && ./bin/publish-gh-pages",
2419
"test": "echo \"Error: no test specified\" && exit 1"
2520
},

0 commit comments

Comments
 (0)