Skip to content

Commit b5b2474

Browse files
MoOxMoOx
committed
Initial release from postcss-color
Ref postcss/postcss-color#4 Close postcss/postcss-color#5
0 parents  commit b5b2474

14 files changed

+399
-0
lines changed

‎.editorconfig

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
end_of_line = lf
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
indent_style = space
10+
indent_size = 2
11+
12+
[*.md]
13+
trim_trailing_whitespace = false
14+
15+
[Makefile]
16+
indent_style = tab

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
test/fixtures/*.actual.css

‎.jscsrc

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
{
2+
"excludeFiles": [
3+
"node_modules/**"
4+
],
5+
"fileExtensions": [
6+
".js"
7+
],
8+
"requireCurlyBraces": [
9+
"if",
10+
"else",
11+
"for",
12+
"while",
13+
"do",
14+
"try",
15+
"catch"
16+
],
17+
"requireSpaceAfterKeywords": [
18+
"if",
19+
"else",
20+
"for",
21+
"while",
22+
"do",
23+
"switch",
24+
"return",
25+
"try",
26+
"catch"
27+
],
28+
"requireSpaceBeforeBlockStatements": true,
29+
"requireParenthesesAroundIIFE": true,
30+
"requireSpacesInConditionalExpression": {
31+
"afterTest": true,
32+
"beforeConsequent": true,
33+
"afterConsequent": true,
34+
"beforeAlternate": true
35+
},
36+
"requireSpacesInFunctionExpression": {
37+
"beforeOpeningCurlyBrace": true
38+
},
39+
"disallowSpacesInFunctionExpression": {
40+
"beforeOpeningRoundBrace": true
41+
},
42+
"disallowMultipleVarDecl": true,
43+
"requireBlocksOnNewline": 1,
44+
"disallowPaddingNewlinesInBlocks": true,
45+
"disallowEmptyBlocks": true,
46+
"disallowSpacesInsideObjectBrackets": true,
47+
"disallowSpacesInsideArrayBrackets": true,
48+
"disallowSpacesInsideParentheses": true,
49+
"disallowQuotedKeysInObjects": "allButReserved",
50+
"disallowSpaceAfterObjectKeys": true,
51+
"requireCommaBeforeLineBreak": true,
52+
"requireOperatorBeforeLineBreak": [
53+
"?",
54+
"+",
55+
"-",
56+
"/",
57+
"*",
58+
"=",
59+
"==",
60+
"===",
61+
"!=",
62+
"!==",
63+
">",
64+
">=",
65+
"<",
66+
"<="
67+
],
68+
"disallowSpaceAfterPrefixUnaryOperators": [
69+
"++",
70+
"--",
71+
"+",
72+
"-",
73+
"~",
74+
"!"
75+
],
76+
"disallowSpaceBeforePostfixUnaryOperators": [
77+
"++",
78+
"--"
79+
],
80+
"requireSpaceBeforeBinaryOperators": [
81+
"+",
82+
"-",
83+
"/",
84+
"*",
85+
"=",
86+
"==",
87+
"===",
88+
"!=",
89+
"!=="
90+
],
91+
"requireSpaceAfterBinaryOperators": [
92+
"+",
93+
"-",
94+
"/",
95+
"*",
96+
"=",
97+
"==",
98+
"===",
99+
"!=",
100+
"!=="
101+
],
102+
"disallowImplicitTypeConversion": [
103+
"numeric",
104+
"boolean",
105+
"binary",
106+
"string"
107+
],
108+
"requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
109+
"disallowKeywords": [
110+
"with"
111+
],
112+
"disallowMultipleLineStrings": true,
113+
"validateQuoteMarks": "\"",
114+
"validateIndentation": 2,
115+
"disallowMixedSpacesAndTabs": true,
116+
"disallowTrailingWhitespace": true,
117+
"requireKeywordsOnNewLine": [
118+
"else"
119+
],
120+
"requireLineFeedAtFileEnd": true,
121+
"requireCapitalizedConstructors": true,
122+
"safeContextKeyword": "that",
123+
"requireDotNotation": true,
124+
"validateJSDoc": {
125+
"checkParamNames": true,
126+
"checkRedundantParams": true,
127+
"requireParamTypes": true
128+
},
129+
"requireSpaceAfterLineComment": true
130+
}

‎.jshintrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"newcap": false,
3+
"undef": true,
4+
"unused": true,
5+
"asi": true,
6+
"esnext": true,
7+
"node": true,
8+
"browser": true
9+
}

‎.travis.yml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
language: node_js

‎CHANGELOG.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 1.0.0 - 2014-10-04
2+
3+
Initial release from [postcss-color](https://github.com/postcss/postcss-color)

‎LICENSE

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 Maxime Thirouin & Ian Storm Taylor
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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# postcss-color-function [![Build Status](https://travis-ci.org/postcss/postcss-color-function.png)](https://travis-ci.org/postcss/postcss-color-function)
2+
3+
> [PostCSS](https://github.com/postcss/postcss) plugin to transform [W3C CSS color function](http://dev.w3.org/csswg/css-color/#modifying-colors) to more compatible CSS.
4+
5+
## Installation
6+
7+
```bash
8+
$ npm install postcss-color-function
9+
```
10+
11+
## Usage
12+
13+
```js
14+
// dependencies
15+
var fs = require("fs")
16+
var postcss = require("postcss")
17+
var colorFunction = require("postcss-color-function")
18+
19+
// css to be processed
20+
var css = fs.readFileSync("input.css", "utf8")
21+
22+
// process css
23+
var output = postcss()
24+
.use(colorFunction())
25+
.process(css)
26+
.css
27+
```
28+
29+
Using this `input.css`:
30+
31+
```css
32+
body {
33+
background: color(red a(90%))
34+
}
35+
36+
```
37+
38+
you will get:
39+
40+
```css
41+
body {
42+
background: rgba(255, 0, 0, 0.9)
43+
}
44+
```
45+
46+
Checkout [tests](test) for more examples.
47+
48+
---
49+
50+
## Contributing
51+
52+
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
53+
54+
$ git clone https://github.com/postcss/postcss-color-function.git
55+
$ git checkout -b patch-1
56+
$ npm install
57+
$ npm test
58+
59+
## [Changelog](CHANGELOG.md)
60+
61+
## [License](LICENSE)

‎index.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/**
2+
* Module dependencies.
3+
*/
4+
var balanced = require("balanced-match")
5+
var colorFn = require("css-color-function")
6+
7+
/**
8+
* PostCSS plugin to transform color()
9+
*/
10+
module.exports = function plugin() {
11+
return function(style) {
12+
style.eachDecl(function transformDecl(dec) {
13+
if (!dec.value) {
14+
return
15+
}
16+
17+
dec.value = transform(dec.value, dec.source)
18+
})
19+
}
20+
}
21+
22+
/**
23+
* Transform colors to rgb() or rgba() on a declaration value
24+
*
25+
* @param {String} string
26+
* @return {String}
27+
*/
28+
function transform(string, source) {
29+
// order of transformation is important
30+
31+
try {
32+
if (string.indexOf("color(") > -1) {
33+
string = transformColor(string, source)
34+
}
35+
}
36+
catch (e) {
37+
throw new Error(gnuMessage(e.message, source))
38+
}
39+
40+
return string
41+
}
42+
43+
/**
44+
* Transform color() to rgb()
45+
*
46+
* @param {String} string declaration value
47+
* @return {String} converted declaration value to rgba()
48+
*/
49+
function transformColor(string, source) {
50+
var index = string.indexOf("color(")
51+
if (index == -1) {
52+
return string
53+
}
54+
55+
var fn = string.slice(index)
56+
var balancedMatches = balanced("(", ")", fn)
57+
if (!balancedMatches) {
58+
throw new SyntaxError(gnuMessage("Missing closing parentheses in '" + string + "'", source))
59+
}
60+
61+
return string.slice(0, index) + colorFn.convert("color(" + balancedMatches.body + ")") + transformColor(balancedMatches.post)
62+
}
63+
64+
65+
/**
66+
* return GNU style message
67+
*
68+
* @param {String} message
69+
* @param {Object} source
70+
*/
71+
function gnuMessage(message, source) {
72+
return (source ? (source.file ? source.file : "<css input>") + ":" + source.start.line + ":" + source.start.column : "") + " " + message
73+
}

‎package.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "postcss-color-function",
3+
"version": "0.0.0",
4+
"description": "PostCSS plugin to transform W3C CSS color function to more compatible CSS.",
5+
"keywords": [
6+
"css",
7+
"postcss",
8+
"postcss-plugins",
9+
"color",
10+
"colour",
11+
"function"
12+
],
13+
"author": "Maxime Thirouin",
14+
"license": "MIT",
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/postcss/postcss-color-function.git"
18+
},
19+
"files": [
20+
"CHANGELOG.md",
21+
"LICENSE",
22+
"README.md",
23+
"index.js"
24+
],
25+
"dependencies": {
26+
"balanced-match": "^0.1.0",
27+
"css-color-function": "^1.1.1"
28+
},
29+
"devDependencies": {
30+
"jscs": "^1.6.2",
31+
"jshint": "^2.5.6",
32+
"postcss": "^2.2.5",
33+
"tape": "^3.0.0"
34+
},
35+
"scripts": {
36+
"lint": "jscs *.js **/*.js && jshint . --exclude-path .gitignore",
37+
"test": "npm run lint && tape test"
38+
}
39+
}

‎test/fixtures/color.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
color: color(red);
3+
background-color: color(red tint(50%));
4+
border-color: color(hsla(125, 50%, 50%, .4) hue(200));
5+
}

‎test/fixtures/color.expected.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
color: rgb(255, 0, 0);
3+
background-color: rgb(255, 128, 128);
4+
border-color: rgba(64, 149, 191, 0.4);
5+
}

‎test/fixtures/error.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background: color(blurp a(+10%));
3+
}

0 commit comments

Comments
 (0)