Skip to content

[bug] minifies removes @media tags #464

Open

Description

@cocoliliace

Version 5.0.5. Code to reproduce

const { minify } from require("csso");
const style = `
body {
  color: red;
}
@media (width < 720px) {
  body {
    color: blue;
  }
}`;
console.log(minify(style));
// prints { css: 'body{color:red}', map: null }

Screenshot:
image

Activity

  1. monochromer commented on Apr 12, 2023

    @monochromer

    Does CSSO support range syntax?

  2. wolfcreative commented on Jul 7, 2023

    @wolfcreative

    Confirm. There is a problem, I have just encountered it.

  3. ppfeufer commented on Aug 24, 2023

    @ppfeufer

    Yep, just ran into this one as well. Would be nice if range syntax would be supported.

  4. stepanjakl commented on May 9, 2024

    @stepanjakl

    +1

  5. XingMXTeam commented on Dec 19, 2024

    @XingMXTeam

    +1

  6. Smart624 commented on Aug 28, 2026

    @Smart624

    Still reproducible in csso 5.0.5, and the blast radius has grown since this was filed: this silently deletes every responsive variant Tailwind CSS v4 emits (@media (width >= 40rem) and friends), so any pipeline that runs csso over Tailwind v4 output — e.g. @playform/compress's default CSS path on Astro sites — ships with the entire responsive layout removed. No error, no warning; the only symptom is a subtly broken site in production.

    A datapoint that isolates the bug to csso (not css-tree):

    const csstree = require('css-tree');
    csstree.parse('@media (width >= 64rem){.a{color:red}}'); // parses fine
    
    require('csso').minify('@media (width >= 64rem){.a{color:red}}').css
    // → ''  (empty string; also with { restructure: false } or { forceMediaMerge: true })

    And a separate-but-related ask: whatever the fix for range syntax, csso should arguably never silently drop a rule it cannot handle — surfacing a parse error would turn this class of bug from a silent production regression into a five-minute fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions