encre_css

Module selector

Source
Expand description

Define the structures used to parse scanned classes.

§Discover what is possible to do with classes by learning some vocabulary

hover:xl:bg-red-500

  1. The variants (used to add pseudo-selectors, pseudo-elements, pseudo classes, media queries), in this case the class will be applied only on a screen larger than 1280px (see BUILTIN_SCREENS) and if hovered;
  2. The namespace (basically the name of the plugin), in this case bg for changing the background;
  3. The modifier (used to clarify the CSS needed to be generated), in this case the background color will become rgb(239 68 68) (see BUILTIN_COLORS).

[&>*]:[@supports_(display:flex)]:flex-[2_2_10%]

  1. The arbitrary variant (used to modify the class generated), in this case the class will be .\[\&\>\*]\:flex-\[2_2_10\%\]>*.

  2. Another arbitrary variant (with another syntax used to add at rules), in this case the rule will become @supports (display:flex) { <rule content> } (spaces need to be replaced with underscores in arbitrary variants).

  3. The arbitrary value (used to specify a value not included in your design system), in this case the background color will become 2 2 10% (spaces need to be replaced with underscores in arbitrary values).

[mask-type:luminance]

  1. The arbitrary CSS property (used to use a CSS property not supported by encre-css), in this case the rule content will be .\[mask-type\:luminance\] { mask-type: luminance; }.

dark:(text-white,bg-gray-500)

  1. The variant group (used to group together several classes conditionally enabled by the same variant), in this case the class will be expanded to dark:text-white and dark:bg-gray-500.

(hover,focus-visible):bg-blue-400

  1. The variant group without any namespace or modifier (used to group together several classes conditionally enabled by the same variant but sharing the same modifier), in this case the class will be expanded to hover:bg-blue-400 and focus-visible:bg-blue-400.

As you can see, by default variants are separated by :, modifiers by - (the dash after the first modifier can be omitted, e.g. m1 instead of m-1), arbitrary values/variants are surrounded by [] and variant groups are surrounded by ().

Enums§

Modifier
The modifier is the rest of the selector after the namespace, it is used to clarify the CSS needed to be generated.
VariantType
Structure used to add pseudo-selectors, pseudo-elements, pseudo classes and media queries to CSS rules.