Use multiple values instead of @supports query for p3 colors

[benjaminleonard]

Should fix #40

Tested locally with a npm link should confirm with the canary release.

📦 Published PR as canary version: 1.0.1--canary.41.2907991.0

✨ Test out this PR locally via:

npm install @oxide/design-system@1.0.1--canary.41.2907991.0
# or 
yarn add @oxide/design-system@1.0.1--canary.41.2907991.0

[david-crespo]

I have erred.

~/oxide/console $ npm run build

> oxide@0.0.0 build
> vite build

vite v4.4.4 building for production...
✓ 183 modules transformed.
✓ built in 1.36s
[vite:css] [postcss] /Users/david/oxide/console/libs/ui/styles/components/dialog.css:11:3: The `bg-scrim` class does not exist. If `bg-scrim` is a custom class, make sure it is defined within a `@layer` directive.
file: /Users/david/oxide/console/libs/ui/styles/index.css:11:3
error during build:
CssSyntaxError: [postcss] /Users/david/oxide/console/libs/ui/styles/components/dialog.css:11:3: The `bg-scrim` class does not exist. If `bg-scrim` is a custom class, make sure it is defined within a `@layer` directive.
    at Input.error (/Users/david/oxide/console/node_modules/postcss/lib/input.js:106:16)
    at AtRule.error (/Users/david/oxide/console/node_modules/postcss/lib/node.js:115:32)
    at processApply (/Users/david/oxide/console/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:380:29)
    at /Users/david/oxide/console/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:532:9
    at /Users/david/oxide/console/node_modules/tailwindcss/lib/processTailwindFeatures.js:57:50
    at async plugins (/Users/david/oxide/console/node_modules/tailwindcss/lib/plugin.js:38:17)
    at async LazyResult.runAsync (/Users/david/oxide/console/node_modules/postcss/lib/lazy-result.js:289:11)
    at async compileCSS (file:///Users/david/oxide/console/node_modules/vite/dist/node/chunks/dep-abb4f102.js:38811:25)
    at async Object.transform (file:///Users/david/oxide/console/node_modules/vite/dist/node/chunks/dep-abb4f102.js:38217:56)
    at async transform (file:///Users/david/oxide/console/node_modules/rollup/dist/es/shared/node-entry.js:24243:16)

The class is there in the tokens file:

  '.bg-scrim': [
    { 'background-color': 'var(--surface-scrim)' },
    { 'background-color': 'var(--surface-scrim-p3)' },
  ],

so if it's complaining about it being missing from CSS, it must be getting dropped on the floor when TW tries to turn it into CSS. It's not only this one, sometimes it complains about other ones.

[david-crespo]

TW says it uses this library postcss-js to turn the JS into CSS. You can write a script that calls it directly. So I tried every combination I could think of.

// test.js
const postcss = require('postcss')
const postcssJs = require('postcss-js')
const nested = require('postcss-nested')

const style = {
  '.a': [{ color: 'var(--content-accent)' }, { color: 'var(--content-accent-p3)' }],
  '.b': {
    color: 'var(--content-accent)',
  },
  '.c': {
    color: 'var(--content-accent)',
    color: 'var(--content-accent-p3)',
  },
  '.d': {
    color: 'var(--content-accent)',
    '&': {
      color: 'var(--content-accent-p3)',
    },
  },
}

postcss(nested)
  .process(style, { parser: postcssJs, from: undefined })
  .then((result) => console.log(result.css))

Nothing worked. I was in despair.

~/oxide/console $ node test.js
.a: [object Object];
.a: [object Object];
.b {
    color: var(--content-accent);
}
.c {
    color: var(--content-accent-p3);
}
.d {
    color: var(--content-accent);
}
.d {
    color: var(--content-accent-p3);
}

(Actually .d kind of worked. But I don't want two classes.)

Then I remembered postcss-js lets you go the other way too: take CSS and turn into JS. And lo:

// test2.js
const postcss = require('postcss')
const postcssJs = require('postcss-js')

console.log(postcssJs.objectify(postcss.parse('.a { color: #abc; color: #def; }')))

~/oxide/console $ node test2.js 
{ '.a': { color: [ '#abc', '#def' ] } }

💀

[david-crespo]

[zephraph]

🚀 PR was released in v1.0.1 🚀