🐛 Parser fails with "Expected a compound selector" due to @media query

[Th3S4mur41]

Environment information

CLI:
  Version:                      1.8.0
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           linux

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v20.14.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/10.7.0"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 false

Linter:
  JavaScript enabled:           true
  JSON enabled:                 true
  CSS enabled:                  true
  Recommended:                  true
  All:                          false
  Enabled rules:
  performance/noDelete
  suspicious/noCatchAssign
  suspicious/noUnsafeNegation
  complexity/useLiteralKeys
  nursery/useThrowOnlyError
  style/useImportType
  complexity/noMultipleSpacesInRegularExpressionLiterals
  a11y/useValidLang
  complexity/noUselessEmptyExport
  nursery/noUndeclaredDependencies
  nursery/noConsole
  a11y/useValidAriaRole
  correctness/noConstantCondition
  a11y/useAriaActivedescendantWithTabindex
  nursery/noYodaExpression
  style/useDefaultParameterLast
  complexity/noEmptyTypeParameters
  correctness/noConstructorReturn
  style/useSelfClosingElements
  suspicious/noAssignInExpressions
  suspicious/noDuplicateParameters
  suspicious/useNamespaceKeyword
  style/useTemplate
  suspicious/useValidTypeof
  correctness/noUnusedLabels
  complexity/noUselessTernary
  correctness/noUnreachableSuper
  suspicious/noCompareNegZero
  suspicious/noExplicitAny
  correctness/noSwitchDeclarations
  a11y/noAutofocus
  correctness/noUnsafeOptionalChaining
  correctness/noConstAssign
  nursery/noMisplacedAssertion
  suspicious/noControlCharactersInRegex
  complexity/noUselessTypeConstraint
  style/noVar
  suspicious/noDoubleEquals
  suspicious/noRedundantUseStrict
  style/useLiteralEnumMembers
  nursery/noUselessUndefinedInitialization
  suspicious/noEmptyInterface
  nursery/noInvalidPositionAtImportRule
  suspicious/noConstEnum
  nursery/noDuplicateElseIf
  correctness/noPrecisionLoss
  nursery/noRestrictedImports
  nursery/noUnmatchableAnbSelector
  nursery/noUnknownSelectorPseudoElement
  correctness/noStringCaseMismatch
  nursery/noUnknownFunction
  correctness/noSetterReturn
  correctness/noInvalidConstructorSuper
  suspicious/noGlobalIsNan
  a11y/useKeyWithClickEvents
  nursery/useExplicitLengthCheck
  complexity/noUselessThisAlias
  correctness/noUnreachable
  nursery/noImportantInKeyframe
  nursery/noUselessStringConcat
  complexity/noThisInStatic
  complexity/useOptionalChain
  correctness/noInnerDeclarations
  style/noParameterAssign
  suspicious/noDuplicateCase
  suspicious/noDuplicateObjectKeys
  nursery/noLabelWithoutControl
  a11y/useValidAnchor
  suspicious/noFallthroughSwitchClause
  complexity/useRegexLiterals
  suspicious/noImplicitAnyLet
  correctness/noSelfAssign
  nursery/useThrowNewError
  style/noUselessElse
  style/useShorthandFunctionType
  suspicious/noMisleadingCharacterClass
  nursery/noUnusedFunctionParameters
  suspicious/noRedeclare
  suspicious/noShadowRestrictedNames
  suspicious/noUnsafeDeclarationMerging
  a11y/useMediaCaption
  complexity/noUselessLabel
  complexity/noUselessCatch
  nursery/noDuplicateFontNames
  correctness/noUnsafeFinally
  a11y/useAriaPropsForRole
  correctness/noNonoctalDecimalEscape
  nursery/noEvolvingTypes
  style/useEnumInitializers
  a11y/useHtmlLang
  suspicious/noDuplicateTestHooks
  complexity/noStaticOnlyClass
  nursery/noUnknownMediaFeatureName
  style/useWhile
  complexity/useArrowFunction
  style/noInferrableTypes
  a11y/noNoninteractiveTabindex
  complexity/useSimpleNumberKeys
  correctness/useYield
  a11y/noInteractiveElementToNoninteractiveRole
  nursery/noEmptyBlock
  correctness/noUnnecessaryContinue
  nursery/useTopLevelRegex
  style/useNumericLiterals
  suspicious/noApproximativeNumericConstant
  correctness/noGlobalObjectCalls
  suspicious/noImportAssign
  suspicious/noLabelVar
  a11y/useAltText
  correctness/noEmptyCharacterClassInRegex
  nursery/useNumberToFixedDigitsArgument
  suspicious/noSparseArray
  a11y/useIframeTitle
  complexity/noBannedTypes
  a11y/noSvgWithoutTitle
  correctness/noVoidElementsWithChildren
  nursery/useDefaultSwitchClause
  correctness/useJsxKeyInIterable
  style/useAsConstAssertion
  complexity/noUselessLoneBlockStatements
  style/noArguments
  a11y/useValidAriaValues
  style/useExportType
  suspicious/noCommentText
  suspicious/noDebugger
  suspicious/noGlobalAssign
  suspicious/noMisleadingInstantiator
  suspicious/noDuplicateJsxProps
  suspicious/noPrototypeBuiltins
  a11y/noPositiveTabindex
  correctness/noEmptyPattern
  complexity/noExcessiveNestedTestSuites
  nursery/noDuplicateJsonKeys
  a11y/useKeyWithMouseEvents
  nursery/useConsistentBuiltinInstantiation
  security/noDangerouslySetInnerHtmlWithChildren
  correctness/noRenderReturnValue
  correctness/useExhaustiveDependencies
  security/noGlobalEval
  style/noNonNullAssertion
  a11y/noRedundantRoles
  complexity/useFlatMap
  correctness/useIsNan
  style/useConst
  suspicious/noExtraNonNullAssertion
  nursery/useErrorMessage
  suspicious/noGlobalIsFinite
  suspicious/noAsyncPromiseExecutor
  suspicious/noSelfCompare
  suspicious/noThenProperty
  suspicious/useDefaultSwitchClauseLast
  security/noDangerouslySetInnerHtml
  style/useNodejsImportProtocol
  a11y/noDistractingElements
  nursery/useFocusableInteractive
  complexity/noWith
  suspicious/noArrayIndexKey
  nursery/useImportRestrictions
  complexity/noExtraBooleanCast
  performance/noAccumulatingSpread
  a11y/useValidAriaProps
  a11y/noRedundantAlt
  correctness/noChildrenProp
  suspicious/noConfusingLabels
  suspicious/noDuplicateClassMembers
  nursery/useSemanticElements
  suspicious/noSuspiciousSemicolonInJsx
  nursery/useGenericFontNames
  suspicious/useGetterReturn
  nursery/noDuplicateSelectorsKeyframeBlock
  suspicious/noConfusingVoidType
  a11y/useButtonType
  suspicious/noFocusedTests
  nursery/useDateNow
  nursery/useImportExtensions
  a11y/noAriaUnsupportedElements
  correctness/noFlatMapIdentity
  a11y/noBlankTarget
  a11y/useHeadingContent
  correctness/useValidForDirection
  nursery/noDoneCallback
  correctness/noVoidTypeReturn
  correctness/noInvalidUseBeforeDeclaration
  a11y/noAriaHiddenOnFocusable
  a11y/useAnchorContent
  complexity/noUselessRename
  correctness/noInvalidNewBuiltin
  style/useNumberNamespace
  complexity/noUselessConstructor
  a11y/noAccessKey
  nursery/useSortedClasses
  style/noUnusedTemplateLiteral
  complexity/noUselessSwitchCase
  style/useExponentiationOperator
  nursery/noUnknownUnit
  nursery/useAdjacentOverloadSignatures
  style/useSingleVarDeclarator
  suspicious/noExportsInTest
  a11y/noNoninteractiveElementToInteractiveRole
  style/noCommaOperator
  nursery/noUnknownProperty
  nursery/noReactSpecificProps
  suspicious/useIsArray
  a11y/noHeaderScope
  complexity/noUselessFragments
  nursery/noDuplicateAtImportRules
  complexity/noForEach
  suspicious/noClassAssign
  suspicious/noMisrefactoredShorthandAssign
  suspicious/noFunctionAssign

Workspace:
  Open Documents:               0

What happened?

Code Sandbox

Expected result

This is valid CSS, the parser should not fail

Code of Conduct

• I agree to follow Biome's Code of Conduct

[denbezrukov]

Hi,

Could you please help me understand why this CSS is considered valid?

According to the specification, a media rule block can only contain rules.

https://drafts.csswg.org/css-syntax-3/#typedef-rule-list
https://drafts.csswg.org/mediaqueries-5/#typedef-media-query-list

@media <media-query-list> {
  <rule-list>
}

[denbezrukov]

Ah, okey, I got it.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules
if it's a nesting at rule it can have declarations.

UPD: need to check others conditional at rules. https://drafts.csswg.org/css-nesting-1/#conditionals

[ematipico]

Yeah it's part of recent spec