@vanilla-extract/dynamic - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

dist/declarations/src/createInlineTheme.d.ts

 import { Contract, MapLeafNodes } from '@vanilla-extract/private';
-export declare function createInlineTheme<ThemeContract extends Contract>(themeVars: ThemeContract, tokens: MapLeafNodes<ThemeContract, string>): {
+export declare function createInlineTheme<ThemeContract extends Contract>(vars: ThemeContract, tokens: MapLeafNodes<ThemeContract, string>): {
     [cssVarName: string]: string;
 };

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

@@ -7,3 +7,3 @@ 'use strict';
 
-function createInlineTheme(themeVars, tokens) {
+function createInlineTheme(vars, tokens) {
   const styles = {};
@@ -16,3 +16,3 @@ /* TODO
   _private.walkObject(tokens, (value, path) => {
-    const varName = _private.get(themeVars, path);
+    const varName = _private.get(vars, path);
     styles[varName.substring(4, varName.length - 1)] = String(value);
@@ -19,0 +19,0 @@ });

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

@@ -7,3 +7,3 @@ 'use strict';
 
-function createInlineTheme(themeVars, tokens) {
+function createInlineTheme(vars, tokens) {
   const styles = {};
@@ -16,3 +16,3 @@ /* TODO
   _private.walkObject(tokens, (value, path) => {
-    const varName = _private.get(themeVars, path);
+    const varName = _private.get(vars, path);
     styles[varName.substring(4, varName.length - 1)] = String(value);
@@ -19,0 +19,0 @@ });

dist/vanilla-extract-dynamic.esm.js

 import { walkObject, get, getVarName } from '@vanilla-extract/private';
 
-function createInlineTheme(themeVars, tokens) {
+function createInlineTheme(vars, tokens) {
   const styles = {};
@@ -11,3 +11,3 @@ /* TODO
   walkObject(tokens, (value, path) => {
-    const varName = get(themeVars, path);
+    const varName = get(vars, path);
     styles[varName.substring(4, varName.length - 1)] = String(value);
@@ -14,0 +14,0 @@ });

package.json

 {
   "name": "@vanilla-extract/dynamic",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -19,4 +19,4 @@ "sideEffects": false,
   "dependencies": {
-    "@vanilla-extract/private": "^0.1.0"
+    "@vanilla-extract/private": "^1.0.0"
   }
 }

README.md

@@ -37,2 +37,6 @@ # 🧁 vanilla-extract
 
+🖥   [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/seek-oss/vanilla-extract/tree/master/examples/webpack-react?file=/src/App.css.ts)
+
+---
+
 **Write your styles in `.css.ts` files.**
@@ -45,3 +49,3 @@
 
-export const [themeClass, themeVars] = createTheme({
+export const [themeClass, vars] = createTheme({
   color: {
@@ -56,4 +60,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',
@@ -82,13 +86,19 @@ 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)
   - [webpack](#webpack)
   - [esbuild](#esbuild)
+  - [Vite](#vite)
+  - [Snowpack](#snowpack)
   - [Gatsby](#gatsby)
-- [API](#api)
+- [Styling API](#styling-api)
   - [style](#style)
+  - [styleVariants](#styleVariants)
   - [globalStyle](#globalstyle)
-  - [mapToStyles](#maptostyles)
   - [createTheme](#createtheme)
   - [createGlobalTheme](#createglobaltheme)
-  - [createThemeVars](#createthemevars)
+  - [createThemeContract](#createthemecontract)
   - [assignVars](#assignvars)
@@ -101,2 +111,3 @@ - [createVar](#createvar)
   - [globalKeyframes](#globalkeyframes)
+  - [composeStyles](#composestyles)
 - [Dynamic API](#dynamic-api)
@@ -122,3 +133,3 @@ - [createInlineTheme](#createinlinetheme)
 ```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 +190,3 @@
 ```bash
-$ yarn add --dev @vanilla-extract/css @vanilla-extract/esbuild-plugin
+$ npm install @vanilla-extract/css @vanilla-extract/esbuild-plugin
 ```
@@ -198,2 +209,44 @@
 
+### Vite
+
+> Warning: Currently the Vite plugin doesn't rebuild files when dependent files change, e.g. updating `theme.css.ts` should rebuild `styles.css.ts` which imports `theme.css.ts`. This is a limitation in the Vite Plugin API that will hopefully be resolved soon. You can track the Vite issue here: https://github.com/vitejs/vite/issues/3216
+
+1. Install the dependencies.
+
+```bash
+$ npm install @vanilla-extract/css @vanilla-extract/vite-plugin
+```
+
+2. Add the [Vite](https://vitejs.dev/) plugin to your Vite config.
+
+```js
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
+// vite.config.js
+export default {
+  plugins: [vanillaExtractPlugin()]
+}
+```
+
+> Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
+
+## Snowpack
+
+1/ Install the dependencies.
+
+```bash
+$ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
+```
+
+2/ Add the [Snowpack](https://www.snowpack.dev/) plugin to your snowpack config.
+
+```js
+// snowpack.config.json
+{
+  "plugins": ["@vanilla-extract/snowpack-plugin"]
+}
+```
+
+> Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
+
 ### Gatsby
@@ -205,3 +258,3 @@
 
-## API
+## Styling API
 
@@ -226,2 +279,3 @@ > 🍬 If you're a [treat](https://seek-oss.github.io/treat) user, check out our [migration guide.](./docs/treat-migration-guide.md)
 import { style } from '@vanilla-extract/css';
+import { vars } from './vars.css.ts';
 
@@ -231,2 +285,3 @@ export const className = style({
   vars: {
+    [vars.localVar]: 'green',
     '--global-variable': 'purple'
@@ -277,56 +332,55 @@ },
 
-### 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'
+});
 ```
@@ -336,8 +390,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: {
@@ -352,8 +408,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: {
@@ -367,3 +425,3 @@ brand: 'blue'
 
-export const themeB = createTheme(themeVars, {
+export const themeB = createTheme(vars, {
   color: {
@@ -385,5 +443,7 @@ brand: 'pink'
 ```ts
+// theme.css.ts
+
 import { createGlobalTheme } from '@vanilla-extract/css';
 
-export const themeVars = createGlobalTheme(':root', {
+export const vars = createGlobalTheme(':root', {
   color: {
@@ -400,15 +460,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: {
@@ -422,3 +486,3 @@ brand: null
 
-export const themeA = createTheme(themeVars, {
+export const themeA = createTheme(vars, {
   color: {
@@ -432,3 +496,3 @@ brand: 'blue'
 
-export const themeB = createTheme(themeVars, {
+export const themeB = createTheme(vars, {
   color: {
@@ -450,5 +514,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: {
@@ -462,3 +526,3 @@ small: null,
 export const responsiveSpaceTheme = style({
-  vars: assignVars(themeVars.space, {
+  vars: assignVars(vars.space, {
     small: '4px',
@@ -470,3 +534,3 @@ medium: '8px',
     'screen and (min-width: 1024px)': {
-      vars: assignVars(themeVars.space, {
+      vars: assignVars(vars.space, {
         small: '8px',
@@ -606,2 +670,24 @@ medium: '16px',
 
+### 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
@@ -612,3 +698,3 @@
 ```bash
-$ yarn add --dev @vanilla-extract/dynamic
+$ npm install @vanilla-extract/dynamic
 ```
@@ -618,9 +704,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',
@@ -640,10 +726,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',
@@ -663,6 +749,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');
 ```
@@ -677,3 +763,3 @@
 ```bash
-$ yarn add --dev @vanilla-extract/css-utils
+$ npm install @vanilla-extract/css-utils
 ```
@@ -680,0 +766,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23383

increased by15.68%

Number of package files

12

increased by9.09%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

783

increased by12.34%

Dependency changes

• + Added@vanilla-extract/private@1.0.6(transitive)

• - Removed@vanilla-extract/private@0.1.2(transitive)

• Updated@vanilla-extract/private@^1.0.0