color-shorthand-hex-to-six-digit^5.0.3

Installation

Quick Take

Purpose

It’s a best practice to avoid shorthand color codes in email, for example, <td bgcolor='#ccc'>. This program converts three-digit hex color codes inside any data structures (strings, objects or arrays), for example <td bgcolor='#cccccc'>.

API — conv()

The main function conv() is imported like this:

It’s a function which takes one input argument:

• If the input is string, a converted string will be returned.
• If input is array or a plain object, it will be traversed and any hex codes within strings inside will be converted.
• If input is unsuitable: falsy things, functions etc. — input will be returned as is.

This program never throws an error, it’s meant to be used as a by-pass function.

Usage in Gulp environment

You don’t need a Gulp plugin; you can simply use this library whenever you get in control of the final stream, or especially, SCSS variables.

For example, tap the color-shorthand-hex-to-six-digit right after importing the SCSS variables. We hope you are not misbehaving and all your colour variables are in one place only, as variables.

// import SCSS variables from file (modules/src/scss/_variables.scss)

// native Node function to help with paths:
import path from "path";
// convert variables SCSS file to .JSON:
import scssToJson from "scss-to-json";
// lodash:
import mapKeys from "lodash.mapKeys";
// ...

function getScssVars() {
  const sassFilePath = path.resolve(
    __dirname,
    "modules/src/scss/_variables.scss"
  );
  const tempSassVars = scssToJson(sassFilePath);
  sassVars = mapKeys(tempSassVars, function (value, key) {
    return key.slice(1);
  });
  // convert all bad hex codes:
  sassVars = convShorthand(sassVars);
  // console.log('sassVars = ' + JSON.stringify(sassVars, null, 4))
}

Changelog