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

Provide ability to bypass conversion of inline style attributes and !important qualifiers for AMP-first CSS #6295

Closed
westonruter opened this issue May 20, 2021 · 3 comments
Assignees
Labels
Changelogged Whether the issue/PR has been added to release notes. CSS Enhancement New feature or improvement of an existing one P2 Low priority Sanitizers
Milestone

Comments

@westonruter
Copy link
Member

Feature description

As reported in GoogleForCreators/web-stories-wp#6783, the style sanitizer's conversion of inline style attributes (and !important qualifiers) can result in ballooning the size of style[amp-custom]. I commented in GoogleForCreators/web-stories-wp#6783 (comment):

Since the AMP plugin primarily has been focused on converting vanilla HTML into valid AMP, it has to process anything that a theme/plugin may throw at it. Originally AMP didn't allow inline style attributes, so that is why initially we moved inline styles to style[amp-custom]. Nevertheless, there is another key reason to move the styles: themes/plugins may add inline styles which also contain !important qualifiers, and !important is not yet allowed by AMP. In order to preserve the CSS cascade, we convert inline styles to style rules with high-specificity CSS selectors using the :not(#_) hack. When !important is present, we multiply the factor of the number of :not(#_) selectors to ensure they are original cascade is preserved. You can see some more exploration of this in #1313.

This all being said, it seems useful to have a way to configure the style sanitizer to bypass the transformation of style attributes into style[amp-custom] while also bypassing the !important property transformations. With these conversions bypassed, the sanitizer would have to strip out the !important qualifiers in order to maintain AMP validity. This seems reasonable in the case of Web Stories since you have complete control over the page construction as being AMP-first.

Having this capability would be useful for any site that is intentionally writing CSS in an AMP-first way.


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

@westonruter
Copy link
Member Author

This is less important now due to a better solution for Web Stories: GoogleForCreators/web-stories-wp#6783 (comment).

@westonruter westonruter modified the milestones: v2.1.3, v2.2 May 27, 2021
@westonruter westonruter added the P2 Low priority label May 27, 2021
@westonruter westonruter removed this from the v2.2 milestone Jun 8, 2021
@westonruter
Copy link
Member Author

Maybe later.

@westonruter
Copy link
Member Author

Note that this did end up getting implemented, but it requires that you are not targeting for a valid AMP page. See #6589.

@westonruter westonruter added this to the v2.2 milestone Dec 8, 2021
@westonruter westonruter added the Changelogged Whether the issue/PR has been added to release notes. label Dec 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Changelogged Whether the issue/PR has been added to release notes. CSS Enhancement New feature or improvement of an existing one P2 Low priority Sanitizers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant