Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for retrieving StyleRule objects by className #1371

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

joslarson
Copy link

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.

Copy link

changeset-bot bot commented Mar 25, 2024

🦋 Changeset detected

Latest commit: 67f14cf

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

@joslarson joslarson changed the title Add support for retrieving StyleRule objects by classname Add support for retrieving StyleRule objects by className Mar 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant