Skip to content

Everything in #34 and then color() -> color-mod() #35

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.

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

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions lib/convert.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ module.exports = convert;
*/

function convert (string) {
var index = string.indexOf('color(');
var index = string.indexOf('color-mod(');
if (index == -1) return string;

string = string.slice(index);
string = balanced('(', ')', string);
if (!string) throw new SyntaxError('Missing closing parenthese for \'' + string + '\'');
var ast = parse('color(' + string.body + ')');
var ast = parse('color-mod(' + string.body + ')');
return toRGB(ast) + convert(string.post);
}

Expand All @@ -45,7 +45,7 @@ function toRGB (ast) {

// convert nested color functions
adjuster.arguments.forEach(function (arg) {
if (arg.type == 'function' && arg.name == 'color') {
if (arg.type == 'function' && arg.name == 'color-mod') {
arg.value = toRGB(arg);
arg.type = 'color';
delete arg.name;
Expand Down
6 changes: 3 additions & 3 deletions lib/parse.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,17 +152,17 @@ function parse (string) {
*/

function fn () {
if (!string.match(/^color\(/)) return;
if (!string.match(/^color-mod\(/)) return;

var colorRef = balanced('(', ')', string)
if (!colorRef) throw new SyntaxError('Missing closing parenthese for \'' + string + '\'');
if (colorRef.body === '') throw new SyntaxError('color() function cannot be empty');
if (colorRef.body === '') throw new SyntaxError('color-mod() function cannot be empty');
string = colorRef.body
whitespace();

var ret = {};
ret.type = 'function';
ret.name = 'color';
ret.name = 'color-mod';
ret.arguments = [fn() || color()];
debug('function arguments %o', ret.arguments);

Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
"version": "1.3.3",
"license": "MIT",
"description": "A parser and converter for Tab Atkins's proposed color function in CSS.",
"scripts": {
"test": "node_modules/.bin/mocha test/parse test/convert --reporter spec --bail"
},
"keywords": [
"color",
"function",
Expand Down
6 changes: 3 additions & 3 deletions test/convert.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ var assert = require('assert');
var color = require('..');

function convert (string, expected) {
string = 'color(' + string + ')';
string = 'color-mod(' + string + ')';
assert.equal(color.convert(string), expected);
}

Expand Down Expand Up @@ -331,8 +331,8 @@ describe('#convert', function () {

describe('nested color functions', function () {
it('should convert nested color functions', function () {
convert('color(rebeccapurple a(- 10%)) a(- 10%)', 'rgba(102, 51, 153, 0.81)');
convert('color(#4C5859 shade(25%)) blend(color(#4C5859 shade(40%)) 20%)', 'rgb(55, 63, 64)');
convert('color-mod(rebeccapurple a(- 10%)) a(- 10%)', 'rgba(102, 51, 153, 0.81)');
convert('color-mod(#4C5859 shade(25%)) blend(color-mod(#4C5859 shade(40%)) 20%)', 'rgb(55, 63, 64)');
});
});

Expand Down
40 changes: 20 additions & 20 deletions test/parse.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ var assert = require('assert');
var color = require('..');

function parse (string, expected) {
string = 'color(' + string + ')';
string = 'color-mod(' + string + ')';
assert.deepEqual(color.parse(string), expected);
}

describe('#parse', function () {
it('should parse a color', function () {
parse('red', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand All @@ -24,7 +24,7 @@ describe('#parse', function () {
it('should parse a complex color', function () {
parse('rgba(0,0,0,0)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand All @@ -37,7 +37,7 @@ describe('#parse', function () {
it('should parse a more complex color', function () {
parse('rgba(0, 31, 231, .4)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand All @@ -50,7 +50,7 @@ describe('#parse', function () {
it('should parse a basic adjuster', function () {
parse('red red(24)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand All @@ -73,7 +73,7 @@ describe('#parse', function () {
it('should parse an adjuster with a modifier', function () {
parse('red red(+ 24)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand All @@ -100,7 +100,7 @@ describe('#parse', function () {
it('should parse multiple adjusters', function () {
parse('red red(24) blue(27)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand Down Expand Up @@ -133,7 +133,7 @@ describe('#parse', function () {
it('should parse adjusters with multiple arguments', function () {
parse('red blend(white 50%)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand All @@ -158,9 +158,9 @@ describe('#parse', function () {
});

it('should parse adjusters with nested color functions', function () {
parse('red blend(color(red) 50%)', {
parse('red blend(color-mod(red) 50%)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand All @@ -172,7 +172,7 @@ describe('#parse', function () {
arguments: [
{
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand All @@ -191,13 +191,13 @@ describe('#parse', function () {
});

it('should parse nested color functions', function () {
parse('color(hsl(0, 0%, 93%) l(- 5%)) l(+ 10%)', {
parse('color-mod(hsl(0, 0%, 93%) l(- 5%)) l(+ 10%)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand Down Expand Up @@ -240,7 +240,7 @@ describe('#parse', function () {
it('should properly parse modifiers', function () {
parse('red a(+ 5%) a(+5%) a(- 5%) a(-5%) a(* 50%) a(*50%)', {
type: 'function',
name: 'color',
name: 'color-mod',
arguments: [
{
type: 'color',
Expand Down Expand Up @@ -329,19 +329,19 @@ describe('#parse', function () {

it('should throw on syntax error', function () {
assert.throws(function () {
color.parse('color(red');
color.parse('color-mod(red');
}, /Missing closing parenthese/);
});

it('should throw on syntax error for adjuster', function () {
assert.throws(function () {
color.parse('color(red l(+ 5%)');
color.parse('color-mod(red l(+ 5%)');
}, /Missing closing parenthese for/);
});

it('should throw on syntax error if color() is empty', function () {
it('should throw on syntax error if color-mod() is empty', function () {
assert.throws(function () {
color.parse('color()');
}, /color\(\) function cannot be empty/);
color.parse('color-mod()');
}, /color-mod\(\) function cannot be empty/);
});
});