eslint / eslint/css

Bug: @theme inline At-rule '@theme' should not contain a prelude

Open
#424 2 comments 0 reactions 1 assignee Claimed by @DMartens View on GitHub
bug
Dominant language
JavaScript
Stars
308
Forks
44
Avg merge
2d 6h
Merged PRs (30d)
18

Description

### Environment

Environment Info:

Node version: v24.14.1
npm version: v11.11.0
Local ESLint version: v10.2.0 (Currently used)
Global ESLint version: Not found
Operating System: linux 6.18.19-amd64-desktop-rolling

### Which language are you using?

stylesheet

### What did you do?

Configuration

```ts
{
files: ["**/*.astro"],
extends: [betterTailwindcss.configs.recommended],
settings: {
"better-tailwindcss": {
entryPoint: "./src/styles/global.css",
detectComponentClasses: true,
},
},
languageOptions: {
parser: parserAstro,
parserOptions: {
parser: tseslint.parser,
},
},
rules: {
"@stylistic/arrow-parens": "warn",
"@stylistic/jsx-one-expression-per-line": "off",
"@stylistic/member-delimiter-style": "warn",
"@stylistic/multiline-ternary": "warn",
"@stylistic/quotes": "warn",
"@stylistic/semi": "warn",
},
},
{
files: ["**/*.css"],
plugins: { css },
extends: ["css/recommended"],
language: "css/css",
languageOptions: {
customSyntax: tailwind4,
},
},
```

```css
:root {
--accent-foreground: var(--color-neutral-900);
--background: var(--color-slate-50);
--foreground: var(--color-neutral-950);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--card: var(--color-white);
}

[data-theme="dark"] {
--accent-foreground: var(--color-neutral-100);
--background: var(--color-slate-900);
--foreground: var(--color-neutral-50);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--card: var(--color-slate-800);
}

@theme {
--breakpoint-sm: 22.8125rem; /* 365px */
--breakpoint-md: 48rem; /* 768px */
--breakpoint-lg: 64rem; /* 1024px */
--breakpoint-xl: 90rem; /* 1440px */
--breakpoint-2xl: 96rem; /* 1536px */

--color-secondary: #212e80;
--color-primary: #c13026;
--color-neutral-sand: #f6f5f1;

--container-8xl: 88rem; /* 1408px */
--container-90rem: 90rem; /* 1440px */
--container-9xl: 96rem; /* 1536px */
}

@theme inline {
--color-accent-foreground: var(--accent-foreground);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-card: var(--card);
}
```

### What did you expect to happen?

It should not give any linting issues when using `@theme inline` for Tailwind configuration.

### What actually happened?

When we want to have a color for both light and dark themes, we need to define it in `@theme inline` as the [docs say](https://tailwindcss.com/docs/colors#referencing-other-variables), code above.

Linting does give the next bug:
```sh
❯ pnpm eslint src/styles/global.css

/home/LuisAlaguna/Projects/central-mosque-bogota/frontend/src/styles/global.css
46:1 error At-rule '@theme' should not contain a prelude css/no-invalid-at-rules
```

`@theme` already gives an issue without this package; now we have found this issue.

### Link to Minimal Reproducible Example

https://github.com/SalahAdDin/central-mosque-bogota/tree/main/frontend

### Participation

- [ ] I am willing to submit a pull request for this issue.

### AI acknowledgment

- [x] I did not use AI to generate this issue report.
- [ ] (If the above is not checked) I have reviewed the AI-generated content before submitting.

### Additional comments

We already opened an issue on [`tailwind-csstree`](https://github.com/humanwhocodes/tailwind-csstree/issues/56#issuecomment-4248703378).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.