Rename mapToStyles to styleVariants (#37)

Author: markdalgleish

.changeset/spicy-panthers-deny.md

@@ -0,0 +1,19 @@
+---
+'@vanilla-extract/babel-plugin': minor
+'@vanilla-extract/css': minor
+---
+
+Rename `mapToStyles` to `styleVariants`
+
+**BREAKING CHANGE**
+
+```diff
+-import { mapToStyles } from '@vanilla-extract/css';
++import { styleVariants } from '@vanilla-extract/css';
+
+-export const variant = mapToStyles({
++export const variant = styleVariants({
+  primary: { background: 'blue' },
+  secondary: { background: 'aqua' },
+});
+```

README.md

@@ -82,8 +82,8 @@ document.write(`
   - [Gatsby](#gatsby)
 - [API](#api)
   - [style](#style)
+  - [styleVariants](#styleVariants)
   - [globalStyle](#globalstyle)
-  - [mapToStyles](#maptostyles)
   - [createTheme](#createtheme)
   - [createGlobalTheme](#createglobaltheme)
   - [createThemeVars](#createthemevars)
@@ -263,60 +263,59 @@ export const childClass = style({
 >
 >If you want to globally target child nodes within the current element (e.g. `'& > a'`), you should use [`globalStyle`](#globalstyle) instead.
 
-### globalStyle
+### styleVariants
 
-Creates styles attached to a global selector.
+Creates a collection of named style variants.
 
 ```ts
-import { globalStyle } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 
-globalStyle('html, body', {
-  margin: 0
+export const variant = styleVariants({
+  primary: { background: 'blue' },
+  secondary: { background: 'aqua' },
 });
 ```
 
-Global selectors can also contain references to other scoped class names.
+> 💡 This is useful for mapping component props to styles, e.g. `<button className={styles.variant[props.variant]}>`
+
+You can also transform the values by providing a map function as the second argument.
 
 ```ts
-import { globalStyle } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 
-export const parentClass = style({});
+const spaceScale = {
+  small: 4,
+  medium: 8,
+  large: 16
+};
 
-globalStyle(`${parentClass} > a`, {
-  color: 'pink'
-});
+export const padding = styleVariants(spaceScale, (space) => ({
+  padding: space
+}));
 ```
 
-### mapToStyles
-
-Creates an object that maps style names to hashed class names.
+### globalStyle
 
-> 💡 This is useful for mapping to component props, e.g. `<div className={styles.padding[props.padding]}>`
+Creates styles attached to a global selector.
 
 ```ts
-import { mapToStyles } from '@vanilla-extract/css';
+import { globalStyle } from '@vanilla-extract/css';
 
-export const padding = mapToStyles({
-  small: { padding: 4 },
-  medium: { padding: 8 },
-  large: { padding: 16 }
+globalStyle('html, body', {
+  margin: 0
 });
 ```
 
-You can also transform the values by providing a map function as the second argument.
+Global selectors can also contain references to other scoped class names.
 
 ```ts
-import { mapToStyles } from '@vanilla-extract/css';
+import { globalStyle } from '@vanilla-extract/css';
 
-const spaceScale = {
-  small: 4,
-  medium: 8,
-  large: 16
-};
+export const parentClass = style({});
 
-export const padding = mapToStyles(spaceScale, (space) => ({
-  padding: space
-}));
+globalStyle(`${parentClass} > a`, {
+  color: 'pink'
+});
 ```
 
 ### createTheme

docs/treat-migration-guide.md

@@ -318,7 +318,7 @@ You would then update your styles to use this new CSS Variable instead.
 
 ## `styleMap`
 
-You can use [`mapToStyles`](https://github.com/seek-oss/vanilla-extract#maptostyles) as a drop-in replacement. Note that it now accepts a map function as the second argument, so there may be some opportunities to simplify your code if you were mapping over objects before passing them to `styleMap`.
+You can use [`styleVariants`](https://github.com/seek-oss/vanilla-extract#stylevariants) as a drop-in replacement. Note that it now accepts a map function as the second argument, so there may be some opportunities to simplify your code if you were mapping over objects before passing them to `styleMap`.
 
 ## `styleTree`
 

fixtures/themed/src/styles.css.ts

@@ -1,6 +1,6 @@
 import {
   style,
-  mapToStyles,
+  styleVariants,
   createVar,
   fallbackVar,
   fontFace,
@@ -77,7 +77,7 @@ export const button = [
 const undefinedVar1 = createVar();
 const undefinedVar2 = createVar();
 
-export const opacity = mapToStyles(
+export const opacity = styleVariants(
   {
     '1/2': fallbackVar(undefinedVar1, '0.5'),
     '1/4': fallbackVar(undefinedVar1, undefinedVar2, '0.25'),

packages/babel-plugin/src/index.test.ts

@@ -42,20 +42,20 @@ describe('babel plugin', () => {
     `);
   });
 
-  it('should handle mapToStyles assigned to const', () => {
+  it('should handle styleVariants assigned to const', () => {
     const source = `
-      import { mapToStyles } from '@vanilla-extract/css';
+      import { styleVariants } from '@vanilla-extract/css';
 
-      const colors = mapToStyles({
+      const colors = styleVariants({
         red: { color: 'red' }
       });
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
-      import { mapToStyles } from '@vanilla-extract/css';
-      const colors = mapToStyles({
+      import { styleVariants } from '@vanilla-extract/css';
+      const colors = styleVariants({
         red: {
           color: 'red'
         }
@@ -64,20 +64,20 @@ describe('babel plugin', () => {
     `);
   });
 
-  it('should handle mapToStyles with mapper assigned to const', () => {
+  it('should handle styleVariants with mapper assigned to const', () => {
     const source = `
-      import { mapToStyles } from '@vanilla-extract/css';
+      import { styleVariants } from '@vanilla-extract/css';
 
-      const colors = mapToStyles({
+      const colors = styleVariants({
         red: 'red'
       }, (color) => ({ color }));
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
-      import { mapToStyles } from '@vanilla-extract/css';
-      const colors = mapToStyles({
+      import { styleVariants } from '@vanilla-extract/css';
+      const colors = styleVariants({
         red: 'red'
       }, color => ({
         color
@@ -406,29 +406,29 @@ describe('babel plugin', () => {
 
   it('should ignore functions that already supply a debug name', () => {
     const source = `
-      import { style, mapToStyles } from '@vanilla-extract/css';
+      import { style, styleVariants } from '@vanilla-extract/css';
 
       const three = style({
           testStyle: {
             zIndex: 2,
           }
       }, 'myDebugValue');
 
-      const four = mapToStyles({
+      const four = styleVariants({
         red: { color: 'red' }
       }, 'myDebugValue');
     `;
 
     expect(transform(source)).toMatchInlineSnapshot(`
       "import { setFileScope, endFileScope } from '@vanilla-extract/css/fileScope';
       setFileScope(\\"src/dir/mockFilename.css.ts\\", \\"@vanilla-extract/babel-plugin\\");
-      import { style, mapToStyles } from '@vanilla-extract/css';
+      import { style, styleVariants } from '@vanilla-extract/css';
       const three = style({
         testStyle: {
           zIndex: 2
         }
       }, 'myDebugValue');
-      const four = mapToStyles({
+      const four = styleVariants({
         red: {
           color: 'red'
         }

packages/babel-plugin/src/index.ts

@@ -18,7 +18,7 @@ const debuggableFunctionConfig = {
   createTheme: {
     maxParams: 3,
   },
-  mapToStyles: {
+  styleVariants: {
     maxParams: 3,
   },
   fontFace: {

packages/css/src/style.ts

@@ -68,15 +68,15 @@ export function globalKeyframes(name: string, rule: CSSKeyframes) {
   appendCss({ type: 'keyframes', name, rule }, getFileScope());
 }
 
-export function mapToStyles<
+export function styleVariants<
   StyleMap extends Record<string | number, StyleRule>
 >(styleMap: StyleMap, debugId?: string): Record<keyof StyleMap, string>;
-export function mapToStyles<Data extends Record<string | number, unknown>>(
+export function styleVariants<Data extends Record<string | number, unknown>>(
   data: Data,
   mapData: <Key extends keyof Data>(value: Data[Key], key: Key) => StyleRule,
   debugId?: string,
 ): Record<keyof Data, string>;
-export function mapToStyles(...args: any[]) {
+export function styleVariants(...args: any[]) {
   if (typeof args[1] === 'function') {
     const data = args[0];
     const mapData = args[1];