swc-project/swc · error · Error

Expected 'fr' unit

Error message

Expected 'fr' unit

What it means

Thrown by Parse<Flex> in swc_css_parser when the token is a dimension but its unit is not the flex unit. After bumping Token::Dimension it checks is_flex_unit(&unit), which accepts only fr (ASCII case-insensitive). A track like '2fx', '1fraction', or '1f' fails with this error, the span covering the whole '1fx' token.

Source

Thrown at crates/swc_css_parser/src/parser/values_and_units/mod.rs:2275

        if !is!(self, Dimension) {
            return Err(Error::new(span, ErrorKind::Expected("dimension token")));
        }

        match bump!(self) {
            Token::Dimension {
                dimension: dimension_token,
            } => {
                let DimensionToken {
                    value,
                    unit,
                    raw_value,
                    raw_unit,
                    ..
                } = *dimension_token;

                if !is_flex_unit(&unit) {
                    return Err(Error::new(span, ErrorKind::Expected("'fr' unit")));
                }

                let unit_len = raw_unit.len() as u32;

                Ok(Flex {
                    span,
                    value: Number {
                        span: Span::new(span.lo, span.hi - BytePos(unit_len)),
                        value,
                        raw: Some(raw_value),
                    },
                    unit: Ident {
                        span: Span::new(span.hi - BytePos(unit_len), span.hi),
                        value: unit,
                        raw: Some(raw_unit),
                    },
                })
            }

View on GitHub (pinned to 5176682b65)

Solutions

1. Use exactly fr: '1fx' -> '1fr'.
2. Fix the suffix constant in the code that generates tracks (fraction->fr).
3. Whitelist the track grammar before parsing if tracks come from external input.

Example fix

/* before */
a { grid-template-columns: 1fx 2fx; }

/* after */
a { grid-template-columns: 1fr 2fr; }

function isValidFlexUnit(v: string): boolean {
  return /^[+-]?(\d+\.?\d*|\.\d+)fr$/i.test(v.trim());
}

fn valid_flex_unit(unit: &str) -> bool {
    unit.eq_ignore_ascii_case("fr")
}

use swc_css_parser::error::ErrorKind;
if let Err(e) = parse_input::<Stylesheet>(src, opts) {
    if matches!(e.kind(), ErrorKind::Expected("'fr' unit")) {
        return Err(format!("bad flex unit at {:?}", e.span()).into());
    }
    return Err(e.into());
}

When it happens

Trigger: Grid track values such as 'grid-template-columns: repeat(3, 1fx)', '2fraction', or a suffix constant typo'd as 'rf'. Any dimension in a typed flex position whose unit is not exactly fr triggers it.

Common situations: Typos in the fr suffix, DSL/config code that spells the unit in full ('fraction'), and copy-paste from tutorials using pseudo-syntax.

Related errors

• Expected 'deg', 'grad', 'rad' or 'turn' units
• Expected 's' or 'ms' units
• Expected 'Hz' or 'kHz' units
• Expected 'dpi', 'dpcm', 'dppx' or 'x' units
• Expected function or '('

AI-assisted analysis of swc-project/swc@5176682b65 (2026-08-17). Data as JSON: /api/errors/08ea31251f14ae84. Report an issue: GitHub.