fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

chore(web-components): replace state partials with state function

Open radium-v opened this issue 4 months ago • 2 comments

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')}) {
    // ...
  }
};

radium-v avatar Oct 15 '24 00:10 radium-v