Add support for retrieving StyleRule objects by className

[joslarson]

For discussion: initial implementation of #1363

The underlying goal here is to provide an API to be able retrieve style rule objects from a list of classNames, in the order they were originally added in. With that we'd be able to build some interesting things

Consider the following idea:

// button.css.ts
import { style, cssCache } from "@vanilla-extract/css";

const base = style({ ... });
const small = style({ ... });
const medium = style({ ... });

// we can compose the above styles to build our button
const smallButton = style([base, small]);

// but what if we want a responsive button size in some cases? this PR would allow the following:
const responsiveButton = style([base, {
  '@media': {
    '(max-width: 767px)': cssCache.get(small),
    '(min-width: 768px)': cssCache.get(medium),
  }
}]);

This could also be accomplished like so, but has some drawbacks:

// button.css.ts
import { style } from "@vanilla-extract/css";

const rawStyles = {
  small: {...},
  medium: {...},
};

const base = style({ ... });
const small = style(rawStyles.small);
const medium = style(rawStyles.medium);

const smallButton = style([base, small]);
const mediumButton = style([base, medium]);

const responsiveButton = style([base, {
  '@media': {
    '(max-width: 767px)': rawStyles.small
    '(min-width: 768px)': rawStyles.medium,
  }
}]);

What if the button styles are coming from a library and you don't have access to the raw style objects weren't exported? You're out of luck :(

The ultimate goal of this PR for me is to add what needed underneath to support a recipes API closer to what stitches provides (while still being fully static), where you can define variants and can optionally enable different variants at different breakpoints like so:

const button = recipe({
  base: {...},
  variants: {
    size: {
      small: [smallText, {...}],
      medium: [mediumText, {...}]
    }
  }
});

const responsiveButton = responsiveRecipe(
  button,
  {
    size: {
      '@media (max-width: 767px)': 'small',
      '@media (min-width: 768px)': 'medium'
    }
  }
);

---

My first instinct was that the CSS cache should probably exist in the adapter, but on a first glance it wasn't obvious where the logic lives, so for now I've bolted it on to the appendCss function in packages/css/src/adapter.ts.

[changeset-bot]

🦋 Changeset detected

Latest commit: aa2e8f5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@vanilla-extract/css	Minor
@fixtures/features	Patch
@fixtures/layers	Patch
@fixtures/low-level	Patch
@fixtures/recipes	Patch
@fixtures/sprinkles	Patch
@fixtures/template-string-paths	Patch
@fixtures/themed	Patch
@fixtures/thirdparty	Patch
@fixtures/unused-modules	Patch
@fixtures/thirdparty-dep	Patch
@fixtures/thirdparty-dep-dep	Patch
vanilla-extract-example-webpack-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR