Pseudo-classes
Each Atomic Props of Fower supports CSS pseudo-classes. The format of the Atomic Props that enable Pseudo-classes style is: {prop}--{pseudo}
, for example: bgRed400--hover
, bgYellow500--active
, opacity-70--disabled
, w-20--visited
, etc.
#
HoverUse --hover
postfix to apply hover style.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
ActiveUse --active
postfix to apply active style.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
DisabledUse --disabled
postfix to apply disabled style.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
FocusUse --focus
postfix to apply focus style.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
ChildUse --first-child
postfix to apply first-child style.
Use --last-child
postfix to apply last-child style.
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
Supported pseudo classesBy default, Fower supports these pseudo classes:
- active
- checked
- disabled
- enabled
- default
- empty
- focus
- focus-within
- invalid
- hover
- link
- visited
- first-child
- last-child
- after
- before
- placeholder
- selection
If you want more pseudo classes, you can use setConfig
to add it:
import { setConfig } from '@fower/core'
setConfig({ pseudos: ['focus-visible', 'blank'], // will merge to built-in pseudos})
#
About file sizeEach Atomic Props in Fower supports CSS pseudo-classes and 18 commonly used pseudo-classes. You may have questions about whether this will cause the code size of the Fower package to explode. The answer is no.
In traditional CSS, if each CSS class supports Pseudo-classes, a large amount of CSS code is required, because CSS is not programmable, and it can only accumulate code through enumeration.
Thanks to the flexibility of JS, Fower only needs dozens of lines of code to make all Atomic Props support Pseudo-classes.