swc-project/swc · error · Error

Expected 'dpi', 'dpcm', 'dppx' or 'x' units

Error message

Expected 'dpi', 'dpcm', 'dppx' or 'x' units

What it means

Thrown by Parse<Resolution> in swc_css_parser when the token is a dimension but its unit is not a resolution unit. After bumping Token::Dimension it checks is_resolution_unit(&unit), which accepts only dpi, dpcm, dppx, and x (ASCII case-insensitive). Units like 'ppi', 'px', 'dpr', or 'dp' produce this error spanning the entire dimension token.

Source

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

        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_resolution_unit(&unit) {
                    return Err(Error::new(
                        span,
                        ErrorKind::Expected("'dpi', 'dpcm', 'dppx' or 'x' units"),
                    ));
                }

                let unit_len = raw_unit.len() as u32;

                Ok(Resolution {
                    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. Map to CSS units: ppi/dpr->dpi or dppx, dp is a length not a resolution (use dp-equivalent px instead if a length is meant).
2. Use exactly dpi, dpcm, dppx, or x.
3. Whitelist-validate resolution units before generating the media query.

Example fix

/* before */
@media (min-resolution: 96ppi) { ... }

/* after */
@media (min-resolution: 96dpi) { ... }

const RES_UNITS = new Set(["dpi", "dpcm", "dppx", "x"]);
function hasValidResolutionUnit(v: string): boolean {
  const i = [...v].findIndex(c => /[a-zA-Z]/.test(c));
  return i > 0 && RES_UNITS.has(v.slice(i).toLowerCase());
}

fn valid_resolution_unit(unit: &str) -> bool {
    matches!(unit.to_ascii_lowercase().as_str(), "dpi" | "dpcm" | "dppx" | "x")
}

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

When it happens

Trigger: Values like '(min-resolution: 96ppi)', '(resolution: 2dpr)', '(min-resolution: 10px)', or unit strings coming from a device-descriptor map that uses non-CSS names.

Common situations: Porting Android (dp) or print (ppi) terminology into media queries, and tooling that emits device-pixel-ratio units under a different name than CSS's 'x'/'dppx'.

Related errors

• Expected ident (exclude the keywords 'only', 'not', 'and', '
• Expected identifier value
• Expected '>' or '<' operators
• Expected left comparison operator should be equal right comp
• Expected number, ident, dimension or function token

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