Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Stacked mode + breakpoint variants (e.g. `@dark@sm`) emit invalid media query: missing `and` between media features

オープン 初心者向け
  • 何か問題がありますか？
#444 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
76/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
css, typescript
領域
frontend

調査の方向性

packages/engine/src/utils/generate-condition.ts から始め、Bun を使って提供されている repro.mjs スクリプトで問題を再現します。breakpoint と color-mode の条件がどのように組み合わされるかを追跡し、そのうえで、積み重ねられたクラスが有効なメディアクエリを生成するか、または不正な CSS を出力するのではなく拒否されることを確認します。

索引モデルが issue の本文から書いたものです。

説明

Description

When a utility class combines a color-mode variant with a breakpoint variant (e.g. bg:black@dark@sm) and modeTrigger is media, the engine emits a malformed media query — the two media features are joined by a space instead of and:

@media (width>=52.125rem) (prefers-color-scheme:dark){.bg\:black\@dark\@sm{background-color:oklch(0% 0 none)}}

This is invalid CSS, so browsers drop the whole rule (the style silently never applies), and downstream CSS minifiers complain — e.g. esbuild during a Vite build:

▲ [WARNING] Expected "{" but found "(" [css-syntax-error]

The cause appears to be in packages/engine/src/utils/generate-condition.ts: when the mode's prefers-color-scheme component is pushed into an existing conditions.media array, generateCondition joins the media feature nodes with ' ' and no and combinator is inserted.

Note that @master/css-validator (same version) returns false for bg:black@dark@sm, so stacked variants may no longer be intended syntax in 2.0 — but then the expected behavior would be for the engine to reject the class rather than emit invalid CSS. Either outcome (emit ... and (prefers-color-scheme:dark), or treat the class as invalid) would be fine; silently generating a rule that browsers discard is the worst of both.

Expected: @media (width>=52.125rem) and (prefers-color-scheme:dark){...} — or the class is rejected as invalid.

Reproduction
  1. bun add @master/css@rc @master/css-compiler@rc @master/css-engine@rc (all resolve to 2.0.0-rc.88)
  2. master.css: 
    @import '@master/css';
  3. repro.mjs: 
    import { compileCSSManifestFile } from '@master/css-compiler'
import { MasterCSS } from '@master/css-engine'

const { manifest } = await compileCSSManifestFile('./master.css')
const css = new MasterCSS(manifest)
for (const name of ['bg:black@sm', 'bg:black@dark', 'bg:black@dark@sm']) {
    console.log(name, '=>', css.generate(name).map(r => r.text).join(''))
}
  4. bun repro.mjs prints: 
    bg:black@sm      => @media (width>=52.125rem){.bg\:black\@sm{background-color:oklch(0% 0 none)}}
bg:black@dark    => @media (prefers-color-scheme:dark){.bg\:black\@dark{background-color:oklch(0% 0 none)}}
bg:black@dark@sm => @media (width>=52.125rem) (prefers-color-scheme:dark){.bg\:black\@dark\@sm{background-color:oklch(0% 0 none)}}

The single-variant classes are correct; the stacked one is missing and between the two media features. The same output is produced through @master/css.vite in a real build.

System Informations
OS: macOS (arm64)
Node.js / runtime: Bun 1.3.0
Package Manager: bun
@master/css: 2.0.0-rc.88 (also present in earlier 2.0 rc versions; source on the `rc` branch still joins media condition nodes with a space)
主要言語
TypeScript
スター
2k
フォーク
44
平均マージ
1日 3時間
マージ済み PR（30日）
1

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

master-co/css のほかの issue

master-co/css の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。