Allow !important qualifiers in style[amp-noscript]

[westonruter]

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: #20609 (comment)

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

amphtml/css/ampshared.css

Lines 567 to 570 in 22ff7ae

	/* Collapse content by default. */
	amp-accordion:not(.i-amphtml-built) > section > :last-child {
	display: none !important;
	}

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]:

amphtml/validator/validator-css.protoascii

Lines 1317 to 1339 in 22ff7ae

	tags: { # '<style amp-runtime>`, transformed AMP
	html_format: AMP
	enabled_by: "transformed"
	tag_name: "STYLE"
	spec_name: "style[amp-runtime] (transformed)"
	descriptive_name: "style[amp-runtime]"
	mandatory: true
	unique: true
	mandatory_parent: "HEAD"
	attr_lists: "nonce-attr"
	attrs: {
	name: "amp-runtime"
	mandatory: true
	value: ""
	dispatch_key: NAME_VALUE_PARENT_DISPATCH
	}
	attrs: {
	name: "i-amphtml-version"
	mandatory: true
	value_regex: "^\\d{15}|latest$"
	}
	spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets"
	}

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

amphtml/validator/validator-css.protoascii

Lines 1341 to 1448 in 22ff7ae

	tags: { # <style amp-noscript>, [AMP]
	html_format: AMP
	tag_name: "STYLE"
	spec_name: "style amp-noscript"
	descriptive_name: "style amp-noscript"
	unique: true
	mandatory_parent: "NOSCRIPT"
	mandatory_ancestor: "HEAD"
	attr_lists: "nonce-attr"
	attrs: {
	name: "amp-noscript"
	mandatory: true
	value: ""
	dispatch_key: NAME_DISPATCH
	}
	attrs: { # Allow the default.
	name: "type"
	value_casei: "text/css"
	}
	cdata: {
	doc_css_bytes: true
	max_bytes: 10000
	max_bytes_spec_url:
	"https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#maximum-size"
	css_spec: {
	at_rule_spec: {
	name: 'media'
	media_query_spec: {
	issues_as_error: false
	type: 'all'
	type: 'print'
	type: 'screen'
	type: 'speech'
	type: 'tty'
	type: 'tv'
	type: 'projection'
	type: 'handheld'
	type: 'braille'
	type: 'embossesd'
	type: 'aural'
	feature: 'any-hover'
	feature: 'any-pointer'
	feature: 'aspect-ratio'
	feature: 'color'
	feature: 'color-gamut'
	feature: 'color-index'
	feature: 'device-aspect-ratio'
	feature: 'device-height'
	feature: 'device-width'
	feature: 'display-mode'
	feature: 'forced-colors'
	feature: 'grid'
	feature: 'height'
	feature: 'hover'
	feature: 'inverted-colors'
	feature: 'light-level'
	feature: 'max-aspect-ratio'
	feature: 'max-color-index'
	feature: 'max-device-aspect-ratio'
	feature: 'max-device-height'
	feature: 'max-device-width'
	feature: 'max-height'
	feature: 'max-resolution'
	feature: 'max-width'
	feature: 'min-aspect-ratio'
	feature: 'min-color-index'
	feature: 'min-device-aspect-ratio'
	feature: 'min-device-height'
	feature: 'min-device-width'
	feature: 'min-height'
	feature: 'min-resolution'
	feature: 'min-width'
	feature: 'monochrome'
	feature: 'orientation'
	feature: 'overflow-block'
	feature: 'overflow-inline'
	feature: 'pointer'
	feature: 'prefers-color-scheme'
	feature: 'prefers-contrast'
	feature: 'prefers-reduced-motion'
	feature: 'prefers-reduced-transparency'
	feature: 'resolution'
	feature: 'scan'
	feature: 'scripting'
	feature: 'transform-3d'
	feature: 'update'
	feature: 'width'
	}
	}
	at_rule_spec: { name: 'page' }
	at_rule_spec: { name: 'supports' }
	# https://github.com/ampproject/amphtml/issues/26406
	at_rule_spec: { name: '-moz-document' }
	}
	disallowed_cdata_regex: {
	regex: "<!--"
	error_message: "html comments"
	}
	# These regex denylists are temporary hacks to validate essential CSS
	# rules. They will be replaced later with more principled solutions.
	disallowed_cdata_regex: {
	regex: "(^|\\W)i-amphtml-"
	error_message: "CSS i-amphtml- name prefix"
	}
	}
	spec_url: "https://github.com/ampproject/amphtml/issues/20609"
	}

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

Alternatives Considered

None.

Additional Context

No response

[honeybadgerdontcare]

@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.

[Gregable]

@westonruter I have no issues with adding allow_important to noscript. I think this is a simple change. Are there any blockers?

Do you want to create the PR or shall I?

[westonruter]

@Gregable Great! Would you please?

[jcastilloa]

I agree, amp-toolbox-php (https://github.com/ampproject/amp-toolbox-php) fails in ssr transformation due to !important restrictions. All pages stop validating.

Any news about this?.

Thanks.

[Gregable]

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.

[schlessera]

@Gregable I opened a new issue regarding the above, for discussion: #37761