Compose

.travis.yml

@@ -3,8 +3,3 @@ node_js:
   - "4"
   - "6"
   - "node"
-
-after_success:
-  - cat ./coverage/lcov.info | node_modules/.bin/coveralls --verbose
-  - cat ./coverage/coverage.json | node_modules/codecov.io/bin/codecov.io.js
-  - rm -rf ./coverage

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2015 Glen Maddern
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,102 +1,137 @@
-# CSS Modules: Scope Locals & Extend
+# postcss-icss-composes [![Build Status][travis-img]][travis]
 
-[![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)
+[PostCSS]: https://github.com/postcss/postcss
+[travis-img]: https://travis-ci.org/css-modules/postcss-icss-composes.svg
+[travis]: https://travis-ci.org/css-modules/postcss-icss-composes
 
-Transforms:
+PostCSS plugin for css modules to compose local-scope classes
 
-```css
-:local(.continueButton) {
-  color: green;
-}
-```
-
-into:
-
-```css
-:export {
-  continueButton: __buttons_continueButton_djd347adcxz9;
-}
-.__buttons_continueButton_djd347adcxz9 {
-  color: green;
-}
-```
-
-so it doesn't pollute CSS global scope and can be simply used in JS like so:
+## Usage
 
 ```js
-import styles from './buttons.css'
-elem.innerHTML = `<button class="${styles.continueButton}">Continue</button>`
+postcss([require('postcss-icss-composes')])
 ```
 
-## Composition
+See [PostCSS] docs for examples for your environment.
+
+### Local class composition
 
-Since we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:
+`composes` and `compose-with` combines specified class name with rule class name.
 
 ```css
-.globalButtonStyle {
-  background: white;
-  border: 1px solid;
-  border-radius: 0.25rem;
+.buttonStyle {
+  background: #fff;
 }
-.globalButtonStyle:hover {
+.buttonStyle:hover {
   box-shadow: 0 0 4px -2px;
 }
-:local(.continueButton) {
-  compose-with: globalButtonStyle;
+.cellStyle {
+  margin: 10px;
+}
+.addButton {
+  composes: buttonStyle cellStyle;
   color: green;
 }
-```
 
-becomes:
+/* becomes */
 
-```css
 :export {
-  continueButton: ___buttons_continueButton_djd347adcxz9 globalButtonStyle;
+  buttonStyle: buttonStyle;
+  cellStyle: cellStyle;
+  addButton: addButton buttonStyle cellStyle
 }
-.globalButtonStyle {
-  background: white;
-  border: 1px solid;
-  border-radius: 0.25rem;
+.buttonStyle {
+  background: #fff;
 }
-.globalButtonStyle:hover {
+.buttonStyle:hover {
   box-shadow: 0 0 4px -2px;
 }
-.___buttons_continueButton_djd347adcxz9 {
+.cellStyle {
+  margin: 10px;
+}
+.addButton {
   color: green;
 }
 ```
 
-**Note:** you can also use `composes` as a shorthand for `compose-with`
+### Global class composition
 
-## Local-by-default & reuse across files
+You may use any identifier for composition
 
-You're looking for [CSS Modules](https://github.com/css-modules/css-modules). It uses this plugin as well as a few others, and it's amazing.
-
-## Building
+```css
+.addButton {
+  composes: globalButtonStyle;
+  background: #000;
+}
 
-```
-npm install
-npm test
+/* becomes */
+:export {
+  addButton: addButton globalButtonStyle
+}
+.addButton {
+  background: #000;
+}
 ```
 
-[![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)
+### Scoping class names
 
-* Lines: [![Coverage Status](https://coveralls.io/repos/css-modules/postcss-modules-scope/badge.svg?branch=master)](https://coveralls.io/r/css-modules/postcss-modules-scope?branch=master)
-* Statements: [![codecov.io](http://codecov.io/github/css-modules/postcss-modules-scope/coverage.svg?branch=master)](http://codecov.io/github/css-modules/postcss-modules-scope?branch=master)
+[postcss-icss-selectors](https://github.com/css-modules/postcss-icss-selectors) plugin allows to local-scope classes.
 
-## Development
+```css
+.buttonStyle {
+  background: #fff;
+}
+.addButton {
+  composes: buttonStyle;
+  border: 1px solid #000;
+}
 
-- `npm autotest` will watch `src` and `test` for changes and run the tests, and transpile the ES6 to ES5 on success
+/* becomes */
 
-## License
+:export {
+  buttonStyle: __scope__buttonStyle;
+  addButton: __scope__addButton __scope__buttonStyle
+}
+.__scope__buttonStyle {
+  background: #fff;
+}
+.__scope__addButton {
+  border: 1px solid #000;
+}
+```
 
-ISC
+### External composition
 
-## With thanks
+```css
+/* compositions.css */
+.button {
+  background: #fff;
+  border: 1px solid #000;
+}
+.cell {
+  margin: 10px;
+}
+
+/* main.css */
+.addButton {
+  composes: button cell from './composition.css';
+  font-size: 20px;
+}
+```
+
+### Messages
+
+postcss-icss-composes passes result.messages for each composed class name
 
-- Mark Dalgleish
-- Tobias Koppers
-- Guy Bedford
+```js
+{
+  plugin: 'postcss-icss-composes',
+  type: 'icss-composed',
+  name: string, // rule class name
+  value: string // composed class name
+}
+```
+
+## License
 
----
-Glen Maddern, 2015.
+MIT © Glen Maddern and Bogdan Chadkin, 2015

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "postcss-modules-scope",
+  "name": "postcss-icss-composes",
   "version": "1.1.0",
-  "description": "A CSS Modules transform to extract export statements from local-scope classes",
+  "description": "PostCSS plugin for css modules to compose local-scope classes",
   "main": "lib/index.js",
   "scripts": {
     "build": "babel --out-dir lib src",
@@ -11,10 +11,21 @@
   },
   "lint-staged": {
     "*.js": [
-      "prettier --single-quote --no-semi --write",
+      "prettier --write",
+      "eslint",
       "git add"
     ]
   },
+  "eslintConfig": {
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module"
+    },
+    "env": {
+      "es6": true
+    },
+    "extends": "eslint:recommended"
+  },
   "babel": {
     "presets": [
       [
@@ -27,10 +38,6 @@
       ]
     ]
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/css-modules/postcss-modules-scope.git"
-  },
   "keywords": [
     "css-modules",
     "postcss",
@@ -39,27 +46,25 @@
   "files": [
     "lib"
   ],
-  "author": "Glen Maddern",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/css-modules/postcss-modules-scope/issues"
-  },
-  "homepage": "https://github.com/css-modules/postcss-modules-scope",
+  "author": "Glen Maddern and Bogdan Chadkin",
+  "repository": "css-modules/postcss-icss-composes",
+  "license": "MIT",
   "dependencies": {
     "css-selector-tokenizer": "^0.7.0",
     "icss-utils": "^2.1.0",
-    "postcss": "^6.0.1"
+    "postcss": "^6.0.1",
+    "postcss-value-parser": "^3.3.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-jest": "^20.0.3",
     "babel-preset-env": "^1.5.1",
-    "codecov.io": "^0.1.2",
-    "coveralls": "^2.11.2",
     "css-selector-parser": "^1.0.4",
+    "eslint": "^4.0.0",
     "husky": "^0.13.3",
     "jest": "^20.0.3",
     "lint-staged": "^3.4.2",
-    "prettier": "^1.3.1"
+    "prettier": "^1.3.1",
+    "strip-indent": "^2.0.0"
   }
 }