Support hex codes without the # about colord

[omgovich]

Hi! Previously (in v1.x) Colord worked as you described, but this behavior causes a lot of weird errors in many projects, so since v2 Colord strictly follows CSS <color> specs. According to the specs, hexadecimal colors must have # prefix.

The easiest way for you is to use Colord v1.7.2.

Or you can define your own local plugin:

// utils/colord.js
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';

const lazyHexMatcher = /^([0-9a-f]{3,6})$/i;

const parseLazyHex = (value: string) => {
  const match = lazyHexMatcher.exec(value);

  if (!match) return null;

  const hex = match[1];

  if (hex.length === 3) {
    return {
      r: parseInt(hex[0] + hex[0], 16),
      g: parseInt(hex[1] + hex[1], 16),
      b: parseInt(hex[2] + hex[2], 16),
      a: 1,
    };
  }

  if (hex.length === 6) {
    return {
      r: parseInt(hex.substr(0, 2), 16),
      g: parseInt(hex.substr(2, 2), 16),
      b: parseInt(hex.substr(4, 2), 16),
      a: 1,
    };
  }

  return null;
};

const lazyHexPlugin = (ColordClass, parsers) => {
  parsers.string.push([parseLazyHex, "hex"]);
};

extend([lazyHexPlugin, namesPlugin])

export * from 'colord'

// anyOtherFile.js
import { colord } from "./utils/colord.js"

colord('fff').toHslString() // "hls(0, 0%, 100%)"

[marcofugaro]

Thanks! Any chance you can make this into an importable plugin as well?
It's a feature that was dropped, would be useful if it was at least optional.

[omgovich]

We're trying to be focused on the CSS specs, so providing any logic that doesn't follow those rules might mislead the developers using the library and cause errors in their projects. We already had pretty big issues in the past because of the lazy parsing, so I think we not having non-strict hex parsing in plans at the moment.

[marcofugaro]

Got it, thanks for the plugin!