CSS in js

Author: zoubin

.eslintrc

@@ -0,0 +1,80 @@
+---
+ecmaFeatures:
+  modules: true
+
+env:
+  browser: true
+  node: true
+  es6: true
+
+rules:
+  comma-dangle: [2, "always-multiline"]
+  no-dupe-args: 2
+  no-dupe-keys: 2
+  no-duplicate-case: 2
+  no-empty-character-class: 2
+  no-ex-assign: 2
+  no-extra-boolean-cast: 2
+  no-extra-parens: 2
+  no-extra-semi: 2
+  no-func-assign: 2
+  no-inner-declarations: 2
+  no-invalid-regexp: 2
+  no-irregular-whitespace: 2
+  no-negated-in-lhs: 2
+  no-obj-calls: 2
+  no-regex-spaces: 2
+  no-sparse-arrays: 2
+  no-unreachable: 2
+  use-isnan: 2
+  valid-typeof: 2
+  no-unexpected-multiline: 2
+  no-constant-condition: 2
+  no-control-regex: 2
+  no-debugger: 2
+  # code style
+  consistent-return: 0
+  curly: [2, "multi-line"]
+  default-case: 2
+  dot-notation: 2
+  dot-location: [2, "property"]
+  eqeqeq: [2, "allow-null"]
+  no-else-return: 2
+  no-lone-blocks: 2
+  no-loop-func: 2
+  no-multi-spaces: 2
+  no-multi-str: 2
+  no-proto: 2
+  no-redeclare: 2
+  no-return-assign: 2
+  no-sequences: 2
+  no-throw-literal: 2
+  no-unused-expressions: 2
+  no-void: 2
+  no-warning-comments: [2, { "terms": ["todo", "fixme", "xxx"], "location": "start"  }]
+  no-with: 2
+  radix: 2
+  no-delete-var: 2
+  no-shadow-restricted-names: 2
+  no-shadow: 2
+  no-undef: 2
+  no-unused-vars: 2
+  brace-style: [2, "1tbs", { "allowSingleLine": true }]
+  comma-spacing: 2
+  comma-style: 2
+  indent: [2, 2]
+  key-spacing: 2
+  max-nested-callbacks: [2, 5]
+  no-lonely-if: 2
+  no-mixed-spaces-and-tabs: 2
+  no-nested-ternary: 2
+  no-spaced-func: 2
+  no-trailing-spaces: 2
+  one-var: [2, "never"]
+  operator-linebreak: 2
+  quote-props: [2, "as-needed"]
+  quotes: [2, "single", "avoid-escape"]
+  semi: [2, "never"]
+  keyword-spacing: 2
+  space-before-blocks: 2
+  space-infix-ops: 2

.gitignore

@@ -1 +1,6 @@
 /node_modules/
+.DS_Store
+npm-debug.log
+build/
+coverage/
+.nyc_output/

.npmignore

@@ -1,3 +1,6 @@
-.gitignore
-/test/
-/example/
+npm-debug.log
+changelog.md
+coverage/
+example/
+test/
+.*

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "stable"
+  - "4"
+  - "0.12"

README.md

@@ -1,38 +1,86 @@
 # browserify-postcss
-transform contents using postcss
+A [browserify] transform to work with [postcss].
 
-## Usage
+## Example
 
-example/var.js:
+The build script:
 
 ```javascript
-var plugin = require("browserify-postcss")
+var browserify = require('browserify')
+var fs = require('fs')
 
-var tr = plugin("fake.css", {
-    plugin: "postcss-simple-vars",
-    basedir: __dirname
+var to = __dirname + '/static/bundle.js'
+var b = browserify(__dirname + '/src/entry.js')
+b.transform(require('browserify-postcss', {
+  // a list of postcss plugins
+  plugin: [
+    'postcss-import',
+    'postcss-advanced-variables',
+    ['postcss-custom-url', [
+      ['inline', { maxSize: 10 }],
+      ['copy', { assetOutFolder: __dirname + '/static/assets' }],
+    ]],
+  ],
+  // basedir where to search plugins
+  basedir: __dirname + '/src',
+  // options for processing.
+  postCssOptions: { to: to },
+  // insert a style element to apply the styles
+  inject: true,
 })
-tr.end("$color: red; .fake { color: $color; }")
-tr.pipe(process.stdout)
+b.bundle().pipe(
+  fs.createWriteStream(to)
+)
 
 ```
 
