@vanilla-extract/css - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

CHANGELOG.md

 # @vanilla-extract/css
 
+## 0.4.0
+
+### Minor Changes
+
+- [#52](https://github.com/seek-oss/vanilla-extract/pull/52) [`2d98bcc`](https://github.com/seek-oss/vanilla-extract/commit/2d98bccb40603585cf9eab70ff0afc52c33f803d) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Rename `createThemeVars` to `createThemeContract`
+
+  **BREAKING CHANGE**
+
+  ```diff
+  import {
+  -  createThemeVars,
+  +  createThemeContract,
+    createTheme
+  } from '@vanilla-extract/css';
+
+  -export const vars = createThemeVars({
+  +export const vars = createThemeContract({
+    color: {
+      brand: null
+    },
+    font: {
+      body: null
+    }
+  });
+  ```
+
+### Patch Changes
+
+- [#50](https://github.com/seek-oss/vanilla-extract/pull/50) [`48c4a78`](https://github.com/seek-oss/vanilla-extract/commit/48c4a7866a8361de712b89b06abb380bf4709656) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Allow vars to be passed as values to all style properties
+
 ## 0.3.2
@@ -4,0 +34,0 @@

dist/declarations/src/types.d.ts

 import type { Contract, MapLeafNodes } from '@vanilla-extract/private';
-import type { PropertiesFallback, AtRule } from 'csstype';
+import type { PropertiesFallback, AtRule, Properties } from 'csstype';
 import type { SimplePseudos } from './transformCss';
-declare type BasicCSSProperties = PropertiesFallback<string | number>;
+export declare type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
+declare type CSSTypeProperties = PropertiesFallback<string | number>;
+declare type BasicCSSProperties = {
+    [Property in keyof CSSTypeProperties]: CSSTypeProperties[Property] | CSSVarFunction | Array<CSSVarFunction | Properties[Property]>;
+};
 export interface CSSKeyframes {
@@ -69,3 +73,3 @@ [time: string]: BasicCSSProperties;
 };
-export declare type ThemeVars<ThemeContract extends Contract> = MapLeafNodes<ThemeContract, string>;
+export declare type ThemeVars<ThemeContract extends Contract> = MapLeafNodes<ThemeContract, CSSVarFunction>;
 export {};

dist/declarations/src/vars.d.ts

 import { Contract, MapLeafNodes } from '@vanilla-extract/private';
-declare type ThemeVars<ThemeContract extends Contract> = MapLeafNodes<ThemeContract, string>;
-export declare function createVar(debugId?: string): string;
-export declare function fallbackVar(...values: [...Array<string>, string]): string;
-export declare function assignVars<VarContract extends Contract>(varContract: VarContract, tokens: MapLeafNodes<VarContract, string>): Record<string, string>;
-export declare function createThemeVars<ThemeContract extends Contract>(themeContract: ThemeContract): ThemeVars<ThemeContract>;
-export {};
+import { CSSVarFunction, ThemeVars } from './types';
+export declare function createVar(debugId?: string): CSSVarFunction;
+export declare function fallbackVar(...values: [...Array<string>, string]): CSSVarFunction;
+export declare function assignVars<VarContract extends Contract>(varContract: VarContract, tokens: MapLeafNodes<VarContract, string>): Record<CSSVarFunction, string>;
+export declare function createThemeContract<ThemeContract extends Contract>(themeContract: ThemeContract): ThemeVars<ThemeContract>;

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

@@ -170,3 +170,3 @@ 'use strict';
 }
-function createThemeVars(themeContract) {
+function createThemeContract(themeContract) {
   return _private.walkObject(themeContract, (_value, path) => {
@@ -179,3 +179,3 @@ return createVar(path.join('-'));
   const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
   const tokens = shouldCreateVars ? arg2 : arg3;
@@ -318,3 +318,3 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 exports.createTheme = createTheme;
-exports.createThemeVars = createThemeVars;
+exports.createThemeContract = createThemeContract;
 exports.createVar = createVar;
@@ -321,0 +321,0 @@ exports.fallbackVar = fallbackVar;

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

@@ -160,3 +160,3 @@ import { transformCss } from '../transformCss/dist/vanilla-extract-css-transformCss.browser.esm.js';
 }
-function createThemeVars(themeContract) {
+function createThemeContract(themeContract) {
   return walkObject(themeContract, (_value, path) => {
@@ -169,3 +169,3 @@ return createVar(path.join('-'));
   const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
   const tokens = shouldCreateVars ? arg2 : arg3;
@@ -304,2 +304,2 @@ appendCss({
 
-export { assignVars, composeStyles, createGlobalTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };
+export { assignVars, composeStyles, createGlobalTheme, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };

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

@@ -170,3 +170,3 @@ 'use strict';
 }
-function createThemeVars(themeContract) {
+function createThemeContract(themeContract) {
   return _private.walkObject(themeContract, (_value, path) => {
@@ -179,3 +179,3 @@ return createVar(path.join('-'));
   const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
   const tokens = shouldCreateVars ? arg2 : arg3;
@@ -318,3 +318,3 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 exports.createTheme = createTheme;
-exports.createThemeVars = createThemeVars;
+exports.createThemeContract = createThemeContract;
 exports.createVar = createVar;
@@ -321,0 +321,0 @@ exports.fallbackVar = fallbackVar;

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

@@ -144,3 +144,3 @@ 'use strict';
 }
-function createThemeVars(themeContract) {
+function createThemeContract(themeContract) {
   return _private.walkObject(themeContract, (_value, path) => {
@@ -153,3 +153,3 @@ return createVar(path.join('-'));
   const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
   const tokens = shouldCreateVars ? arg2 : arg3;
@@ -292,3 +292,3 @@ adapter_dist_vanillaExtractCssAdapter.appendCss({
 exports.createTheme = createTheme;
-exports.createThemeVars = createThemeVars;
+exports.createThemeContract = createThemeContract;
 exports.createVar = createVar;
@@ -295,0 +295,0 @@ exports.fallbackVar = fallbackVar;

dist/vanilla-extract-css.esm.js

@@ -160,3 +160,3 @@ import { transformCss } from '../transformCss/dist/vanilla-extract-css-transformCss.esm.js';
 }
-function createThemeVars(themeContract) {
+function createThemeContract(themeContract) {
   return walkObject(themeContract, (_value, path) => {
@@ -169,3 +169,3 @@ return createVar(path.join('-'));
   const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
   const tokens = shouldCreateVars ? arg2 : arg3;
@@ -304,2 +304,2 @@ appendCss({
 
-export { assignVars, composeStyles, createGlobalTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };
+export { assignVars, composeStyles, createGlobalTheme, createTheme, createThemeContract, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, style, styleVariants };

package.json

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

README.md

@@ -44,3 +44,3 @@ # 🧁 vanilla-extract
 
-export const [themeClass, themeVars] = createTheme({
+export const [themeClass, vars] = createTheme({
   color: {
@@ -55,4 +55,4 @@ brand: 'blue'
 export const exampleStyle = style({
-  backgroundColor: themeVars.color.brand,
-  fontFamily: themeVars.font.body,
+  backgroundColor: vars.color.brand,
+  fontFamily: vars.font.body,
   color: 'white',
@@ -81,2 +81,6 @@ padding: 10
 
+Want to work at a higher level while maximising style re-use? Check out  🍨 [Sprinkles](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
+
+---
+
 - [Setup](#setup)
@@ -92,3 +96,3 @@ - [webpack](#webpack)
   - [createGlobalTheme](#createglobaltheme)
-  - [createThemeVars](#createthemevars)
+  - [createThemeContract](#createthemecontract)
   - [assignVars](#assignvars)
@@ -122,3 +126,3 @@ - [createVar](#createvar)
 ```bash
-$ yarn add --dev @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/webpack-plugin
+$ npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/webpack-plugin
 ```
@@ -179,3 +183,3 @@
 ```bash
-$ yarn add --dev @vanilla-extract/css @vanilla-extract/esbuild-plugin
+$ npm install @vanilla-extract/css @vanilla-extract/esbuild-plugin
 ```
@@ -224,2 +228,3 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from './vars.css.ts';
 
@@ -229,2 +234,3 @@ export const className = style({
   vars: {
+    [vars.localVar]: 'green',
     '--global-variable': 'purple'
@@ -332,8 +338,10 @@ },
 
-Creates a locally scoped theme class and a collection of scoped CSS Variables.
+Creates a locally scoped theme class and a theme contract which can be consumed within your styles.
 
 ```ts
-import { createTheme, style } from '@vanilla-extract/css';
+// theme.css.ts
 
-export const [themeClass, themeVars] = createTheme({
+import { createTheme } from '@vanilla-extract/css';
+
+export const [themeClass, vars] = createTheme({
   color: {
@@ -348,8 +356,10 @@ brand: 'blue'
 
-You can create theme variants by passing a collection of theme variables as the first argument to `createTheme`.
+You can create theme variants by passing a theme contract as the first argument to `createTheme`.
 
 ```ts
-import { createTheme, style } from '@vanilla-extract/css';
+// themes.css.ts
 
-export const [themeA, themeVars] = createTheme({
+import { createTheme } from '@vanilla-extract/css';
+
+export const [themeA, vars] = createTheme({
   color: {
@@ -363,3 +373,3 @@ brand: 'blue'
 
-export const themeB = createTheme(themeVars, {
+export const themeB = createTheme(vars, {
   color: {
@@ -381,5 +391,7 @@ brand: 'pink'
 ```ts
+// theme.css.ts
+
 import { createGlobalTheme } from '@vanilla-extract/css';
 
-export const themeVars = createGlobalTheme(':root', {
+export const vars = createGlobalTheme(':root', {
   color: {
@@ -396,15 +408,19 @@ brand: 'blue'
 
-### createThemeVars
+### createThemeContract
 
-Creates a collection of CSS Variables without coupling them to a specific theme variant.
+Creates a contract for themes to implement.
 
+**Ensure this function is called within a `.css.ts` context, otherwise variable names will be mismatched between themes.**
+
 > 💡 This is useful if you want to split your themes into different bundles. In this case, your themes would be defined in separate files, but we'll keep this example simple.
 
 ```ts
+// themes.css.ts
+
 import {
-  createThemeVars,
+  createThemeContract,
   createTheme
 } from '@vanilla-extract/css';
 
-export const themeVars = createThemeVars({
+export const vars = createThemeContract({
   color: {
@@ -418,3 +434,3 @@ brand: null
 
-export const themeA = createTheme(themeVars, {
+export const themeA = createTheme(vars, {
   color: {
@@ -428,3 +444,3 @@ brand: 'blue'
 
-export const themeB = createTheme(themeVars, {
+export const themeB = createTheme(vars, {
   color: {
@@ -446,5 +462,5 @@ brand: 'pink'
 ```ts
-import { style, createThemeVars, assignVars } from '@vanilla-extract/css';
+import { createThemeContract, style, assignVars } from '@vanilla-extract/css';
 
-export const themeVars = createThemeVars({
+export const vars = createThemeContract({
   space: {
@@ -458,3 +474,3 @@ small: null,
 export const responsiveSpaceTheme = style({
-  vars: assignVars(themeVars.space, {
+  vars: assignVars(vars.space, {
     small: '4px',
@@ -466,3 +482,3 @@ medium: '8px',
     'screen and (min-width: 1024px)': {
-      vars: assignVars(themeVars.space, {
+      vars: assignVars(vars.space, {
         small: '8px',
@@ -629,3 +645,3 @@ medium: '16px',
 ```bash
-$ yarn add --dev @vanilla-extract/dynamic
+$ npm install @vanilla-extract/dynamic
 ```
@@ -635,9 +651,9 @@
 
-Generates a custom theme at runtime as an inline style object.
+Implements a theme contract at runtime as an inline style object.
 
 ```ts
 import { createInlineTheme } from '@vanilla-extract/dynamic';
-import { themeVars, exampleStyle } from './styles.css.ts';
+import { vars, exampleStyle } from './styles.css.ts';
 
-const customTheme = createInlineTheme(themeVars, {
+const customTheme = createInlineTheme(vars, {
   small: '4px',
@@ -657,10 +673,10 @@ medium: '8px',
 
-Sets a collection of CSS Variables on an element.
+Implements a theme contract on an element.
 
 ```ts
 import { setElementTheme } from '@vanilla-extract/dynamic';
-import { themeVars } from './styles.css.ts';
+import { vars } from './styles.css.ts';
 
 const element = document.getElementById('myElement');
-setElementTheme(element, themeVars, {
+setElementTheme(element, vars, {
   small: '4px',
@@ -680,6 +696,6 @@ medium: '8px',
 import { setElementVar } from '@vanilla-extract/dynamic';
-import { themeVars } from './styles.css.ts';
+import { vars } from './styles.css.ts';
 
 const element = document.getElementById('myElement');
-setElementVar(element, themeVars.color.brand, 'darksalmon');
+setElementVar(element, vars.color.brand, 'darksalmon');
 ```
@@ -694,3 +710,3 @@
 ```bash
-$ yarn add --dev @vanilla-extract/css-utils
+$ npm install @vanilla-extract/css-utils
 ```
@@ -697,0 +713,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

Improved metrics

Total package byte prevSize

150849

increased by1.1%

Lines of code

3550

increased by0.08%

Number of lines in readme file

735

increased by2.23%

No dependency changes