The CSS Optimizer appears to be turning valid syntax like `var(--some-variable, )` into invalid syntax like `var(--some-variable,)` (by removing the space between the comma and the closing parenthesis). The latter is invalid because what comes after the comma is a "declaration-value," which must represent at least one token (and a single whitespace-token is fine).
On `var()`: https://www.w3.org/TR/css-variables-1/#using-variables
On declaration-values: https://www.w3.org/TR/css-syntax-3/#any-value
Tailwind CSS uses this syntax for a few of its utilities, which at the moment are simply broken in Drupal when CSS optimization is enabled (see https://github.com/tailwindlabs/tailwindcss/issues/2889 for some discussion of the problem).
Use syntax like `var(--some-variable, )` in your CSS, turn on Drupal's CSS optimization, and look in your browser's dev-tools to find `var(--some-variable,)` (no space) where you'd expect to find `var(--some-variable, )` (with space).
I suspect the regex here needs fixing: https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/lib/Drupal/C...
Comments
Comment #2
michaelallenwarner commentedComment #3
chalk commentedI've wasted a couple of hours with this issue too! The CSS aggregation breaks some styles from Tailwind CSS framework. Initially I thought that it's an AdvAgg module's issue but after some research I got that the root cause is Core's "Aggregate CSS files".
Comment #4
michaelallenwarner commentedYes, would be nice to have this fixed. I've tried patching that regex in CssOptimizer.php but without success.
Comment #5
longwaveChanging component, this is code in the asset library system - CSS component is for CSS rules provided by Drupal.
Comment #6
longwaveA good first step to solving this would be to write a failing test case, that someone can then use when tweaking the regex in order to get the test to pass.
Comment #8
michaelallenwarner commentedIdeally this would be solved "robustly," but something that might work for Tailwind specifically is preserving CSS comments that consist of only an exclamation mark, like
/*!*/. This is because Tailwind surrounds the vital whitespace with such comments, like:var(--tw-empty,/*!*/ /*!*/)(they do this precisely to get CSS minifiers to preserve the space, but in Drupal the comments are excised and it doesn't work).I don't know if preserving these comments would do the trick—that depends on whether the whitespace-clearing regex targets whitespace between forward slashes (I'm optimistic because it looks to me like it doesn't: https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/lib/Drupal/C...)—but I mention it because maybe it's easier to accomplish and perhaps less risky than altering the whitespace stuff (for someone who's good with PHP, anyway, which isn't me, alas).
Comment #9
michaelallenwarner commentedI think the regex that looks for comments is here: https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/lib/Drupal/C...
It looks like this:
$comment = '/\*[^*]*\*+(?:[^/*][^*]*\*+)*/';I've done some testing at https://www.phpliveregex.com, and I think I can successfully prevent
/*!*/from matching by adding a negative lookahead assertion to the regex, like this:$comment = '/\*(?!!\*/)[^*]*\*+(?:[^/*][^*]*\*+)*/';Could use some testing, but maybe that small change would resolve this.