swc-project/swc · error

Boolean logic in @custom-media at-rules is not supported by

Error message

Boolean logic in @custom-media at-rules is not supported by swc

What it means

swc_css_compat lowers the Media Queries Level 5 `@custom-media` extension when the custom-media compat option is enabled. A custom media rule whose value is a bare custom-media identifier (boolean composition such as `@custom-media --a --b;`) instead of a parenthesized media query list reaches the `CustomMediaQueryMediaType::Ident` arm and panics via `unimplemented!`, because swc cannot expand ident-to-ident references.

Source

Thrown at crates/swc_css_compat/src/compiler/custom_media.rs:242

        }
    }

    pub(crate) fn process_media_in_parens(&mut self, n: &MediaInParens) -> Option<MediaInParens> {
        if let Some(MediaFeatureBoolean {
            name: MediaFeatureName::ExtensionName(name),
            ..
        }) = n.as_feature().and_then(|feature| feature.as_boolean())
        {
            if let Some(custom_media) = self.medias.iter().find(|m| m.name.value == name.value) {
                let mut new_media_condition = MediaCondition {
                    span: DUMMY_SP,
                    conditions: Vec::new(),
                };

                let queries = match &custom_media.media {
                    CustomMediaQueryMediaType::Ident(_) => {
                        // TODO make me warning, we should keep code as is in such cases
                        unimplemented!(
                            "Boolean logic in @custom-media at-rules is not supported by swc"
                        );
                    }
                    CustomMediaQueryMediaType::MediaQueryList(media_query_list) => {
                        &media_query_list.queries
                    }
                };

                for query in queries {
                    if query.media_type.is_some() || query.modifier.is_some() {
                        // TODO throw a warning on multiple media types
                        self.modifier_and_media_type =
                            Some((query.modifier.clone(), query.media_type.clone()));
                    }

                    if let Some(condition) = &query.condition {
                        match &**condition {
                            MediaConditionType::All(media_condition) => {

View on GitHub (pinned to d7d7434666)

Solutions

  1. Rewrite `@custom-media --a --b;` so each rule inlines a real media query, e.g. `@custom-media --a (min-width: 1024px);`
  2. Preprocess the stylesheet with postcss-custom-media, which fully supports boolean logic, before handing CSS to swc
  3. Disable the `processCustomMedia` option and lower custom media in your own pipeline
  4. File an issue or extend the `Ident` arm in crates/swc_css_compat/src/compiler/custom_media.rs upstream

Example fix

/* before */
@custom-media --wide-screen --desktop;

/* after */
@custom-media --desktop (min-width: 1024px);
@custom-media --wide-screen (min-width: 1024px);
Defensive patterns

Strategy: validation

Validate before calling

// Scan CSS for ident-valued @custom-media definitions before enabling the pass
const bad = /@custom-media\s+--[\w-]+\s+(--[\w-]+)(?:\s+(?:and|or|not)\s+--[\w-]+)*\s*;/g;
if (bad.test(css)) throw new Error('boolean logic in @custom-media is unsupported by swc');

Prevention

When it happens

Trigger: Enable the custom media compat pass and feed it CSS like `@custom-media --a --b;` or `@custom-media --a not --b;` — the definition body is a custom-media ident, not a media query list such as `(min-width: 100px)`.

Common situations: Porting stylesheets that used postcss-custom-media (which supports boolean logic); CSS written against the custom-media spec draft; enabling processCustomMedia on a large pre-existing codebase without scanning for ident-valued definitions.

Related errors

AI-assisted analysis of swc-project/swc@d7d7434666 (2026-08-16). Data as JSON: /api/errors/4da420586fde51bb. Report an issue: GitHub.