Importing radix colors breaks build

[mrmartineau]

I am trying to import some Radix UI colors but it breaking my build.

Radix colors have been installed to my project: yarn add @radix-ui/colors

Here's my source file:

/* colors.css */
@import '@radix-ui/colors/gray.css';

:root {
  --color-brand-blue: blue;
  --color-brand-navy: navy;
}

Here's my build script:

import {
  bundle,
  browserslistToTargets
} from 'lightningcss';
import fs from 'node:fs';
import browserslist from 'browserslist';

const bundleCSS = (entry, out, minify = false) => {
  let { code, map } = bundle({
    filename: entry,
    minify,
    sourceMap: true,
    targets: browserslistToTargets(browserslist('defaults'))
  });

  code = code.toString()

  if (map) {
    code = `${code}\n/*# sourceMappingURL=${out}.css.map */\n`;
  }

  fs.writeFileSync(`./dist/${out}.css`, code);

  if (map) {
    fs.writeFileSync(`./dist/${out}.css.map`, map);
  }
}

console.time('\n👷‍♀️ Bundled Styles');

bundleCSS('./src/tokens/colors.css', 'colors.min', true);

console.timeEnd('\n👷‍♀️ Bundled Styles')

I get this error when the @import '@radix-ui/colors/gray.css'; line is added:

file:///Users/zmartineau/code/dare/node-libs/packages/styles/build.js:9
  let { code, map } = bundle({
                      ^

SyntaxError: No such file or directory (os error 2)
    at bundleCSS (file:///Users/mrmartineau/code/styles/build.js:9:23)
    at file:///Users/mrmartineau/code/styles/build.js:31:1
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26)
    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:109:5) {
  fileName: './src/tokens/colors.css',
  loc: { line: 1, column: 1 },
  data: 'ResolverError'
}

Node.js v22.4.0

Does Lightning support this?

[devongovett]

It doesn't support resolving from node_modules out of the box. @import works like in the browser where it accepts a relative path. So you could do @import './path/to/node_modules/@radix-ui/colors-gray.css' for example. Or you could implement a custom resolver to handle it: https://lightningcss.dev/bundling.html#custom-resolvers

[mrmartineau]

Hi @devongovett, thanks for your response, is there not a resolver that already exists? If not, I will see if I get the time to create one, so for now I have inlined some of the Radix colours.