Homemade Recipes

An extension of @vanilla-extract/recipes that adds responsive variants.

Homemade Recipes is built for projects that need responsive styling with recipes while keeping Vanilla Extract's type safety and zero-runtime approach.

Disclaimer :warning:

This repository is currently under active development. It may contain bugs and have unexpected behavior. Feedback and reporting bugs by opening an issue would be greatly appreciated! :pray:

Installation

1npm install homemade-recipes

Configuration

Setup

createHomemadeRecipe accepts key/value pairs where the keys become your responsive modifiers, and the values are the min-width where that breakpoint should start.

1// homemade-recipe.css.ts
2import { createHomemadeRecipe } from "homemade-recipes";
3
4export const homemadeRecipe = createHomemadeRecipe({
5  /** Phones (landscape) */
6  xs: "520px",
7  /** Tablets (portrait) */
8  sm: "768px",
9  /** Tablets (landscape) */
10  md: "1024px",
11  /** Laptops */
12  lg: "1280px",
13  /** Desktops */
14  xl: "1640px",
15});

homemadeRecipe extends recipe that accepts an optional responsiveVariants.

1// button-recipe.css.ts
2import { HomemadeRecipeVariants } from "homemade-recipes";
3import { homemadeRecipe } from "./homemade-recipe.css";
4
5export const buttonRecipe = homemadeRecipe({
6  base: {
7    borderRadius: 6,
8  },
9
10  variants: {
11    fullWidth: {
12      true: {
13        width: "100%",
14      },
15      false: {
16        width: "unset",
17      },
18    },
19    variant: {
20      bright: "bright",
21    },
22  },
23
24  responsiveVariants: ["sm"],
25});
26
27export type ButtonVariants = NonNullable<
28  HomemadeRecipeVariants<typeof buttonRecipe>
29>;

responsiveVariants: ["sm"] will generate an additional set of classes at build time.

1.button-recipe__4lwr860 {
2  border-radius: 6px;
3}
4.button-recipe_fullWidth_true__4lwr861 {
5  width: 100%;
6}
7.button-recipe_fullWidth_false__4lwr862 {
8  width: unset;
9}
10+ @media screen and (min-width: 768px) {
11+   .button-recipe_fullWidth_sm_true__4lwr863 {
12+     width: 100%;
13+   }
14+   .button-recipe_fullWidth_sm_false__4lwr864 {
15+     width: unset;
16+   }
17+ }

appendCss will generate.

1<style
2  data-package="homemade-recipes"
3  data-identifier="homemade-recipe__1qtsqlc0"
4  type="text/css"
5>
6  @media screen and (min-width: 768px) {
7    .bright_sm {
8      color: orange;
9      font-family: Arial;
10    }
11  }
12</style>

By passing in an existing class (i.e. bright), bright_sm can now be created.

With this homemade recipe, you can now use it for your button component.

1// button.tsx
2import { ButtonVariants, buttonRecipe } from "./button-recipe.css";
3
4type ButtonProps = ButtonVariants;
5
6export const Button = ({ fullWidth, variant }: ButtonProps) => {
7  return (
8    <button className={buttonRecipe({ fullWidth, variant })}>
9      Hello world
10    </button>
11  );
12};

Usage

1// App.tsx
2import "./App.css";
3import { Button } from "./button";
4
5function App() {
6  return (
7    <Button
8      // fullWidth?: boolean | { initial?: boolean; sm?: boolean; }
9      fullWidth={{ initial: true, sm: false }}
10      // variant?: "bright" | { initial?: "bright"; sm?: "bright"; }
11      variant={{ sm: "bright" }}
12    />
13  );
14}
15
16export default App;

The following CSS classes will be applied to your Button component.

button-recipe__1d33wle0 button-recipe_fullWidth_true__1d33wle1 button-recipe_fullWidth_sm_false__1d33wle5 bright_sm

1.button-recipe__4lwr860 {
2  border-radius: 6px;
3}
4
5.button-recipe_fullWidth_true__4lwr861 {
6  width: 100%;
7}
8
9@media screen and (min-width: 768px) {
10  .button-recipe_fullWidth_sm_false__4lwr864 {
11    width: unset;
12  }
13}
14
15@media screen and (min-width: 768px) {
16  .bright_sm {
17    color: orange;
18    font-family: Arial;
19  }
20}

Check out the example.

More examples

• Stand-alone UI package.
• Nextjs (app router) consuming UI package.

Contributing

Contributions are welcome! Here's how you can help:

• Report bugs by opening an issue
• Suggest new features or improvements
• Submit pull requests

Thanks

• Vanilla Extract - For creating an awesome library
• Tailwind Variants - For the inspiration behind responsiveVariants functionality (discontinued)
• Rainbow Sprinkles & Dessert Box - For inspiration on extending Vanilla Extract

License

Distributed under the MIT License. See LICENSE for more information.