Custom CSS Extensions - tomhodgins/process-css-demo GitHub Wiki

These CSS extensions work by parsing a CSS stylesheet and processing each top-level rule. If it finds something it's looking for it will either transform the information from CSS into CSS output, or if it's a feature that requires JavaScript at runtime in order to support, it will automatically generate and output all of the runtime information required to support the features used.

Nesting

This package uses anesthetic to support nesting CSS rules inside custom properties, more info in the anesthetic README

Custom At-rules

@--reset ^CSS→CSS
@--variation ^CSS→CSS
@--element ^CSS→JS
@--min-width ^CSS→CSS
@--max-width ^CSS→CSS
@--document ^CSS→JS
@--property ^CSS→JS
@--important ^CSS→CSS
@--rewrite-selector ^CSS→CSS
@--custom-units ^CSS→CSS

Custom Pseudo-classes

:--self
:--first ^CSS→JS
:--last ^CSS→JS
:--has() ^CSS→JS
:--string-match() ^CSS→JS
:--regexp-match() ^CSS→JS
:--overflowed() ^CSS→JS
:--tag-name() ^CSS→JS
:--xpath() ^CSS→JS

Custom Combinators

/--previous/ ^CSS→JS
/--elder/ ^CSS→JS
/--parent/ ^CSS→JS
/--closest/ ^CSS→JS

Custom Properties

--clamped-font-size ^CSS→JS

Custom Functions

--base64-encode() ^CSS→CSS
--svg-encode() ^CSS→CSS
--mimic() ^CSS→JS

Custom Units

--ew, --eh, --emin, --emax Element-percentage units ^CSS→JS
--sw, --sh Scroll-percentage units ^CSS→JS

Custom Annotations

!--immutable property values ^CSS→JS

⚠️ GitHub.com Fallback ⚠️