From e85c880036aecebbdfab0130186c4e07ab12fff6 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish
Date: Thu, 4 Jun 2015 07:30:09 +1000
Subject: [PATCH 1/2] Rename project to css-modulesify
---
README.md | 35 ++++++++++++++++------------------
example/index.html | 4 ++--
lib/{local-css.js => index.js} | 0
package.json | 10 +++++-----
4 files changed, 23 insertions(+), 26 deletions(-)
rename lib/{local-css.js => index.js} (100%)
diff --git a/README.md b/README.md
index c05ebe5..1105ffa 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,20 @@
-local-css
-====
+# css-modulesify
-A browserify transform allowing you to `require('styles.css')` and get back locally scoped classnames.
+A browserify transform to load [CSS Modules](https://github.com/css-modules/css-modules).
-This is based on some ideas around [css-modules](http://github.com/css-modules), but not yet as fully-featured.
+** Please note that this is still highly experimental. **
-Why local css?
-----
+## Why CSS Modules?
-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.
+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.
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.
-Usage
-----
+## Usage
-First install the package: `npm install --save local-css`
+First install the package: `npm install --save css-modulesify`
-Then you can use it as a browserify transform, eg: `browserify -t local-css example/index.js`
+Then you can use it as a browserify transform, eg: `browserify -t css-modulesify example/index.js`
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.
@@ -31,21 +28,21 @@ var div = `...
`;
To add the css to the html page there are 2 easy options:
- add the css to the DOM at runtime (good for component-based css): `require('insert-css')(require('./styles.css'))`
-- export a static css file at build-time: `browserify -t local-css example/export-css.js | node > bundle.css`
+- export a static css file at build-time: `browserify -t css-modulesify example/export-css.js | node > bundle.css`
-Example
-----
+## Example
-Take a look at the [example](./example/index.js) for more details, or [inspect the source](http://joshwnj.github.io/local-css/).
+Take a look at the [example](./example/index.js) for more details, or [inspect the source](https://css-modules.github.io/css-modulesify/).
-Licence
-----
+## Licence
MIT
-Thanks and inspiration
-----
+## Thanks and inspiration
To all the fine folk working on [css-modules](https://github.com/css-modules)
+
+----
+Josh Johnston, 2015.
diff --git a/example/index.html b/example/index.html
index f54b3bf..bdb4b39 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,10 +1,10 @@
- Local CSS Demo
+ css-modulesify demo
-
+
diff --git a/lib/local-css.js b/lib/index.js
similarity index 100%
rename from lib/local-css.js
rename to lib/index.js
diff --git a/package.json b/package.json
index a98c97e..a3efb54 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
- "name": "local-css",
+ "name": "css-modulesify",
"version": "1.1.1",
- "description": "A browserify transform allowing you to `require('styles.css')` and get back locally scoped classnames.",
- "main": "index.js",
+ "description": "A browserify transform to load CSS Modules",
+ "main": "lib/index.js",
"dependencies": {
"autoprefixer-core": "^5.2.0",
"css-modules-loader-core": "0.0.3",
@@ -18,8 +18,8 @@
"watchify": "^3.2.1"
},
"scripts": {
- "build-example": "browserify -t ./lib/local-css -o example/dist/index.js example/index.js",
- "export-css": "browserify -t ./lib/local-css example/export-css.js | node",
+ "build-example": "browserify -t ./lib -o example/dist/index.js example/index.js",
+ "export-css": "browserify -t ./lib example/export-css.js | node",
"publish-gh-pages": "npm run build-example && ./bin/publish-gh-pages",
"test": "echo \"Error: no test specified\" && exit 1"
},
From 87232746e84c7940dfd68a6afdc5d5c369b3abb3 Mon Sep 17 00:00:00 2001
From: Mark Dalgleish
Date: Thu, 4 Jun 2015 07:31:45 +1000
Subject: [PATCH 2/2] Remove unused code and dependencies
---
lib/index.js | 4 ----
lib/prefix-selector.js | 22 ----------------------
package.json | 7 +------
3 files changed, 1 insertion(+), 32 deletions(-)
delete mode 100644 lib/prefix-selector.js
diff --git a/lib/index.js b/lib/index.js
index 61d14fb..33caf3b 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,9 +1,5 @@
var path = require('path');
var through = require('through');
-var postcss = require('postcss');
-var autoprefixer = require('autoprefixer-core');
-var shasum = require('shasum');
-var prefixSelector = require('./prefix-selector');
var FileSystemLoader = require('css-modules-loader-core/lib/file-system-loader');
var cssExt = /\.css$/;
diff --git a/lib/prefix-selector.js b/lib/prefix-selector.js
deleted file mode 100644
index dc14c01..0000000
--- a/lib/prefix-selector.js
+++ /dev/null
@@ -1,22 +0,0 @@
-var Tokenizer = require('css-selector-tokenizer');
-
-module.exports = function (basename, hash, rule) {
- var selector = Tokenizer.parse(rule.selector);
- selector.nodes = prefixNodes(basename, hash, selector.nodes);
- return Tokenizer.stringify(selector);
-};
-
-function prefixNodes (basename, hash, nodes) {
- return nodes
- .map(function(node, i) {
- var newNode = node;
-
- if (node.type === 'class') {
- newNode.name = basename + '__' + node.name + '___' + hash;
- } else if (newNode.nodes) {
- newNode.nodes = prefixNodes(basename, hash, newNode.nodes);
- }
-
- return newNode;
- });
-}
diff --git a/package.json b/package.json
index a3efb54..72b897f 100644
--- a/package.json
+++ b/package.json
@@ -4,18 +4,13 @@
"description": "A browserify transform to load CSS Modules",
"main": "lib/index.js",
"dependencies": {
- "autoprefixer-core": "^5.2.0",
"css-modules-loader-core": "0.0.3",
- "css-selector-tokenizer": "^0.3.1",
- "postcss": "^4.1.11",
- "shasum": "^1.0.1",
"through": "^2.3.7"
},
"devDependencies": {
"gh-pages": "^0.3.0",
"hyperscript": "^1.4.6",
- "insert-css": "^0.2.0",
- "watchify": "^3.2.1"
+ "insert-css": "^0.2.0"
},
"scripts": {
"build-example": "browserify -t ./lib -o example/dist/index.js example/index.js",