-output:
+entry.js:
 
-```
-⌘ node example/vars.js
-.fake { color: red;  }
-```
+```js
+require('./entry.css')
 
-### tr = plugin(file, opts)
+console.log('styles from entry.css are applied')
+
+```
 
-### Options
+## Options
 
-#### plugin
+### plugin
+Specify a list of [postcss] plugins to apply.
 
-Type: `String|Array`
+Type: `String`, `Array`
 Default: `null`
 
-postcss plugins used to transform the content
+### basedir
+Specify where to look for plugins.
+
+### postCssOptions
+Specify the options for the [postcss] processor.
+
+The `from` and `to` fields will be set to the css file path by default.
+
+### inject
+Specify how to use the styles:
+
+If `true`, styles are applied immediately.
+If `false`, `require('style.css')` will return the string representation of the styles.
+
+### extensions
+A list of file extensions to identify styles.
+
+Type: `Array`
+
+Default: `['.css', '.scss', '.sass']`
+
+## Watch
+Imported files will **NOT** be watched when used with [watchify].
+
+## Related
+
+* [reduce-css]: bundle css files without `require`ing them in js.
+
 
-If `Array`, each element can be `String`, `Function`, or `Array`.
+[browserify]: https://github.com/substack/node-browserify
+[watchify]: https://github.com/substack/watchify
+[postcss]: https://github.com/postcss/postcss
+[reduce-css]: https://github.com/reducejs/reduce-css

browser.js

@@ -0,0 +1 @@
+module.exports = require('cssify')

example/build.js

@@ -0,0 +1,28 @@
+var browserify = require('browserify')
+var fs = require('fs')
+
+var del = require('del')
+
+del.sync(__dirname + '/static/assets')
+del.sync(__dirname + '/static/bundle.js')
+
+var to = __dirname + '/static/bundle.js'
+var b = browserify(__dirname + '/src/entry.js')
+b.transform(require('..'), {
+  plugin: [
+    'postcss-import',
+    'postcss-advanced-variables',
+    ['postcss-custom-url', [
+      ['inline', { maxSize: 10 }],
+      ['copy', { assetOutFolder: __dirname + '/static/assets' }],
+    ]],
+  ],
+  basedir: __dirname + '/src',
+  postCssOptions: function (file) {
+    return { from: file, to: to }
+  },
+  inject: true,
+})
+b.bundle().pipe(
+  fs.createWriteStream(to)
+)

example/src/deps/index.css

@@ -0,0 +1,12 @@
+.inline {
+  width: 258px;
+  height: 192px;
+  background-image: url(octocat_setup.png);
+}
+
+.copy {
+  width: 356px;
+  height: 192px;
+  background-image: url(octocat_fork.png);
+}
+

example/src/deps/lazyloading.png

@@ -0,0 +1,7 @@
+@import "colors";
+@import "./deps";
+
+.entry {
+  color: $red;
+}
+

example/src/deps/octocat_fork.png

@@ -0,0 +1,4 @@
+require('./entry.css')
+
+console.log('styles from entry.css are applied')
+

example/src/deps/octocat_setup.png

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>browserify-postcss</title>
+    <script src="bundle.js"></script>
+  </head>
+  <body>
+    <h2>Styles from entry</h2>
+    <p class="entry">Text should be <strong>RED</strong></p>
+    <h2>Styles from deps</h2>
+    <ul>
+      <li>inlined image:
+        <div class="inline"></div>
+      </li>
+      <li>copied image:
+        <div class="copy" style></div>
+      </li>
+    </ul>
+  </body>
+</html>
+