fluentui
fluentui copied to clipboard
chore(web-components): replace state partials with state function
Previous Behavior
States were defined as shared css.partial
tagged template literals, which can't be tree-shaken.
Example:
const someState = css.partial`:is([state--some-state], :state(some-state))`;
const styles = css`
:host(${someState}) {
// ...
}
};
New Behavior
States are handled via a state
function. This allows us to generate only either the [state--{state}]
attribute selector or the :state({state})
selector, depending on browser support. States are cached in a Map
object so once it's generated, the cached value is returned.
const styles = css`
:host(${state('some-state')}) {
// ...
}
};