@vanilla-extract/css - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

 # @vanilla-extract/css
 
+## 0.3.0
+
+### Minor Changes
+
+- [#38](https://github.com/seek-oss/vanilla-extract/pull/38) [`156b491`](https://github.com/seek-oss/vanilla-extract/commit/156b49182367bf233564eae7fd3ea9d3f50fd68a) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `composeStyles` function
+
+* [#37](https://github.com/seek-oss/vanilla-extract/pull/37) [`ae9864c`](https://github.com/seek-oss/vanilla-extract/commit/ae9864c727c2edd0d415b77f738a3c959c98fca6) Thanks [@markdalgleish](https://github.com/markdalgleish)! - 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' },
+  });
+  ```
+
+### Patch Changes
+
+- [#34](https://github.com/seek-oss/vanilla-extract/pull/34) [`756d9b0`](https://github.com/seek-oss/vanilla-extract/commit/756d9b0d0305e8b8a63f0ca1ebe635ab320a5f5b) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Reduce CSS var and identifier lengths
+
 ## 0.2.0
@@ -4,0 +29,0 @@

dist/declarations/src/index.d.ts

@@ -7,1 +7,2 @@ import './runtimeAdapter';
 export * from './vars';
+export { composeStyles } from './composeStyles';

dist/declarations/src/style.d.ts

@@ -8,3 +8,3 @@ import type { FontFaceRule, CSSKeyframes, StyleRule, GlobalStyleRule } from './types';
 export declare function globalKeyframes(name: string, rule: CSSKeyframes): void;
-export declare function mapToStyles<StyleMap extends Record<string | number, StyleRule>>(styleMap: StyleMap, debugId?: string): Record<keyof StyleMap, string>;
-export declare function mapToStyles<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 declare function styleVariants<StyleMap extends Record<string | number, StyleRule>>(styleMap: StyleMap, debugId?: string): Record<keyof StyleMap, string>;
+export declare 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>;

dist/vanilla-extract-css.browser.cjs.js

@@ -102,3 +102,4 @@ 'use strict';
 function generateIdentifier(debugId) {
-  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
   const {
@@ -114,3 +115,4 @@ filePath,
 function createVar(debugId) {
-  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
   const {
@@ -249,3 +251,3 @@ filePath,
 }
-function mapToStyles(...args) {
+function styleVariants(...args) {
   if (typeof args[1] === 'function') {
@@ -275,3 +277,28 @@ const data = args[0];
 
+function composeStylesIntoSet(set, ...classNames) {
+  for (const className of classNames) {
+    if (className.length === 0) {
+      continue;
+    }
+
+    if (typeof className === 'string') {
+      if (className.includes(' ')) {
+        composeStylesIntoSet(set, ...className.trim().split(' '));
+      } else {
+        set.add(className);
+      }
+    } else if (Array.isArray(className)) {
+      composeStylesIntoSet(set, ...className);
+    }
+  }
+}
+
+function composeStyles(...classNames) {
+  const set = new Set();
+  composeStylesIntoSet(set, ...classNames);
+  return Array.from(set).join(' ');
+}
+
 exports.assignVars = assignVars;
+exports.composeStyles = composeStyles;
 exports.createGlobalTheme = createGlobalTheme;
@@ -288,3 +315,3 @@ exports.createTheme = createTheme;
 exports.keyframes = keyframes;
-exports.mapToStyles = mapToStyles;
 exports.style = style;
+exports.styleVariants = styleVariants;

dist/vanilla-extract-css.browser.esm.js

@@ -92,3 +92,4 @@ import { transformCss } from '../transformCss/dist/vanilla-extract-css-transformCss.browser.esm.js';
 function generateIdentifier(debugId) {
-  const refCount = getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = getAndIncrementRefCounter().toString(36);
   const {
@@ -104,3 +105,4 @@ filePath,
 function createVar(debugId) {
-  const refCount = getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = getAndIncrementRefCounter().toString(36);
   const {
@@ -239,3 +241,3 @@ filePath,
 }
-function mapToStyles(...args) {
+function styleVariants(...args) {
   if (typeof args[1] === 'function') {
@@ -265,2 +267,26 @@ const data = args[0];
 
-export { assignVars, createGlobalTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, mapToStyles, style };
+function composeStylesIntoSet(set, ...classNames) {
+  for (const className of classNames) {
+    if (className.length === 0) {
+      continue;
+    }
+
+    if (typeof className === 'string') {
+      if (className.includes(' ')) {
+        composeStylesIntoSet(set, ...className.trim().split(' '));
+      } else {
+        set.add(className);
+      }
+    } else if (Array.isArray(className)) {
+      composeStylesIntoSet(set, ...className);
+    }
+  }
+}
+
+function composeStyles(...classNames) {
+  const set = new Set();
+  composeStylesIntoSet(set, ...classNames);
+  return Array.from(set).join(' ');
+}
+
+export { assignVars, composeStyles, createGlobalTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };

dist/vanilla-extract-css.cjs.dev.js

@@ -102,3 +102,4 @@ 'use strict';
 function generateIdentifier(debugId) {
-  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
   const {
@@ -114,3 +115,4 @@ filePath,
 function createVar(debugId) {
-  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
   const {
@@ -249,3 +251,3 @@ filePath,
 }
-function mapToStyles(...args) {
+function styleVariants(...args) {
   if (typeof args[1] === 'function') {
@@ -275,3 +277,28 @@ const data = args[0];
 
+function composeStylesIntoSet(set, ...classNames) {
+  for (const className of classNames) {
+    if (className.length === 0) {
+      continue;
+    }
+
+    if (typeof className === 'string') {
+      if (className.includes(' ')) {
+        composeStylesIntoSet(set, ...className.trim().split(' '));
+      } else {
+        set.add(className);
+      }
+    } else if (Array.isArray(className)) {
+      composeStylesIntoSet(set, ...className);
+    }
+  }
+}
+
+function composeStyles(...classNames) {
+  const set = new Set();
+  composeStylesIntoSet(set, ...classNames);
+  return Array.from(set).join(' ');
+}
+
 exports.assignVars = assignVars;
+exports.composeStyles = composeStyles;
 exports.createGlobalTheme = createGlobalTheme;
@@ -288,3 +315,3 @@ exports.createTheme = createTheme;
 exports.keyframes = keyframes;
-exports.mapToStyles = mapToStyles;
 exports.style = style;
+exports.styleVariants = styleVariants;

dist/vanilla-extract-css.cjs.prod.js

@@ -89,3 +89,4 @@ 'use strict';
 function generateIdentifier(debugId) {
-  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
   const {
@@ -101,3 +102,4 @@ filePath,
 function createVar(debugId) {
-  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = fileScope_dist_vanillaExtractCssFileScope.getAndIncrementRefCounter().toString(36);
   const {
@@ -236,3 +238,3 @@ filePath,
 }
-function mapToStyles(...args) {
+function styleVariants(...args) {
   if (typeof args[1] === 'function') {
@@ -262,3 +264,28 @@ const data = args[0];
 
+function composeStylesIntoSet(set, ...classNames) {
+  for (const className of classNames) {
+    if (className.length === 0) {
+      continue;
+    }
+
+    if (typeof className === 'string') {
+      if (className.includes(' ')) {
+        composeStylesIntoSet(set, ...className.trim().split(' '));
+      } else {
+        set.add(className);
+      }
+    } else if (Array.isArray(className)) {
+      composeStylesIntoSet(set, ...className);
+    }
+  }
+}
+
+function composeStyles(...classNames) {
+  const set = new Set();
+  composeStylesIntoSet(set, ...classNames);
+  return Array.from(set).join(' ');
+}
+
 exports.assignVars = assignVars;
+exports.composeStyles = composeStyles;
 exports.createGlobalTheme = createGlobalTheme;
@@ -275,3 +302,3 @@ exports.createTheme = createTheme;
 exports.keyframes = keyframes;
-exports.mapToStyles = mapToStyles;
 exports.style = style;
+exports.styleVariants = styleVariants;

dist/vanilla-extract-css.esm.js

@@ -92,3 +92,4 @@ import { transformCss } from '../transformCss/dist/vanilla-extract-css-transformCss.esm.js';
 function generateIdentifier(debugId) {
-  const refCount = getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = getAndIncrementRefCounter().toString(36);
   const {
@@ -104,3 +105,4 @@ filePath,
 function createVar(debugId) {
-  const refCount = getAndIncrementRefCounter();
+  // Convert ref count to base 36 for optimal hash lengths
+  const refCount = getAndIncrementRefCounter().toString(36);
   const {
@@ -239,3 +241,3 @@ filePath,
 }
-function mapToStyles(...args) {
+function styleVariants(...args) {
   if (typeof args[1] === 'function') {
@@ -265,2 +267,26 @@ const data = args[0];
 
-export { assignVars, createGlobalTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, mapToStyles, style };
+function composeStylesIntoSet(set, ...classNames) {
+  for (const className of classNames) {
+    if (className.length === 0) {
+      continue;
+    }
+
+    if (typeof className === 'string') {
+      if (className.includes(' ')) {
+        composeStylesIntoSet(set, ...className.trim().split(' '));
+      } else {
+        set.add(className);
+      }
+    } else if (Array.isArray(className)) {
+      composeStylesIntoSet(set, ...className);
+    }
+  }
+}
+
+function composeStyles(...classNames) {
+  const set = new Set();
+  composeStylesIntoSet(set, ...classNames);
+  return Array.from(set).join(' ');
+}
+
+export { assignVars, composeStyles, createGlobalTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };

package.json

 {
   "name": "@vanilla-extract/css",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -5,0 +5,0 @@ "sideEffects": true,

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 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144102

increased by4.21%

Number of package files

47

increased by2.17%

Lines of code

3388

increased by3.74%

Number of lines in readme file

719

increased by3.16%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes