@vanilla-extract/sprinkles - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

		# @vanilla-extract/sprinkles

		## 1.1.0

		### Minor Changes

		- [#303](https://github.com/seek-oss/vanilla-extract/pull/303) [`e67e673`](https://github.com/seek-oss/vanilla-extract/commit/e67e673c071d3cbd7dafe4fb5667d37395c03a6b) Thanks [@rtkaaho](https://github.com/rtkaaho)! - Support passing style objects as property values.

		For more complicated styles, values can now be entire style objects. This works especially well when combined with CSS Variables.

		```ts
		import { createVar } from '@vanilla-extract/css';
		import { createAtomicStyles } from '@vanilla-extract/sprinkles';

		const alpha = createVar();

		const responsiveStyles = createAtomicStyles({
		properties: {
		background: {
		red: {
		vars: { [alpha]: '1' },
		background: `rgba(255, 0, 0, ${alpha})`,
		},
		},
		backgroundOpacity: {
		1: { vars: { [alpha]: '1' } },
		0.1: { vars: { [alpha]: '0.1' } },
		},
		// etc.
		},
		});
		```

		## 1.0.0
		@@ -4,0 +35,0 @@

dist/declarations/src/index.d.ts

		@@ -1,2 +0,2 @@
		import { CSSProperties } from '@vanilla-extract/css';
		import { CSSProperties, StyleRule } from '@vanilla-extract/css';
		import { AtomsFn } from './createAtomsFn';
		@@ -15,3 +15,3 @@ import { AtomicStyles, ResponsiveArrayConfig } from './types';
		declare type AtomicProperties = {
		[Property in keyof CSSProperties]?: Record<string, CSSProperties[Property]> \| ReadonlyArray<CSSProperties[Property]>;
		[Property in keyof CSSProperties]?: Record<string, CSSProperties[Property] \| Omit<StyleRule, 'selectors' \| '@media' \| '@supports'>> \| ReadonlyArray<CSSProperties[Property]>;
		};
		@@ -18,0 +18,0 @@ declare type ShorthandOptions<Properties extends AtomicProperties, Shorthands extends {

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

		@@ -33,6 +33,10 @@ 'use strict';
		const condition = options.conditions[conditionName];
		let styleValue = {
		[key]: value
		};
		let styleValue = {};

		if (typeof value === 'object') {
		styleValue = value;
		} else {
		styleValue[key] = value;
		}

		if (condition['@supports']) {
		@@ -39,0 +43,0 @@ styleValue = {

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

		@@ -33,6 +33,10 @@ 'use strict';
		const condition = options.conditions[conditionName];
		let styleValue = {
		[key]: value
		};
		let styleValue = {};

		if (typeof value === 'object') {
		styleValue = value;
		} else {
		styleValue[key] = value;
		}

		if (condition['@supports']) {
		@@ -39,0 +43,0 @@ styleValue = {

dist/vanilla-extract-sprinkles.esm.js

		@@ -29,6 +29,10 @@ import { style, composeStyles } from '@vanilla-extract/css';
		const condition = options.conditions[conditionName];
		let styleValue = {
		[key]: value
		};
		let styleValue = {};

		if (typeof value === 'object') {
		styleValue = value;
		} else {
		styleValue[key] = value;
		}

		if (condition['@supports']) {
		@@ -35,0 +39,0 @@ styleValue = {

package.json

		{
		"name": "@vanilla-extract/sprinkles",
		"version": "1.0.0",
		"version": "1.1.0",
		"description": "Zero-runtime atomic CSS framework for vanilla-extract",
		@@ -5,0 +5,0 @@ "sideEffects": false,

README.md

		@@ -48,6 +48,2 @@ # 🍨 Sprinkles

		🚧   Please note, this is an alpha release.

		---

		🔥   Zero-runtime CSS-in-TypeScript with all styles generated at build time via [vanilla-extract.](https://github.com/seek-oss/vanilla-extract)
		@@ -373,2 +369,29 @@

		For more complicated styles, values can even be entire style objects. This works especially well when combined with CSS Variables.

		> 💡 Styles are created in the order that they were defined in your config. Properties that are less specific should be higher in the list.

		```ts
		import { createVar } from '@vanilla-extract/css';
		import { createAtomicStyles } from '@vanilla-extract/sprinkles';

		const alpha = createVar();

		const responsiveStyles = createAtomicStyles({
		properties: {
		background: {
		red: {
		vars: { [alpha]: '1' },
		background: `rgba(255, 0, 0, ${alpha})`
		},
		},
		backgroundOpacity: {
		1: { vars: { [alpha]: '1' } },
		0.1: { vars: { [alpha]: '0.1' } },
		},
		// etc.
		}
		});
		```

		#### `shorthands`
		@@ -378,3 +401,3 @@

		Note that shorthands are evaluated in the order that they were defined in your config. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.
		> 💡 Shorthands are evaluated in the order that they were defined in your config. Shorthands that are less specific should be higher in the list, e.g. `padding` should come before `paddingX`/`paddingY`.

		@@ -381,0 +404,0 @@ ```ts

New alerts