Skip to content

Commit d5025d9

Browse files
lutienlutien
committed
Add ES6 syntax
1 parent d2cb78f commit d5025d9

File tree

1 file changed

+78
-84
lines changed

1 file changed

+78
-84
lines changed

‎index.js‎

Lines changed: 78 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
1-
var postcss = require('postcss'),
2-
colorObject = require('color-name'),
3-
parserColor = require('parse-color'),
4-
nearestColor = require('nearest-color');
1+
'use strict';
52

6-
module.exports = postcss.plugin('postcss-extract-value', function (opts) {
7-
opts = opts || {};
3+
const postcss = require('postcss');
4+
const colorObject = require('color-name');
5+
const parserColor = require('parse-color');
6+
const nearestColor = require('nearest-color');
87

9-
var colorNameList = Object.keys(colorObject);
8+
module.exports = postcss.plugin('postcss-extract-value', (opts) => {
9+
// Fix for Node 4
10+
const params = opts || {};
1011

11-
// Cache RegExp
12-
var reColorKeywords = new RegExp(colorNameList.join('|'));
13-
var reCSSVariable = /^var\(-{2}\w{1}[\w+-]*/;
14-
15-
var reHex = /#(\w{6}|\w{3})/;
16-
var reRgb = /rgba?\([\d,.\s]+\)/;
17-
var reHsl = /hsla?\(\s?[0-9]{1,3},\s?([0-9]{1,3}%,?\s?){2}([0-9.]+)?\)/;
18-
19-
var reExtract = new RegExp(reHex.source + '|' + reRgb.source + '|' +
20-
reHsl.source + '|' + reColorKeywords.source, 'g');
12+
// Options
13+
const filterByProps = params.filterByProps;
14+
const onlyColor = params.onlyColor;
15+
const scope = params.scope || ':root';
16+
const templateVariableName = params.templateVariableName || '';
2117

2218

23-
// Options
24-
var filterByProps = opts.filterByProps,
25-
onlyColor = opts.onlyColor,
26-
scope = opts.scope || ':root',
27-
templateVariableName = opts.templateVariableName || '';
19+
const colorList = {};
20+
const colorNameList = Object.keys(colorObject);
2821

29-
var colorList = {};
30-
colorNameList.forEach(function (key) {
22+
colorNameList.forEach((key) => {
3123
colorList[key] = {
3224
r: colorObject[key][0],
3325
g: colorObject[key][1],
34-
b: colorObject[key][2]
26+
b: colorObject[key][2],
3527
};
3628
});
37-
var findColor = nearestColor.from(colorList);
38-
var variablesListCounter = {};
29+
const findColor = nearestColor.from(colorList);
30+
const variablesListCounter = {};
31+
32+
// Cache RegExp
33+
const reColorKeywords = new RegExp(colorNameList.join('|'));
34+
const reCSSVariable = /^var\(-{2}\w{1}[\w+-]*/;
35+
const reHex = /#(\w{6}|\w{3})/;
36+
const reRgb = /rgba?\([\d,.\s]+\)/;
37+
const reHsl = /hsla?\(\s?[0-9]{1,3},\s?([0-9]{1,3}%,?\s?){2}([0-9.]+)?\)/;
38+
const reExtract = new RegExp(`${reHex.source}|${reRgb.source}|${reHsl.source}|${reColorKeywords.source}`, 'g');
3939

4040
function isColor(value) {
41-
var reCheck = new RegExp(/#\w+|rgba?|hsla?/.source +
42-
'|' + reColorKeywords.source, 'g');
41+
const reCheck = new RegExp(`${/#\w+|rgba?|hsla?/.source}|${reColorKeywords.source}`, 'g');
4342
return reCheck.test(value);
4443
}
4544

4645
function extractColor(value) {
47-
var resultArray = [];
48-
var result = [];
46+
const resultArray = [];
47+
let result = reExtract.exec(value);
4948

50-
while ((result = reExtract.exec(value)) !== null) {
49+
while (result) {
5150
resultArray.push(result[0]);
51+
result = reExtract.exec(value);
5252
}
5353
return resultArray;
5454
}
@@ -58,9 +58,9 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
5858
}
5959

6060
function colorNameVariable(value) {
61-
var variable = {},
62-
nearestColorValue = {},
63-
parsedColor = parserColor(value);
61+
const variable = {};
62+
let nearestColorValue = {};
63+
const parsedColor = parserColor(value);
6464

6565
if (parsedColor.hex) {
6666
nearestColorValue = parserColor(findColor(parsedColor.hex).value);
@@ -80,37 +80,38 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
8080

8181
if (variable.tint) {
8282
if (templateVariableName.indexOf('[tint]') > 0) {
83-
variable.tint = '-' + variable.tint;
83+
variable.tint = `-${variable.tint}`;
8484
}
8585
}
8686
}
8787
if (templateVariableName.indexOf('[colorKeyword]') > 0 &&
88-
!(templateVariableName.indexOf('[tint]') === 0 && !variable.tint)) {
89-
variable.colorKeyword = '-' + variable.colorKeyword;
88+
!(templateVariableName.indexOf('[tint]') === 0 &&
89+
!variable.tint)) {
90+
variable.colorKeyword = `-${variable.colorKeyword}`;
9091
}
9192
}
9293

9394
return variable;
9495
}
9596

9697
function makeNameByTemplate(value, prop) {
97-
var nameVariables = [],
98-
result = templateVariableName;
98+
let nameVariables = [];
99+
let result = templateVariableName;
99100

100101
if (onlyColor) {
101102
nameVariables = colorNameVariable(value);
102103
} else if (templateVariableName.indexOf('[propertyName]')) {
103104
nameVariables.propertyName = prop;
104105
}
105-
for (var key in nameVariables) {
106-
result = result.replace('[' + key + ']', nameVariables[key]);
107-
}
106+
Object.keys(nameVariables).forEach((key) => {
107+
result = result.replace(`[${key}]`, nameVariables[key]);
108+
});
108109
return result;
109110
}
110111

111112
function makeCSSVariable(prop, num, value) {
112-
var variableName = '',
113-
result = '';
113+
let variableName = '';
114+
let result = '';
114115

115116
if (templateVariableName) {
116117
variableName = makeNameByTemplate(value, prop);
@@ -120,49 +121,43 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
120121
variablesListCounter[variableName] = 1;
121122
}
122123

123-
result += '-' + variablesListCounter[variableName];
124-
variablesListCounter[variableName]++;
124+
result += `-${variablesListCounter[variableName]}`;
125+
variablesListCounter[variableName] += 1;
125126
} else {
126-
variableName = prop + '-' + num;
127+
variableName = `${prop}-${num}`;
127128
result = variableName;
128129
}
129130

130-
return '--' + result;
131+
return `--${result}`;
131132
}
132133

133134
function addCSSVariable(currentScope, value, variableName) {
134-
currentScope.append(variableName + ': ' + value);
135+
currentScope.append(`${variableName}: ${value}`);
135136
}
136137

137-
return function (css) {
138-
var root = css.root(),
139-
rootSel,
140-
storeProps = {},
141-
checkColorFilter = true,
142-
checkPropFilter = true,
143-
filteredValueList = [],
144-
filteredValue = '',
145-
variableName = '',
146-
variablesList = {},
147-
positionValue = 0;
148-
149-
css.walkRules(function (rule) {
150-
138+
return function parser(css) {
139+
const root = css.root();
140+
let rootSel = {};
141+
const storeProps = {};
142+
let checkColorFilter = true;
143+
let checkPropFilter = true;
144+
let filteredValueList = [];
145+
let variableName = '';
146+
const variablesList = {};
147+
let positionValue = 0;
148+
149+
css.walkRules((rule) => {
151150
if (rule.selector === scope) {
152151
rootSel = rule;
153152
} else {
154-
rule.walkDecls(function (decl) {
153+
rule.walkDecls((decl) => {
155154
if (!reCSSVariable.test(decl.value)) {
155+
checkColorFilter = !onlyColor || onlyColor && isColor(decl.value);
156156

157-
checkColorFilter = !onlyColor ||
158-
onlyColor && isColor(decl.value);
159-
160-
checkPropFilter = !filterByProps ||
161-
filterByProps &&
162-
checkProp(filterByProps, decl.prop);
157+
checkPropFilter = (!filterByProps || filterByProps
158+
&& checkProp(filterByProps, decl.prop));
163159

164160
if (checkColorFilter && checkPropFilter) {
165-
166161
if (!storeProps[decl.prop]) {
167162
storeProps[decl.prop] = [];
168163
}
@@ -173,36 +168,35 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
173168
filteredValueList = new Array(decl.value);
174169
}
175170

176-
for (var value in filteredValueList) {
177-
filteredValue = filteredValueList[value];
178-
171+
filteredValueList.forEach((filteredValue) => {
179172
positionValue = storeProps[decl.prop].indexOf(filteredValue);
180173

181174
if (positionValue === -1) {
182175
storeProps[decl.prop].push(filteredValue);
183176
}
184-
if (variablesList.hasOwnProperty(filteredValue)) {
177+
if ({}.hasOwnProperty.call(variablesList, filteredValue)) {
185178
variableName = variablesList[filteredValue];
186179
} else {
187-
positionValue = storeProps[decl.prop].indexOf(filteredValue);
188-
variableName = makeCSSVariable(decl.prop, ++positionValue, filteredValue);
180+
positionValue = storeProps[decl.prop].indexOf(filteredValue) + 1;
181+
variableName = makeCSSVariable(decl.prop, positionValue, filteredValue);
189182
variablesList[filteredValue] = variableName;
190183
}
191-
192-
decl.value = decl.value.replace(filteredValue, 'var(' + variableName + ')');
193-
}
184+
decl.value = decl.value.replace(filteredValue,
185+
`var(${variableName})`);
186+
});
194187
}
195188
}
196189
});
197190
}
198191
});
199192

200-
if (!rootSel) {
193+
if (Object.keys(rootSel).length === 0) {
201194
rootSel = postcss.rule({ selector: scope });
202195
root.prepend(rootSel);
203196
}
204-
for (var value in variablesList) {
197+
198+
Object.keys(variablesList).forEach((value) => {
205199
addCSSVariable(rootSel, value, variablesList[value]);
206-
}
200+
});
207201
};
208202
});

0 commit comments

Comments
 (0)