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: f83a5c7

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

This PR includes changesets to release 9 packages

Name	Type
@vanilla-extract/css	Minor
@vanilla-extract/integration	Patch
@vanilla-extract/rollup-plugin	Patch
@vanilla-extract/esbuild-plugin	Patch
@vanilla-extract/jest-transform	Patch
@vanilla-extract/parcel-transformer	Patch
@vanilla-extract/vite-plugin	Patch
@vanilla-extract/webpack-plugin	Patch
@vanilla-extract/next-plugin	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