@vanilla-extract/esbuild-plugin - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

CHANGELOG.md

 # @vanilla-extract/esbuild-plugin
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [[`156b491`](https://github.com/seek-oss/vanilla-extract/commit/156b49182367bf233564eae7fd3ea9d3f50fd68a), [`ae9864c`](https://github.com/seek-oss/vanilla-extract/commit/ae9864c727c2edd0d415b77f738a3c959c98fca6), [`756d9b0`](https://github.com/seek-oss/vanilla-extract/commit/756d9b0d0305e8b8a63f0ca1ebe635ab320a5f5b)]:
+  - @vanilla-extract/css@0.3.0
+
 ## 0.1.1
@@ -4,0 +11,0 @@

package.json

 {
   "name": "@vanilla-extract/esbuild-plugin",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -21,3 +21,3 @@ "main": "dist/vanilla-extract-esbuild-plugin.cjs.js",
   "dependencies": {
-    "@vanilla-extract/css": "^0.2.0",
+    "@vanilla-extract/css": "^0.3.0",
     "chalk": "^4.1.0",
@@ -24,0 +24,0 @@ "dedent": "^0.7.0",

README.md

@@ -85,4 +85,4 @@ # 🧁 vanilla-extract
   - [style](#style)
+  - [styleVariants](#styleVariants)
   - [globalStyle](#globalstyle)
-  - [mapToStyles](#maptostyles)
   - [createTheme](#createtheme)
@@ -98,2 +98,3 @@ - [createGlobalTheme](#createglobaltheme)
   - [globalKeyframes](#globalkeyframes)
+  - [composeStyles](#composestyles)
 - [Dynamic API](#dynamic-api)
@@ -268,56 +269,55 @@ - [createInlineTheme](#createinlinetheme)
 
-### 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
+### globalStyle
 
-Creates an object that maps style names to hashed class names.
+Creates styles attached to a global selector.
 
-> 💡 This is useful for mapping to component props, e.g. `<div className={styles.padding[props.padding]}>`
-
 ```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'
+});
 ```
@@ -587,2 +587,24 @@
 
+### composeStyles
+
+Combines mutliple styles into a single class string, while also deduplicating and removing unnecessary spaces.
+
+```ts
+import { style, composeStyles } from '@vanilla-extract/css';
+
+const base = style({
+  padding: 12
+});
+
+export const blue = composeStyles(base, style({
+  background: 'blue'
+}));
+
+export const green = composeStyles(base, style({
+  background: 'green'
+}));
+```
+
+> 💡 Styles can also be provided in shallow and deeply nested arrays. Think of it as a static version of [classnames.](https://github.com/JedWatson/classnames)
+
 ## Dynamic API
@@ -589,0 +611,0 @@

No alert changes

Improved metrics

Total package byte prevSize

41235

increased by2.49%

Number of lines in readme file

719

increased by3.16%

Worsened metrics

Published versions last two months

4

decreased by-20%

Published versions last year

27

decreased by-3.57%

Dependency changes

• + Added@vanilla-extract/css@0.3.2(transitive)

• - Removed@vanilla-extract/css@0.2.0(transitive)

• Updated@vanilla-extract/css@^0.3.0