Improve CSS builder module

package.json

@@ -19,7 +19,7 @@
   ],
   "scripts": {
     "test": "jest --verbose",
-    "lint": "eslint src/**/*.ts",
+    "lint": "eslint \"src/**/*.{js,ts}\"",
     "clean": "./scripts/clean.sh",
     "finish": "./scripts/finish.sh",
     "build": "yarn clean && rollup --config rollup.config.js --bundleConfigAsCjs && yarn finish",

src/@demo/demo.js

@@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const demo = document.getElementById(div);
         const container = document.createElement('div');
         const wrapper = document.createElement('div');
-        
+
         container.classList.add('demo-container');
         wrapper.classList.add('demo-wrapper');
 

src/@demo/demo1/index.js

@@ -12,7 +12,7 @@ export default (ColorTranslator) => {
             color
                 .setS(row * 10)
                 .setL(col * 5 + 30);
-                
+
             const box = document.createElement('div');
 
             box.classList.add('box');

src/@demo/demo10/index.js

@@ -34,11 +34,11 @@ export default (ColorTranslator, { Harmony, Mix }) => {
             .then((svgCode) => {
                 const harmonyColors = ColorTranslator.getHarmony(baseColor, item.value, Mix.SUBTRACTIVE);
                 const selector = 'path' + harmonyColors.map((color) => `:not([fill="${color}"])`).join('');
-                wheel.innerHTML = svgCode;                
-                harmonyColors.forEach((hex) => createElement('box', harmony).style.background = hex);                
+                wheel.innerHTML = svgCode;
+                harmonyColors.forEach((hex) => createElement('box', harmony).style.background = hex);
                 wheel.querySelectorAll(selector).forEach((path) => path.setAttribute('fill-opacity', '0.25'));
             });
-            
+
     };
 
     harmonies.forEach((item) => createHarmony(item));

src/@demo/demo6/index.js

@@ -3,7 +3,7 @@ import './styles.scss';
 export default (ColorTranslator) => {
 
     const container = document.createElement('div');
-    
+
     const colors = ['#F00', '#FF8000', '#FF0', '#0F0', '#00F', '#AA00FF', '#FF00AA'];
 
     const createBox = (color, type) => {
@@ -16,7 +16,7 @@ export default (ColorTranslator) => {
 
     colors.forEach((color) => {
         const shades = ColorTranslator.getShades(color, 3).reverse();
-        const tints = ColorTranslator.getTints(color, 3);        
+        const tints = ColorTranslator.getTints(color, 3);
         shades.forEach((shade) => createBox(shade, 'shade'));
         createBox(color);
         tints.forEach((tint) => createBox(tint, 'tint'));

src/@demo/demo7/index.js

@@ -14,7 +14,7 @@ export default (ColorTranslator) => {
         [2, 3],
         [1, 2, 3]
     ];
-    
+
     const fillPlanes = () => {
         const planes = container.querySelectorAll('#planes path');
         planes.forEach((plane, index) => {
@@ -23,8 +23,8 @@ export default (ColorTranslator) => {
                 color = mixes[index];
             } else if(mixes[index]) {
                 const colors = mixes[index].map((i) => mixes[i - 1]);
-                color = mixes[index] = ColorTranslator.getMixHEX(colors);           
-            }  
+                color = mixes[index] = ColorTranslator.getMixHEX(colors);
+            }
             plane.setAttribute('fill', color);
         });
     };

src/@demo/demo8/index.js

@@ -13,7 +13,7 @@ export default (ColorTranslator, { Mix }) => {
         [2, 3],
         [1, 2, 3]
     ];
-    
+
     const fillPlanes = () => {
         const planes = container.querySelectorAll('#planes path');
         planes.forEach((plane, index) => {
@@ -22,8 +22,8 @@ export default (ColorTranslator, { Mix }) => {
                 color = mixes[index];
             } else if(mixes[index]) {
                 const colors = mixes[index].map((i) => mixes[i - 1]);
-                color = mixes[index] = ColorTranslator.getMixHEX(colors, Mix.SUBTRACTIVE);           
-            }  
+                color = mixes[index] = ColorTranslator.getMixHEX(colors, Mix.SUBTRACTIVE);
+            }
             plane.setAttribute('fill', color);
         });
     };

src/@demo/demo9/index.js

@@ -34,11 +34,11 @@ export default (ColorTranslator, { Harmony }) => {
             .then((svgCode) => {
                 const harmonyColors = ColorTranslator.getHarmony(baseColor, item.value);
                 const selector = 'path' + harmonyColors.map((color) => `:not([fill="${color}"])`).join('');
-                wheel.innerHTML = svgCode;                
-                harmonyColors.forEach((hex) => createElement('box', harmony).style.background = hex);                
+                wheel.innerHTML = svgCode;
+                harmonyColors.forEach((hex) => createElement('box', harmony).style.background = hex);
                 wheel.querySelectorAll(selector).forEach((path) => path.setAttribute('fill-opacity', '0.25'));
             });
-            
+
     };
 
     harmonies.forEach((item) => createHarmony(item));

src/color/css.ts

@@ -1,44 +1,82 @@
-import { ColorModel, MIN_DECIMALS } from '#constants';
 import {
     HEXObject,
     RGBObject,
     HSLObject,
-    CMYKObject
+    CMYKObject,
+    Color,
+    NumberOrString
 } from '@types';
+import {
+    ColorModel,
+    TEMPLATE_VAR,
+    MIN_DECIMALS,
+    COLOR_PROPS,
+    VALID_COLOR_OBJECTS
+} from '#constants';
 import {
     toHEX,
-    hasProp,
     round,
-    roundAll,
-    toHEXAll
+    getOrderedArrayString
 } from '#helpers';
 
+const prepareColorForCss = (color: Color, isHex = false): NumberOrString[] => {
+    const props = getOrderedArrayString(Object.keys(color));
+    const model = VALID_COLOR_OBJECTS[props];
+    const keys = COLOR_PROPS[model];
+    return keys.reduce((result: NumberOrString[], key: keyof typeof color): NumberOrString[] => {
+        const value = color[key];
+        if (typeof value !== 'undefined') {
+            if (isHex) {
+                result.push(
+                    toHEX(value)
+                );
+            } else {
+                result.push(
+                    round(
+                        value,
+                        key === 'a' && MIN_DECIMALS
+                    )
+                );
+            }
+        }
+        return result;
+    }, []);
+};
+
+const getResultFromTemplate = (template: string, vars: NumberOrString[]): string => {
+    return template.replace(TEMPLATE_VAR, (__match: string, indexStr: string): string => {
+        const index = +indexStr - 1;
+        return `${vars[index]}`;
+    });
+};
+
 export const CSS = {
     [ColorModel.HEX]: (color: HEXObject | RGBObject): string => {
-        const { r, g, b } = color;
-        const values = toHEXAll([r, g, b]);
-        const hasAlpha = hasProp(color, 'a');
-        const alphaText = hasAlpha ? toHEX(color.a) : '';
-        return `#${values.join('')}${alphaText}`;
+        const values = prepareColorForCss(color, true);
+        const template = values.length === 4
+            ? '#{1}{2}{3}{4}'
+            : '#{1}{2}{3}';
+        return getResultFromTemplate(template, values);
     },
     [ColorModel.RGB]: (color: RGBObject): string => {
-        const { r, g, b } = color;
-        const values = roundAll([r, g, b]);
-        const hasAlpha = hasProp<RGBObject>(color, 'a');
-        const alphaText = hasAlpha ? `,${round(color.a, MIN_DECIMALS)}` : '';
-        return `rgb${hasAlpha ? 'a' : ''}(${values.join(',')}${alphaText})`;
+        const values = prepareColorForCss(color);
+        const template = values.length === 4
+            ? 'rgba({1},{2},{3},{4})'
+            : 'rgb({1},{2},{3})';
+        return getResultFromTemplate(template, values);
     },
     [ColorModel.HSL]: (color: HSLObject): string => {
-        const { h, s, l } = color;
-        const hasAlpha = hasProp<HSLObject>(color, 'a');
-        const alphaText = hasAlpha ? `,${round(color.a, MIN_DECIMALS)}` : '';
-        return `hsl${hasAlpha ? 'a' : ''}(${round(h)},${round(s)}%,${round(l)}%${alphaText})`;
+        const values = prepareColorForCss(color);
+        const template = values.length === 4
+            ? 'hsla({1},{2}%,{3}%,{4})'
+            : 'hsl({1},{2}%,{3}%)';
+        return getResultFromTemplate(template, values);
     },
     [ColorModel.CMYK]: (color: CMYKObject): string => {
-        const { c, m, y, k } = color;
-        const values = roundAll([c, m, y, k]);
-        const hasAlpha = hasProp<CMYKObject>(color, 'a');
-        const alphaText = hasAlpha ? `,${round(color.a, MIN_DECIMALS)}` : '';
-        return `cmyk(${values.join('%,')}%${alphaText})`;
+        const values = prepareColorForCss(color);
+        const template = values.length === 5
+            ? 'cmyk({1}%,{2}%,{3}%,{4}%,{5})'
+            : 'cmyk({1}%,{2}%,{3}%,{4}%)';
+        return getResultFromTemplate(template, values);
     }
 };

src/color/utils.ts

@@ -26,7 +26,8 @@ import {
     COLOR_KEYS,
     ERRORS,
     HSL_HUE,
-    MAX_DECIMALS
+    MAX_DECIMALS,
+    VALID_COLOR_OBJECTS
 } from '#constants';
 import {
     getOrderedArrayString,
@@ -142,16 +143,6 @@ const getColorModelFromString = (color: string): ColorModel => {
     return model;
 };
 
-const VALID_COLOR_OBJECTS = Object.entries(ColorModel).reduce((acc: Record<string, ColorModel>, entry: [string, ColorModel]) => {
-    const [key, value] = entry;
-    if (key !== ColorModel.HEX) {
-        const ordered = getOrderedArrayString(key.split(''));
-        acc[ordered] = value;
-        acc['A' + ordered] = value;
-    }
-    return acc;
-}, {});
-
 //---Detect the color model from an object
 const getColorModelFromObject = (color: Color): ColorModel => {
 
@@ -192,7 +183,7 @@ const getColorModelFromObject = (color: Color): ColorModel => {
     if (!model || invalid) {
         throw new Error(ERRORS.NOT_ACCEPTED_OBJECT_INPUT);
     }
-    return model as ColorModel;
+    return model;
 };
 
 //---Detect the color model

src/constants/enums.ts

@@ -170,4 +170,18 @@ export enum ColorKeywords {
     'rebeccapurple'        = '#663399'
 }
 
-export const COLOR_KEYS = Object.keys(ColorKeywords);
+export const COLOR_KEYS = Object.keys(ColorKeywords);
+export const COLOR_PROPS = {
+    HEX: ['r', 'g', 'b', 'a'],
+    RGB: ['r', 'g', 'b', 'a'],
+    HSL: ['h', 's', 'l', 'a'],
+    CMYK: ['c', 'm', 'y', 'k', 'a']
+};
+export const VALID_COLOR_OBJECTS: Record<string, ColorModel> = {
+    BGR: ColorModel.RGB,
+    ABGR: ColorModel.RGB,
+    HLS: ColorModel.HSL,
+    AHLS: ColorModel.HSL,
+    CKMY: ColorModel.CMYK,
+    ACKMY: ColorModel.CMYK
+};

src/constants/regexps.ts

@@ -19,3 +19,4 @@ export const HSL_HUE = /^(-?(?:\d*\.)?\d+)((?:deg|grad|rad|turn)?)$/;
 
 export const PCENT = /^(\d+(?:\.\d+)?|\.\d+)%$/;
 export const HEX = /^0x([a-f\d]{1,2})$/i;
+export const TEMPLATE_VAR = /\{(\d+)\}/g;

src/helpers/index.ts

@@ -1,5 +1,9 @@
 import { NumberOrString } from '@types';
-import { PCENT, HEX, MAX_DECIMALS } from '#constants';
+import {
+    PCENT,
+    HEX,
+    MAX_DECIMALS
+} from '#constants';
 
 //---Has property
 export const hasProp = <T>(obj: T, prop: string): boolean => Object.prototype.hasOwnProperty.call(obj, prop);
@@ -31,10 +35,6 @@ export const toHEX = (h: NumberOrString): string => {
     return hex;
 };
 
-//---Convert all to final hexadecimal
-export const toHEXAll = (values: NumberOrString[]): string[] =>
-    values.map(value => toHEX(value));
-
 //---Calculate a decimal 255 from an RGB color
 export const getBase255Number = (color: string, alpha = false): number => {
     if (!alpha && PCENT.test(color)) {
@@ -66,10 +66,6 @@ export const round = (value: NumberOrString, decimals = 0): number => {
     return Math.round(+value * exp) / exp;
 };
 
-//---Round all values
-export const roundAll = (values: NumberOrString[], decimals = 0): number[] =>
-    values.map(value => round(value, decimals));
-
 //---Minimum and maximum
 export const minmax = (n: number, min: number, max: number): number => Math.max(min, Math.min(n, max));