This PR implements the ability to pass a map of selectors to a <Box /> with the selectors prop. This will allow consumers to define more advanced hover/state classes without relying on another css-in-js solution like we do in Evergreen (glamor). This work is based off a branch that @mshwery had started at the start of 2021 but was never finished/merged in.
I think this cover the basic use-case but I'd love to have some feedback on whether the design can be improved - or if there are edge cases that I might not be thinking of. This should not introduce a large performance hit from my benchmarking:
This PR implements the ability to pass a map of selectors to a
<Box />with theselectorsprop. This will allow consumers to define more advanced hover/state classes without relying on another css-in-js solution like we do in Evergreen (glamor). This work is based off a branch that @mshwery had started at the start of 2021 but was never finished/merged in.I think this cover the basic use-case but I'd love to have some feedback on whether the design can be improved - or if there are edge cases that I might not be thinking of. This should not introduce a large performance hit from my benchmarking:
Results from
3,225 ops/sec ±5.74% (52 runs sampled) 3,619 ops/sec ±4.38% (55 runs sampled) 3,595 ops/sec ±3.86% (56 runs sampled) 3,584 ops/sec ±4.03% (54 runs sampled) 3,637 ops/sec ±4.29% (52 runs sampled) 3,563 ops/sec ±4.46% (52 runs sampled) 3,557 ops/sec ±4.48% (55 runs sampled) 3,581 ops/sec ±3.98% (55 runs sampled) 3,536 ops/sec ±4.43% (54 runs sampled) 3,547 ops/sec ±4.32% (54 runs sampled) 3544.4 ops/sec avgmasterbranchResults from
3,487 ops/sec ±4.08% (53 runs sampled) 3,485 ops/sec ±4.24% (53 runs sampled) 3,457 ops/sec ±4.36% (53 runs sampled) 3,569 ops/sec ±3.82% (55 runs sampled) 3,529 ops/sec ±4.14% (55 runs sampled) 3,547 ops/sec ±4.32% (52 runs sampled) 3,612 ops/sec ±3.92% (54 runs sampled) 3,156 ops/sec ±6.26% (49 runs sampled) 3,675 ops/sec ±4.17% (54 runs sampled) 3,637 ops/sec ±4.23% (55 runs sampled) 3515.4 ops/sec avgpseudo-selectors-againbranchDemo of the new functionality in Storybook: