question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow `!important` qualifiers in `style[amp-noscript]`

See original GitHub issue

Description

This is a follow-up to #20609.

In order to ensure that amp-accordion sections are initially-expanded on a page in which the user has JS turned off, the following is needed:

<noscript>
	<style amp-noscript>
		amp-accordion > section:not([expanded]) > :last-child {
			display: block !important;
		}
	</style>
</noscript>

Example: https://bento-amp-noscript-styles.glitch.me/ See: https://github.com/ampproject/amphtml/issues/20609#issuecomment-901426550

The !important is needed here in order to override this !important style from ampshared.css:

https://github.com/ampproject/amphtml/blob/22ff7ae97577bd1d0376d66ab0ca741cbdba4e50/css/ampshared.css#L567-L570

However, this is not currently feasible since the use of !important qualifiers is not allowed in style[amp-noscript]:

Usage of the !important CSS qualifier is not allowed.

I propose that they be allowed in the same way they are allowed in style[amp-runtime].

Interestingly, allow_important: true doesn’t appear in style[amp-runtime]:

https://github.com/ampproject/amphtml/blob/22ff7ae97577bd1d0376d66ab0ca741cbdba4e50/validator/validator-css.protoascii#L1317-L1339

Just as it doesn’t appear in style[amp-noscript]:

https://github.com/ampproject/amphtml/blob/22ff7ae97577bd1d0376d66ab0ca741cbdba4e50/validator/validator-css.protoascii#L1341-L1448

Perhaps allow_important is only considered for rules that are enabled_by: "transformed"?

Alternatives Considered

None.

Additional Context

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Gregablecommented, Feb 22, 2022

I implemented this back in January, the issue was just never closed.

@jcastilloa you are probably running into issues around using !important in <style> tags outside of <noscript>, which is different and intended.

1reaction
honeybadgerdontcarecommented, Sep 14, 2021

@westonruter for <style amp-runtime ...> note that there is no cdata set in the TagSpec. Basically anything can be in the cdata for that. This is permitted as AMP Caches will rewrite the cdata with the corresponding AMP CSS with the AMP Runtime version that is being served by that AMP Cache. Also the AMP Runtime will rewrite the AMP CSS if necessary.

So allow_important would need to be set to the cdata for <style amp-noscript> TagSpec.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Qualifiers - UNC Writing Center
Qualifiers are often necessary, such as when your evidence or your claim is open to doubt. In such cases, using a qualifier allows...
Read more >
Qualifiers: Rules and Examples - Grammarly
A qualifier is a word that modifies another word in order to limit or enhance its meaning. Find out when to use qualifiers...
Read more >
Qualifiers in Grammar: Rules & Examples | What is Qualifier?
Choosing the appropriate qualifying language for the writer's purpose is essential. Qualifiers may consist of one word or small phrases.
Read more >
Qualifier Definition & Meaning | Dictionary.com
Qualifier definition, a person or thing that qualifies. ... a person or thing that provides necessary skills or properties, as in The qualifier...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found