Skip to content

Retain whitespace before color(). Fix for #26. #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MoOx merged 1 commit into from
Mar 15, 2016
Merged

Retain whitespace before color(). Fix for #26. #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 10 additions & 19 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Module dependencies.
*/
var postcss = require("postcss")
var balanced = require("balanced-match")
var parser = require("postcss-value-parser")
var colorFn = require("css-color-function")
var helpers = require("postcss-message-helpers")

Expand All @@ -17,7 +17,7 @@ module.exports = postcss.plugin("postcss-color-function", function() {
}

decl.value = helpers.try(function transformColorValue() {
Copy link
Contributor Author

@studiosciences studiosciences Mar 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This try block and helper seems irrelevant now.

Copy link
Member

@TrySound TrySound Mar 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

color may throw an error.

Copy link
Member

@TrySound TrySound Mar 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be cool to catch and warn separately.

Copy link
Member

@TrySound TrySound Mar 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But in the next pr I think.

Copy link
Contributor Author

@studiosciences studiosciences Mar 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a test for throwing a readable error that passes. I assume it passes because colorFn.convert() is the one that throws the error.

There had been a throw error on a mismatched bracket, but that seems irrelevant with postcss-value-parser.

return transformColor(decl.value, decl.source)
return transformColor(decl.value)
}, decl.source)
})
}
Expand All @@ -29,22 +29,13 @@ module.exports = postcss.plugin("postcss-color-function", function() {
* @param {String} string declaration value
* @return {String} converted declaration value to rgba()
*/
function transformColor(string, source) {
var index = string.search(/(^|[^\w\-])color\(/)
function transformColor(string) {
return parser(string).walk(function(node) {
if (node.type !== "function" || node.value !== "color") {
return
}

if (index === -1) {
return string
}

// NOTE: regexp search beginning of line of non char symbol before `color(`.
// Offset used for second case.
index = index === 0 ? index : index + 1

var fn = string.slice(index)
var balancedMatches = balanced("(", ")", fn)
if (!balancedMatches) {
throw new Error("Missing closing parentheses in '" + string + "'", source)
}

return string.slice(0, index) + colorFn.convert("color(" + balancedMatches.body + ")") + transformColor(balancedMatches.post)
node.value = colorFn.convert(parser.stringify(node))
node.type = "word"
}).toString()
}
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
"index.js"
],
"dependencies": {
"balanced-match": "^0.1.0",
"css-color-function": "^1.2.0",
"postcss": "^5.0.4",
"postcss-message-helpers": "^2.0.0"
"postcss-message-helpers": "^2.0.0",
"postcss-value-parser": "^3.3.0"
},
"devDependencies": {
"jscs": "^1.6.2",
Expand Down
2 changes: 2 additions & 0 deletions test/fixtures/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,6 @@ body {
border-bottom-color: hover-color(red);

border-right-color: hover-color(color(red tint(50%)));

border-color: color(#999 a(0.8)) color(#999 a(0.8));
}
2 changes: 2 additions & 0 deletions test/fixtures/color.expected.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,6 @@ body {
border-bottom-color: hover-color(red);

border-right-color: hover-color(rgb(255, 128, 128));

border-color: rgba(153, 153, 153, 0.8) rgba(153, 153, 153, 0.8);
}