DioxusLabs/dioxus · error · anyhow::Error

Invalid css for file `{}` Error: {}

Error message

Invalid css for file `{}`
Error:
{}

What it means

CSS modules are transformed by lightningcss via transform_css, which rewrites/hashes class names and must parse the stylesheet. Invalid CSS that lightningcss cannot parse surfaces as this error, embedding the file path and the parser's message, and the build stops before minification.

Source

Thrown at packages/cli/src/opt/css.rs:76

            anyhow!(
                "Failed to read name of css module file `{}`.",
                source.display()
            )
        })?
        .strip_suffix(".css")
        .ok_or_else(|| {
            anyhow!(
                "Css module file `{}` should end with a `.css` suffix.",
                source.display(),
            )
        })?
        .to_string();

    src_name.push('-');

    let hash = create_module_hash(source);
    let css = transform_css(css.as_str(), hash.as_str()).map_err(|error| {
        anyhow!(
            "Invalid css for file `{}`\nError:\n{}",
            source.display(),
            error
        )
    })?;

    // Minify CSS
    let css = if css_options.minified() {
        // Try to minify the css. If we fail, log the error and use the unminified css
        match minify_css(&css) {
            Ok(minified) => minified,
            Err(err) => {
                tracing::error!(
                    "Failed to minify css module; Falling back to unminified css. Error: {}",
                    err
                );
                css
            }

View on GitHub (pinned to 393d190a80)

Solutions

1. Fix the CSS at the exact position given in the bundled error message
2. Reproduce locally: npx lightningcss --minify file.module.css (or any CSS validator) to iterate faster
3. Bisect recent edits to the module file if the error position is unclear

# Lint module CSS with the same engine before building
npx lightningcss --minify assets/foo.module.css > /dev/null || echo 'invalid CSS'

When it happens

Trigger: A syntax error in a *.module.css file — unclosed brace, invalid selector, bad at-rule — hit during dx build/serve asset optimization.

Common situations: Hand-editing module CSS with nested syntax or features the pinned lightningcss does not accept; generated CSS with truncation from a partial file write.

Related errors

• Failed to read name of css module file `{}`.
• Css module file `{}` should end with a `.css` suffix.
• Syntax Error in line {line} column {column}: {err}
• Package type '{invalid:?}' is not supported for bundle forma
• 1 issue found.

AI-assisted analysis of DioxusLabs/dioxus@393d190a80 (2026-08-16). Data as JSON: /api/errors/36f93d199dce33f1. Report an issue: GitHub.