Skip to content

Commit b25b5dc

Browse files
TrySoundTrySound
authored
Merge pull request #161 from css-modules/compose
Compose
2 parents e708e5d + 6b13912 commit b25b5dc

56 files changed

Lines changed: 1275 additions & 983 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.travis.yml‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,3 @@ node_js:
33
- "4"
44
- "6"
55
- "node"
6-
7-
after_success:
8-
- cat ./coverage/lcov.info | node_modules/.bin/coveralls --verbose
9-
- cat ./coverage/coverage.json | node_modules/codecov.io/bin/codecov.io.js
10-
- rm -rf ./coverage

‎LICENSE‎

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

‎README.md‎

Lines changed: 98 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,137 @@
1-
# CSS Modules: Scope Locals & Extend
1+
# postcss-icss-composes [![Build Status][travis-img]][travis]
22

3-
[![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)
3+
[PostCSS]: https://github.com/postcss/postcss
4+
[travis-img]: https://travis-ci.org/css-modules/postcss-icss-composes.svg
5+
[travis]: https://travis-ci.org/css-modules/postcss-icss-composes
46

5-
Transforms:
7+
PostCSS plugin for css modules to compose local-scope classes
68

7-
```css
8-
:local(.continueButton) {
9-
color: green;
10-
}
11-
```
12-
13-
into:
14-
15-
```css
16-
:export {
17-
continueButton: __buttons_continueButton_djd347adcxz9;
18-
}
19-
.__buttons_continueButton_djd347adcxz9 {
20-
color: green;
21-
}
22-
```
23-
24-
so it doesn't pollute CSS global scope and can be simply used in JS like so:
9+
## Usage
2510

2611
```js
27-
import styles from './buttons.css'
28-
elem.innerHTML = `<button class="${styles.continueButton}">Continue</button>`
12+
postcss([require('postcss-icss-composes')])
2913
```
3014

31-
## Composition
15+
See [PostCSS] docs for examples for your environment.
16+
17+
### Local class composition
3218

33-
Since we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:
19+
`composes` and `compose-with` combines specified class name with rule class name.
3420

3521
```css
36-
.globalButtonStyle {
37-
background: white;
38-
border: 1px solid;
39-
border-radius: 0.25rem;
22+
.buttonStyle {
23+
background: #fff;
4024
}
41-
.globalButtonStyle:hover {
25+
.buttonStyle:hover {
4226
box-shadow: 0 0 4px -2px;
4327
}
44-
:local(.continueButton) {
45-
compose-with: globalButtonStyle;
28+
.cellStyle {
29+
margin: 10px;
30+
}
31+
.addButton {
32+
composes: buttonStyle cellStyle;
4633
color: green;
4734
}
48-
```
4935

50-
becomes:
36+
/* becomes */
5137

52-
```css
5338
:export {
54-
continueButton: ___buttons_continueButton_djd347adcxz9 globalButtonStyle;
39+
buttonStyle: buttonStyle;
40+
cellStyle: cellStyle;
41+
addButton: addButton buttonStyle cellStyle
5542
}
56-
.globalButtonStyle {
57-
background: white;
58-
border: 1px solid;
59-
border-radius: 0.25rem;
43+
.buttonStyle {
44+
background: #fff;
6045
}
61-
.globalButtonStyle:hover {
46+
.buttonStyle:hover {
6247
box-shadow: 0 0 4px -2px;
6348
}
64-
.___buttons_continueButton_djd347adcxz9 {
49+
.cellStyle {
50+
margin: 10px;
51+
}
52+
.addButton {
6553
color: green;
6654
}
6755
```
6856

69-
**Note:** you can also use `composes` as a shorthand for `compose-with`
57+
### Global class composition
7058

71-
## Local-by-default & reuse across files
59+
You may use any identifier for composition
7260

73-
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.
74-
75-
## Building
61+
```css
62+
.addButton {
63+
composes: globalButtonStyle;
64+
background: #000;
65+
}
7666

77-
```
78-
npm install
79-
npm test
67+
/* becomes */
68+
:export {
69+
addButton: addButton globalButtonStyle
70+
}
71+
.addButton {
72+
background: #000;
73+
}
8074
```
8175

82-
[![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)
76+
### Scoping class names
8377

84-
* 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)
85-
* 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)
78+
[postcss-icss-selectors](https://github.com/css-modules/postcss-icss-selectors) plugin allows to local-scope classes.
8679

87-
## Development
80+
```css
81+
.buttonStyle {
82+
background: #fff;
83+
}
84+
.addButton {
85+
composes: buttonStyle;
86+
border: 1px solid #000;
87+
}
8888

89-
- `npm autotest` will watch `src` and `test` for changes and run the tests, and transpile the ES6 to ES5 on success
89+
/* becomes */
9090

91-
## License
91+
:export {
92+
buttonStyle: __scope__buttonStyle;
93+
addButton: __scope__addButton __scope__buttonStyle
94+
}
95+
.__scope__buttonStyle {
96+
background: #fff;
97+
}
98+
.__scope__addButton {
99+
border: 1px solid #000;
100+
}
101+
```
92102

93-
ISC
103+
### External composition
94104

95-
## With thanks
105+
```css
106+
/* compositions.css */
107+
.button {
108+
background: #fff;
109+
border: 1px solid #000;
110+
}
111+
.cell {
112+
margin: 10px;
113+
}
114+
115+
/* main.css */
116+
.addButton {
117+
composes: button cell from './composition.css';
118+
font-size: 20px;
119+
}
120+
```
121+
122+
### Messages
123+
124+
postcss-icss-composes passes result.messages for each composed class name
96125

97-
- Mark Dalgleish
98-
- Tobias Koppers
99-
- Guy Bedford
126+
```js
127+
{
128+
plugin: 'postcss-icss-composes',
129+
type: 'icss-composed',
130+
name: string, // rule class name
131+
value: string // composed class name
132+
}
133+
```
134+
135+
## License
100136

101-
---
102-
Glen Maddern, 2015.
137+
MIT © Glen Maddern and Bogdan Chadkin, 2015

‎package.json‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "postcss-modules-scope",
2+
"name": "postcss-icss-composes",
33
"version": "1.1.0",
4-
"description": "A CSS Modules transform to extract export statements from local-scope classes",
4+
"description": "PostCSS plugin for css modules to compose local-scope classes",
55
"main": "lib/index.js",
66
"scripts": {
77
"build": "babel --out-dir lib src",
@@ -11,10 +11,21 @@
1111
},
1212
"lint-staged": {
1313
"*.js": [
14-
"prettier --single-quote --no-semi --write",
14+
"prettier --write",
15+
"eslint",
1516
"git add"
1617
]
1718
},
19+
"eslintConfig": {
20+
"parserOptions": {
21+
"ecmaVersion": 6,
22+
"sourceType": "module"
23+
},
24+
"env": {
25+
"es6": true
26+
},
27+
"extends": "eslint:recommended"
28+
},
1829
"babel": {
1930
"presets": [
2031
[
@@ -27,10 +38,6 @@
2738
]
2839
]
2940
},
30-
"repository": {
31-
"type": "git",
32-
"url": "https://github.com/css-modules/postcss-modules-scope.git"
33-
},
3441
"keywords": [
3542
"css-modules",
3643
"postcss",
@@ -39,27 +46,25 @@
3946
"files": [
4047
"lib"
4148
],
42-
"author": "Glen Maddern",
43-
"license": "ISC",
44-
"bugs": {
45-
"url": "https://github.com/css-modules/postcss-modules-scope/issues"
46-
},
47-
"homepage": "https://github.com/css-modules/postcss-modules-scope",
49+
"author": "Glen Maddern and Bogdan Chadkin",
50+
"repository": "css-modules/postcss-icss-composes",
51+
"license": "MIT",
4852
"dependencies": {
4953
"css-selector-tokenizer": "^0.7.0",
5054
"icss-utils": "^2.1.0",
51-
"postcss": "^6.0.1"
55+
"postcss": "^6.0.1",
56+
"postcss-value-parser": "^3.3.0"
5257
},
5358
"devDependencies": {
5459
"babel-cli": "^6.24.1",
5560
"babel-jest": "^20.0.3",
5661
"babel-preset-env": "^1.5.1",
57-
"codecov.io": "^0.1.2",
58-
"coveralls": "^2.11.2",
5962
"css-selector-parser": "^1.0.4",
63+
"eslint": "^4.0.0",
6064
"husky": "^0.13.3",
6165
"jest": "^20.0.3",
6266
"lint-staged": "^3.4.2",
63-
"prettier": "^1.3.1"
67+
"prettier": "^1.3.1",
68+
"strip-indent": "^2.0.0"
6469
}
6570
}

0 commit comments

Comments
 (0)