Scientific notation causes error in OKLCH?

[maybebansky]

I'm using scientific notation for color channels that I pass to the Color object in the OKLCH format.

I know it's a bit weird but I'm getting these values as a result of color manipulation elsewhere in my app.

// This works fine
const color1 = new Color("oklch(50% 4 30)");

// This errors
const color2 = new Color("oklch(50% 4.0e-1 30)");

"oklch(50% 4.0e-1 30)" does appear to be valid CSS so is this technically a bug (albeit it an edge case)?

The error is

Uncaught TypeError: undefined not allowed for Chroma in oklch()

[LeaVerou]

I'd be surprised if this is only in oklch, have you tried other spaces?

[facelessuser]

I have a local fix for this. Color.js is only parsing a very simplistic expectation for numbers, but it is easy to account for this.

> var { default: Color } = require("colorjs.io");
undefined
> const color2 = new Color("oklch(0.5 4.0e-1 30)")
undefined
> color2
Color {
  space: <ref *2> ColorSpace {
    id: 'oklch',
    name: 'Oklch',
    base: <ref *1> ColorSpace {
      id: 'oklab',
      name: 'Oklab',
      base: [ColorSpace],
      aliases: undefined,
      fromBase: [Function: fromBase],
      toBase: [Function: toBase],
      coords: [Object],
      white: [Array],
      formats: [Object],
      gamutSpace: [Circular *1],
      inGamut: [Function (anonymous)],
      referred: undefined,
      path: [Array]
    },
    aliases: undefined,
    fromBase: [Function: fromBase],
    toBase: [Function: toBase],
    coords: { l: [Object], c: [Object], h: [Object] },
    white: [ 0.9504559270516716, 1, 1.0890577507598784 ],
    formats: { oklch: [Object], color: [Object] },
    gamutSpace: <ref *1> ColorSpace {
      id: 'oklab',
      name: 'Oklab',
      base: [ColorSpace],
      aliases: undefined,
      fromBase: [Function: fromBase],
      toBase: [Function: toBase],
      coords: [Object],
      white: [Array],
      formats: [Object],
      gamutSpace: [Circular *1],
      inGamut: [Function (anonymous)],
      referred: undefined,
      path: [Array]
    },
    inGamut: [Function (anonymous)],
    referred: undefined,
    path: [ [ColorSpace], [ColorSpace], [Circular *2] ]
  },
  coords: [
    [Number: 0.5] { type: '<number>', raw: '0.5' },
    [Number: 0.4] { type: '<number>', raw: '4.0e-1' },
    [Number: 30] { type: '<number>', raw: '30' }
  ],
  alpha: 1
}

[facelessuser]

PR to fix this: #508

[LeaVerou]

Discussions are not meant for tracking bugs, so I opened #509 and I'm closing this.