Skip to content

Commit

Permalink
Code refactoring, create constants for color types
Browse files Browse the repository at this point in the history
  • Loading branch information
@EdMSL
EdMSL committed Nov 20, 2019
1 parent b962c14 commit 34410db
Show file tree
Hide file tree
Showing 6 changed files with 165 additions and 99 deletions.
1 change: 1 addition & 0 deletions .eslintrc-full.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ module.exports = {
"eslint-config-postcss",
],
rules: {
"arrow-parens": 0,
"comma-dangle": [2, {
arrays: "always-multiline",
objects: "always-multiline",
Expand Down
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ module.exports = {
"eslint-config-postcss",
],
rules: {
"arrow-parens": 0,
"comma-dangle": [1, {
arrays: "always-multiline",
objects: "always-multiline",
Expand Down
116 changes: 23 additions & 93 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,20 @@ const valueParser = require('postcss-values-parser');
const colors = require('color-name');

const {
parseHEXAColor,
getRGBColorStr,
getHSLColorStr,
getHEXColorStr,
} = require('./src/utils');

const DEFAULT_ALPHA = 1;
const DEFAULT_HEX_ALPHA = 'ff';
convertingHEXColor,
convertingRGBColor,
convertingHSLColor,
convertingKeywordColor,
} = require('./src/converts');
const {
HEX_COLOR,
RGB_COLOR,
HSL_COLOR,
KEYWORD_COLOR,
} = require('./src/constants');

const colorNames = Object.keys(colors);
const colorFormats = ['hex', 'rgb', 'hsl', 'keyword'];
const colorFormats = [HEX_COLOR, RGB_COLOR, HSL_COLOR, KEYWORD_COLOR];

const propsWithColorRegExp = /(background|border|box-shadow|color|fill|outline|@|$)/;

Expand Down Expand Up @@ -43,105 +46,32 @@ module.exports = postcss.plugin('postcss-color-converter', (options = {}) => {
valueObj.walk(node => {
if (node.isColor) {
if (
!currentOptions.ignore.includes('hex') &&
currentOptions.outputColorFormat !== 'hex' &&
!currentOptions.ignore.includes(HEX_COLOR) &&
currentOptions.outputColorFormat !== HEX_COLOR &&
node.isHex
) {
const colorObj = parseHEXAColor(node.value);

if (currentOptions.outputColorFormat === 'rgb') {
node.value = currentOptions.alwaysAlpha || colorObj.hexAlpha !== DEFAULT_HEX_ALPHA
? getRGBColorStr('hex', colorObj.hexColor, colorObj.hexAlpha)
: getRGBColorStr('hex', colorObj.hexColor);
} else if (currentOptions.outputColorFormat === 'hsl') {
node.value = currentOptions.alwaysAlpha || colorObj.hexAlpha !== DEFAULT_HEX_ALPHA
? getHSLColorStr('hex', colorObj.hexColor, colorObj.hexAlpha)
: getHSLColorStr('hex', colorObj.hexColor);
}
node = convertingHEXColor(node, currentOptions);
} else if (
(
!currentOptions.ignore.includes('rgb') &&
(currentOptions.alwaysAlpha || currentOptions.outputColorFormat !== 'rgb')
!currentOptions.ignore.includes(RGB_COLOR) &&
(currentOptions.alwaysAlpha || currentOptions.outputColorFormat !== RGB_COLOR)
) &&
(node.name === 'rgb' || node.name === 'rgba')
) {
const newNode = node.clone({ type: 'word' });
const [r, , g, , b, , a] = node.nodes;

if (currentOptions.outputColorFormat === 'hex') {
newNode.value = getHEXColorStr(
'rgb',
[+r.value, +g.value, +b.value],
((a && +a.value !== DEFAULT_ALPHA && +a.value)),
);
} else if (currentOptions.outputColorFormat === 'hsl') {
newNode.value = getHSLColorStr(
'rgb',
[+r.value, +g.value, +b.value],
((a && +a.value) || (currentOptions.alwaysAlpha && DEFAULT_ALPHA)),
);
} else if (currentOptions.outputColorFormat === 'rgb') {
newNode.value = getRGBColorStr(
'rgb',
[+r.value, +g.value, +b.value],
(a && +a.value) || (currentOptions.alwaysAlpha && DEFAULT_ALPHA),
);
}

node.replaceWith(newNode);
node = convertingRGBColor(node, currentOptions);
} else if (
(
!currentOptions.ignore.includes('hsl') &&
(currentOptions.alwaysAlpha || currentOptions.outputColorFormat !== 'hsl')
!currentOptions.ignore.includes(HSL_COLOR) &&
(currentOptions.alwaysAlpha || currentOptions.outputColorFormat !== HSL_COLOR)
) &&
(node.name === 'hsl' || node.name === 'hsla')
) {
const newNode = node.clone({ type: 'word' });
const [h, , s, , l, , a] = node.nodes;

if (currentOptions.outputColorFormat === 'hex') {
newNode.value = getHEXColorStr(
'hsl',
[+h.value, +s.value, +l.value],
((a && +a.value !== DEFAULT_ALPHA && +a.value)),
);
} else if (currentOptions.outputColorFormat === 'rgb') {
newNode.value = getRGBColorStr(
'hsl',
[+h.value, +s.value, +l.value],
((a && +a.value) || (currentOptions.alwaysAlpha && DEFAULT_ALPHA)),
);
} else if (currentOptions.outputColorFormat === 'hsl') {
newNode.value = getHSLColorStr(
'hsl',
[+h.value, +s.value, +l.value],
(a && +a.value) || (currentOptions.alwaysAlpha && DEFAULT_ALPHA),
);
}

node.replaceWith(newNode);
node = convertingHSLColor(node, currentOptions);
} else if (
!currentOptions.ignore.includes('keyword') &&
!currentOptions.ignore.includes(KEYWORD_COLOR) &&
colorNames.includes(node.value)
) {
if (currentOptions.outputColorFormat === 'hex') {
node.value = getHEXColorStr(
'keyword',
node.value,
);
} else if (currentOptions.outputColorFormat === 'rgb') {
node.value = getRGBColorStr(
'keyword',
node.value,
currentOptions.alwaysAlpha && DEFAULT_ALPHA,
);
} else if (currentOptions.outputColorFormat === 'hsl') {
node.value = getHSLColorStr(
'keyword',
node.value,
currentOptions.alwaysAlpha && DEFAULT_ALPHA,
);
}
node = convertingKeywordColor(node, currentOptions);
}
}
});
Expand Down
8 changes: 8 additions & 0 deletions src/constants.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = {
DEFAULT_HEX_ALPHA: 'ff',
DEFAULT_ALPHA: 1,
HEX_COLOR: 'hex',
RGB_COLOR: 'rgb',
HSL_COLOR: 'hsl',
KEYWORD_COLOR: 'keyword',
};
118 changes: 118 additions & 0 deletions src/converts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
const {
parseHEXAColor,
getRGBColorStr,
getHSLColorStr,
getHEXColorStr,
} = require('./utils');
const {
DEFAULT_HEX_ALPHA,
DEFAULT_ALPHA,
HEX_COLOR,
RGB_COLOR,
HSL_COLOR,
KEYWORD_COLOR,
} = require('./constants');

const convertingHEXColor = (node, options) => {
const colorObj = parseHEXAColor(node.value);

if (options.outputColorFormat === RGB_COLOR) {
node.value = options.alwaysAlpha || colorObj.hexAlpha !== DEFAULT_HEX_ALPHA
? getRGBColorStr(HEX_COLOR, colorObj.hexColor, colorObj.hexAlpha)
: getRGBColorStr(HEX_COLOR, colorObj.hexColor);
} else if (options.outputColorFormat === HSL_COLOR) {
node.value = options.alwaysAlpha || colorObj.hexAlpha !== DEFAULT_HEX_ALPHA
? getHSLColorStr(HEX_COLOR, colorObj.hexColor, colorObj.hexAlpha)
: getHSLColorStr(HEX_COLOR, colorObj.hexColor);
}

return node;
};

const convertingRGBColor = (node, options) => {
const newNode = node.clone({ type: 'word' });
const [r, , g, , b, , a] = node.nodes;

if (options.outputColorFormat === HEX_COLOR) {
newNode.value = getHEXColorStr(
RGB_COLOR,
[+r.value, +g.value, +b.value],
((a && +a.value !== DEFAULT_ALPHA && +a.value)),
);
} else if (options.outputColorFormat === HSL_COLOR) {
newNode.value = getHSLColorStr(
RGB_COLOR,
[+r.value, +g.value, +b.value],
((a && +a.value) || (options.alwaysAlpha && DEFAULT_ALPHA)),
);
} else if (options.outputColorFormat === RGB_COLOR) {
newNode.value = getRGBColorStr(
RGB_COLOR,
[+r.value, +g.value, +b.value],
(a && +a.value) || (options.alwaysAlpha && DEFAULT_ALPHA),
);
}

node.replaceWith(newNode);

return node;
};

const convertingHSLColor = (node, options) => {
const newNode = node.clone({ type: 'word' });
const [h, , s, , l, , a] = node.nodes;

if (options.outputColorFormat === HEX_COLOR) {
newNode.value = getHEXColorStr(
HSL_COLOR,
[+h.value, +s.value, +l.value],
((a && +a.value !== DEFAULT_ALPHA && +a.value)),
);
} else if (options.outputColorFormat === RGB_COLOR) {
newNode.value = getRGBColorStr(
HSL_COLOR,
[+h.value, +s.value, +l.value],
((a && +a.value) || (options.alwaysAlpha && DEFAULT_ALPHA)),
);
} else if (options.outputColorFormat === HSL_COLOR) {
newNode.value = getHSLColorStr(
HSL_COLOR,
[+h.value, +s.value, +l.value],
(a && +a.value) || (options.alwaysAlpha && DEFAULT_ALPHA),
);
}

node.replaceWith(newNode);

return node;
};

const convertingKeywordColor = (node, options) => {
if (options.outputColorFormat === HEX_COLOR) {
node.value = getHEXColorStr(
KEYWORD_COLOR,
node.value,
);
} else if (options.outputColorFormat === RGB_COLOR) {
node.value = getRGBColorStr(
KEYWORD_COLOR,
node.value,
options.alwaysAlpha && DEFAULT_ALPHA,
);
} else if (options.outputColorFormat === HSL_COLOR) {
node.value = getHSLColorStr(
KEYWORD_COLOR,
node.value,
options.alwaysAlpha && DEFAULT_ALPHA,
);
}

return node;
};

module.exports = {
convertingHEXColor,
convertingRGBColor,
convertingHSLColor,
convertingKeywordColor,
};
20 changes: 14 additions & 6 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
const convert = require('color-convert');

const {
DEFAULT_HEX_ALPHA,
HEX_COLOR,
RGB_COLOR,
HSL_COLOR,
KEYWORD_COLOR,
} = require('./constants');

const parseHEXAColor = color => {
const newColor = color.slice(1);
let hexColor;
Expand All @@ -16,7 +24,7 @@ const parseHEXAColor = color => {
break;
case 3:
case 6:
hexAlpha = 'ff';
hexAlpha = DEFAULT_HEX_ALPHA;
hexColor = newColor;
break;
}
Expand All @@ -38,13 +46,13 @@ const getHEXColorStr = (inputColorFormat, color, alpha) => (
);

const getRGBColorStr = (inputColorFormat, color, alpha) => {
if (inputColorFormat === 'hex') {
if (inputColorFormat === HEX_COLOR) {
return alpha
? `rgba(${ convert[inputColorFormat].rgb(color).join(', ') }, ${ convertHEXAlphaValueToNumber(alpha) })`
: `rgb(${ convert[inputColorFormat].rgb(color).join(', ') })`;
}

if (inputColorFormat === 'hsl' || inputColorFormat === 'keyword') {
if (inputColorFormat === HSL_COLOR || inputColorFormat === KEYWORD_COLOR) {
return alpha
? `rgba(${ convert[inputColorFormat].rgb(color).join(', ') }, ${ alpha })`
: `rgb(${ convert[inputColorFormat].rgb(color).join(', ') })`;
Expand All @@ -54,7 +62,7 @@ const getRGBColorStr = (inputColorFormat, color, alpha) => {
};

const getHSLStr = (color, inputColorFormat) => {
const colorArr = inputColorFormat !== 'hsl'
const colorArr = inputColorFormat !== HSL_COLOR
? convert[inputColorFormat].hsl(color)
: color;
return `${ colorArr[0] }, ${ colorArr[1] }%, ${ colorArr[2] }%`;
Expand All @@ -63,13 +71,13 @@ const getHSLStr = (color, inputColorFormat) => {
const getHSLColorStr = (inputColorFormat, color, alpha) => {
const colorStr = getHSLStr(color, inputColorFormat);

if (inputColorFormat === 'hex') {
if (inputColorFormat === HEX_COLOR) {
return alpha
? `hsla(${ colorStr }, ${ convertHEXAlphaValueToNumber(alpha) })`
: `hsl(${ colorStr })`;
}

if (inputColorFormat === 'rgb' || inputColorFormat === 'keyword') {
if (inputColorFormat === RGB_COLOR || inputColorFormat === KEYWORD_COLOR) {
return alpha
? `hsla(${ colorStr }, ${ alpha })`
: `hsl(${ colorStr })`;
Expand Down

0 comments on commit 34410db

Please sign in to comment.