tbela99 / css

A CSS parser and minifier and sourcemap generator written in PHP
Other
14 stars 1 forks source link

Shortening 0(unit) to 0 breaks declarations in some cases #127

Closed rinart73 closed 1 year ago

rinart73 commented 1 year ago

Input CSS:

textarea {
  border: 0px;
  padding: 10px 0px 12px 35px;
  transition: all 0s ease-in-out;
}

Code:

$input = file_get_contents('test.css');
$parser = new Parser();
$parser->setContent($input);
$stylesheet = $parser->parse();
echo $stylesheet;

Output CSS:

textarea {
 border: 0;
 padding: 10px 0 12px 35px;
 transition: all 0 ease-in-out
}

border and padding are valid, while transition is not. It doesn't work in browsers and doesn't pass W3 Validator. From what I can see transition properties like transition-duration and transition-delay always require unit to be present, even if the value is 0. Not sure if there are other properties like this.

tbela99 commented 1 year ago

this is perfectly valid, according to https://developer.mozilla.org/en-US/docs/Web/CSS/length#syntax

Specifying the length unit is optional if the number is 0

tbela99 commented 1 year ago

"After a zero length, the unit identifier is optional." https://www.w3.org/TR/CSS22/syndata.html#length-units

rinart73 commented 1 year ago

Please check in real browsers. This is Chrome: image Firefox: image

rinart73 commented 1 year ago

Here is Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay https://developer.mozilla.org/en-US/docs/Web/CSS/time

The <time> data type consists of a <number> followed by one of the units listed below.
Units
s - Represents a time in seconds. Examples: 0s, 1.5s, -60s.
ms - Represents a time in milliseconds. Examples: 0ms, 150.25ms, -60000ms.
Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0s or 0ms.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types

Quantities such as length, angle can have unit omitted after 0. While time, frequency and resolution should always have unit. CSS specs are weird.

tbela99 commented 1 year ago

this seems like a bug to me. works perfectly fine in firefox but not in chrome based browsers

rinart73 commented 1 year ago

It's not a Chrome bug. I tested it in Firefox too on windows. The Mozilla specification states that certain value types can't omit unit from 0. I provided links above

tbela99 commented 1 year ago

you are right :)