Ensure correct ordering of styles #159
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some properties can be set using shorthand names. Therefore it is important to sort the rules overall, and not only when looking at the rules for a specific property name.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>Test css inliner</title>
<style type="text/css">
tr th {
background-color: blue;
}
th {
background: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>This should be blue</th>
</tr>
</table>
</body>
</html>
Will result in `<th style="background-color: blue; background: red;">This should be blue</th>` even though `background-color: blue;` has higher specificity than `background: red;`: when the properties have different names, they are inlined in the order they appear in the stylesheet.
This issue is fixed by sorting all rules by specificity instead of order of appearance.
Place styles that were inline in the source styles after the styles that are being inlined. This is because some properties may be set using different names. Example:
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>Test css inliner</title>
<style type="text/css">
th {
background: red;
}
</style>
</head>
<body>
<table>
<tr>
<th style="background-color: blue;">This should be blue</th>
</tr>
</table>
</body>
</html>
Will result in `<th style="background-color: blue; background: red;">This should be blue</th>` when the inlined styles are positioned after the styles that were already inline.
This issue is fixed by inlining styles before the styles that were already inline.
|
isn't this a duplicate of #155 ? |
|
Yes. How did I overlook that? 👎 It seems that #155 fixes the first issue, while the second issue where inline styles are not put last is not fixed by that PR. |
|
Improved this and made #160. |
|
Fixed in #160 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When a property can be set using different names, such as
paddingandpadding-left, the inlined styles were not always correctly ordered.Examples:
Will result in
<span style="background-color: blue; background: red;">This should be blue</span>even thoughbackground-color: blue;has higher specificity thanbackground: red;. This issue is fixed by sorting all rules by specificity instead of order of appearance: bdf1c2eWill result in
<span style="background-color: blue; background: red;">This should be blue</span>since the styles being inlined are positioned after the styles that were already inline. This issue is fixed by positioning the styles that were already inline last: 716da4a, e7d4528