The CSS:

#something .class-with-a-long-name
#another-id .another-class {
   color: blue;
}

Breaks when CSS compression is enabled, however

#something .class-with-a-long-name #another-id .another-class {
   color: blue;
}

works just fine.

FYI I am using TextMate to edit the CSS file. I believe this is a problem with the drupal_build_css_cache function.

My guess is that the preg_replace function that strips out line breaks forgets that this might result in jamming the code together in a way that changes its meaning.

What's happening (I think) is that the following:

#something .class-with-a-long-name
#another-id .another-class {
   color: blue;
}

is being incorrectly changed into

#something <strong>.class-with-a-long-name#another-id</strong> .another-class {
   color: blue;
}

when it gets compressed, instead of 

#something <b>.class-with-a-long-name #another-id</b> .another-class {
   color: blue;
}

Here's the function:

$data = preg_replace('<
\s*([@{}:;,]|\)\s|\s\()\s* | # Remove whitespace around separators, but keep space around parentheses.
/\*([^*\\\\]|\*(?!/))+\*/ | # Remove comments that are not CSS hacks.
[\n\r] # Remove line breaks.
>x', '\1', $data);

Comments

Mac Clemmens’s picture

Mac Clemmens commented

Oops -- I forgot that the HTML tags don't work in code blocks. Let me clarify my examples above:

#something .class-with-a-long-name#another-id .another-class {
   color: blue;
}

when it gets compressed, instead of

#something .class-with-a-long-name #another-id .another-class {
   color: blue;
}
gavranha’s picture

gavranha commented

subscribe

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (works as designed)

You're forgetting the , (comma) after each selector in your CSS. There is nothing wrong with Drupal core.

Should be (notice the comma at the end of the first line):

#something .class-with-a-long-name,
#another-id .another-class {
color: blue;
}

When compressed:

#something .class-with-a-long-name, #another-id .another-class {
color: blue;
}