Module encre_css::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.

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.
OSZAR »