Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rinart73 opened this issue Jul 12, 2022 · 7 comments
Closed

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

rinart73 opened this issue Jul 12, 2022 · 7 comments
Milestone

Comments

@rinart73
Copy link

rinart73 commented Jul 12, 2022

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
Copy link
Owner

tbela99 commented Jul 12, 2022

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 tbela99 closed this as completed Jul 12, 2022
@tbela99
Copy link
Owner

tbela99 commented Jul 12, 2022

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

@rinart73
Copy link
Author

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

@rinart73
Copy link
Author

rinart73 commented Jul 12, 2022

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 tbela99 reopened this Jul 12, 2022
@tbela99 tbela99 added this to the V0.3.6 milestone Jul 12, 2022
@tbela99
Copy link
Owner

tbela99 commented Jul 13, 2022

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

@rinart73
Copy link
Author

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
Copy link
Owner

tbela99 commented Jul 13, 2022

you are right :)

tbela99 added a commit that referenced this issue Jul 14, 2022
 - #125 Removing last selector causes exception
 - #126 Subsequent-sibling Combinator 'swallows' characters that follow it
 - #127 Shortening 0(unit) to 0 breaks declarations in some cases
 - #128 raising the minimum php version to 8.0
@tbela99 tbela99 closed this as completed Jul 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants