diff --git a/.eslintrc-full.js b/.eslintrc-full.js index 140fd70..05f0bd1 100644 --- a/.eslintrc-full.js +++ b/.eslintrc-full.js @@ -11,6 +11,7 @@ module.exports = { "eslint-config-postcss", ], rules: { + "arrow-parens": 0, "comma-dangle": [2, { arrays: "always-multiline", objects: "always-multiline", diff --git a/.eslintrc.js b/.eslintrc.js index 7630480..44725ab 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,6 +11,7 @@ module.exports = { "eslint-config-postcss", ], rules: { + "arrow-parens": 0, "comma-dangle": [1, { arrays: "always-multiline", objects: "always-multiline", diff --git a/index.js b/index.js index acb1355..9a7423c 100644 --- a/index.js +++ b/index.js @@ -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|@|$)/; @@ -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); } } }); diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..e0b1a45 --- /dev/null +++ b/src/constants.js @@ -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', +}; diff --git a/src/converts.js b/src/converts.js new file mode 100644 index 0000000..dc1de4b --- /dev/null +++ b/src/converts.js @@ -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, +}; diff --git a/src/utils.js b/src/utils.js index 7086e4d..b145304 100644 --- a/src/utils.js +++ b/src/utils.js @@ -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; @@ -16,7 +24,7 @@ const parseHEXAColor = color => { break; case 3: case 6: - hexAlpha = 'ff'; + hexAlpha = DEFAULT_HEX_ALPHA; hexColor = newColor; break; } @@ -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(', ') })`; @@ -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] }%`; @@ -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 })`;