Bug: crash when Tailwind 4 is used with a custom prefix

[andreww2012]

Environment

ESLint version: 9.29.0
@eslint/css version: 0.9.0
Node version: 20.19.1
npm version: pnpm@8.15.6
Operating System: Stackblitz

Which language are you using?

stylesheet

What did you do?

Configuration

import eslintPluginCss from '@eslint/css';
import { omit } from 'es-toolkit';
import { defineConfig } from 'eslint/config';
import { tailwind4 } from 'tailwind-csstree';

export default defineConfig([
  {
    files: ['**/*.css'],
    plugins: {
      css: eslintPluginCss,
    },
    language: 'css/css',
    languageOptions: {
      customSyntax: omit(tailwind4, ['scope']),
      tolerant: true,
    },
    rules: eslintPluginCss.configs.recommended.rules,
  },
]);

@import 'tailwindcss' prefix(foo);

What did you expect to happen?

No crash

What actually happened?

If customSyntax is set to either tailwind4 from tailwind-csstree or to tailwindSyntax from @eslint/css/syntax, the plugin crashes if Tailwind is used with a custom prefix.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/vitejs-vite-7lu9csyw

Participation

• I am willing to submit a pull request for this issue.

Additional comments

Unrelated to the reported problem but important: I had to omit tailwind4's scope property from tailwind-csstree because it is not serializable - otherwise I'm getting "The requested operation requires ESLint to serialize configuration data, but the configuration key "Value.theme" contains a function value, which cannot be serialized" error.

[nzakas]

This is a bug in tailwind-csstree, so moving there.

Please open a separate issue for the unrelated problem. We can't track two problems on the same issue.

[nzakas]

Copied to: humanwhocodes/tailwind-csstree#10