@vanilla-extract/css - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

CHANGELOG.md

 # @vanilla-extract/css
 
+## 1.2.3
+
+### Patch Changes
+
+- [#284](https://github.com/seek-oss/vanilla-extract/pull/284) [`e65c029`](https://github.com/seek-oss/vanilla-extract/commit/e65c0297a557f141cf84ca0836ee8ab4060c9d78) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Fix multiple top-level conditional styles in runtime version
+
 ## 1.2.2
@@ -4,0 +10,0 @@

dist/declarations/src/conditionalRulesets.d.ts

@@ -32,4 +32,4 @@ interface Rule {
     sort(): void;
-    renderToObj(): any;
+    renderToArray(): any;
 }
 export {};

package.json

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

README.md

@@ -104,5 +104,4 @@ # 🧁 vanilla-extract
 - [Dynamic API](#dynamic-api)
-  - [createInlineTheme](#createinlinetheme)
-  - [setElementTheme](#setelementtheme)
-  - [setElementVar](#setelementvar)
+  - [assignInlineVars](#assigninlinevars)
+  - [setElementVars](#setelementvars)
 - [Utility functions](#utility-functions)
@@ -765,19 +764,58 @@ - [calc](#calc)
 
-### createInlineTheme
+### assignInlineVars
 
-Implements a theme contract at runtime as an inline style object.
+Assigns CSS Variables as inline styles.
 
-```ts
-import { createInlineTheme } from '@vanilla-extract/dynamic';
-import { vars, exampleStyle } from './styles.css.ts';
+```tsx
+// app.tsx
 
-const customTheme = createInlineTheme(vars, {
-  small: '4px',
-  medium: '8px',
-  large: '16px'
-});
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from './vars.css.ts';
 
+const MyComponent = () => (
+  <section
+    style={assignInlineVars({
+      [vars.colors.brand]: 'pink',
+      [vars.colors.accent]: 'green'
+    })}
+  >
+    ...
+  </section>
+);
+```
+
+You can also assign collections of variables by passing a theme contract as the first argument. All variables must be assigned or it’s a type error.
+
+```tsx
+// app.tsx
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from './vars.css.ts';
+
+const MyComponent = () => (
+  <section
+    style={assignInlineVars(vars.colors, {
+      brand: 'pink',
+      accent: 'green'
+    })}
+  >
+    ...
+  </section>
+);
+```
+
+Even though this function returns an object of inline styles, its `toString` method returns a valid `style` attribute value so that it can be used in string templates.
+
+```tsx
+// app.ts
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from './vars.css.ts';
+
 document.write(`
-  <section style="${customTheme}">
-    <h1 class="${exampleStyle}">Hello world!</h1>
+  <section style="${assignInlineVars({
+    [vars.colors.brand]: 'pink',
+    [vars.colors.accent]: 'green'
+  })}">
+    ...
   </section>
@@ -787,30 +825,34 @@ `);
 
-### setElementTheme
+### setElementVars
 
-Implements a theme contract on an element.
+Sets CSS Variables on a DOM element.
 
-```ts
-import { setElementTheme } from '@vanilla-extract/dynamic';
+```tsx
+// app.ts
+
+import { setElementVars } from '@vanilla-extract/dynamic';
 import { vars } from './styles.css.ts';
 
-const element = document.getElementById('myElement');
-setElementTheme(element, vars, {
-  small: '4px',
-  medium: '8px',
-  large: '16px'
+const el = document.getElementById('myElement');
+
+setElementVars(el, {
+  [vars.colors.brand]: 'pink',
+  [vars.colors.accent]: 'green'
 });
 ```
 
-> 💡 All variables passed into this function must be assigned or it’s a type error.
+You can also set collections of variables by passing a theme contract as the second argument. All variables must be set or it’s a type error.
 
-### setElementVar
+```tsx
+// app.ts
 
-Sets a single var on an element.
-
-```ts
-import { setElementVar } from '@vanilla-extract/dynamic';
+import { setElementVars } from '@vanilla-extract/dynamic';
 import { vars } from './styles.css.ts';
 
-const element = document.getElementById('myElement');
-setElementVar(element, vars.color.brand, 'darksalmon');
+const el = document.getElementById('myElement');
+
+setElementVars(el, vars.colors, {
+  brand: 'pink',
+  accent: 'green'
+});
 ```
@@ -817,0 +859,0 @@

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

@@ -252,6 +252,6 @@ 'use strict';
 
-  renderToObj() {
+  renderToArray() {
     // Sort rulesets according to required rule order
     this.sort();
-    const target = {};
+    const arr = [];
 
@@ -263,12 +263,15 @@ for (const {
     } of this.ruleset) {
-      target[query] = {};
+      const selectors = {};
 
       for (const rule of rules) {
-        target[query][rule.selector] = rule.rule;
+        selectors[rule.selector] = rule.rule;
       }
 
-      Object.assign(target[query], children.renderToObj());
+      Object.assign(selectors, ...children.renderToArray());
+      arr.push({
+        [query]: selectors
+      });
     }
 
-    return target;
+    return arr;
   }
@@ -678,3 +681,5 @@
     for (const conditionalRuleset of this.conditionalRulesets) {
-      css.push(renderCss(conditionalRuleset.renderToObj()));
+      for (const conditionalRule of conditionalRuleset.renderToArray()) {
+        css.push(renderCss(conditionalRule));
+      }
     }
@@ -681,0 +686,0 @@

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

@@ -243,6 +243,6 @@ import { getVarName } from '@vanilla-extract/private';
 
-  renderToObj() {
+  renderToArray() {
     // Sort rulesets according to required rule order
     this.sort();
-    const target = {};
+    const arr = [];
 
@@ -254,12 +254,15 @@ for (const {
     } of this.ruleset) {
-      target[query] = {};
+      const selectors = {};
 
       for (const rule of rules) {
-        target[query][rule.selector] = rule.rule;
+        selectors[rule.selector] = rule.rule;
       }
 
-      Object.assign(target[query], children.renderToObj());
+      Object.assign(selectors, ...children.renderToArray());
+      arr.push({
+        [query]: selectors
+      });
     }
 
-    return target;
+    return arr;
   }
@@ -669,3 +672,5 @@
     for (const conditionalRuleset of this.conditionalRulesets) {
-      css.push(renderCss(conditionalRuleset.renderToObj()));
+      for (const conditionalRule of conditionalRuleset.renderToArray()) {
+        css.push(renderCss(conditionalRule));
+      }
     }
@@ -672,0 +677,0 @@

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

@@ -252,6 +252,6 @@ 'use strict';
 
-  renderToObj() {
+  renderToArray() {
     // Sort rulesets according to required rule order
     this.sort();
-    const target = {};
+    const arr = [];
 
@@ -263,12 +263,15 @@ for (const {
     } of this.ruleset) {
-      target[query] = {};
+      const selectors = {};
 
       for (const rule of rules) {
-        target[query][rule.selector] = rule.rule;
+        selectors[rule.selector] = rule.rule;
       }
 
-      Object.assign(target[query], children.renderToObj());
+      Object.assign(selectors, ...children.renderToArray());
+      arr.push({
+        [query]: selectors
+      });
     }
 
-    return target;
+    return arr;
   }
@@ -678,3 +681,5 @@
     for (const conditionalRuleset of this.conditionalRulesets) {
-      css.push(renderCss(conditionalRuleset.renderToObj()));
+      for (const conditionalRule of conditionalRuleset.renderToArray()) {
+        css.push(renderCss(conditionalRule));
+      }
     }
@@ -681,0 +686,0 @@

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

@@ -252,6 +252,6 @@ 'use strict';
 
-  renderToObj() {
+  renderToArray() {
     // Sort rulesets according to required rule order
     this.sort();
-    const target = {};
+    const arr = [];
 
@@ -263,12 +263,15 @@ for (const {
     } of this.ruleset) {
-      target[query] = {};
+      const selectors = {};
 
       for (const rule of rules) {
-        target[query][rule.selector] = rule.rule;
+        selectors[rule.selector] = rule.rule;
       }
 
-      Object.assign(target[query], children.renderToObj());
+      Object.assign(selectors, ...children.renderToArray());
+      arr.push({
+        [query]: selectors
+      });
     }
 
-    return target;
+    return arr;
   }
@@ -678,3 +681,5 @@
     for (const conditionalRuleset of this.conditionalRulesets) {
-      css.push(renderCss(conditionalRuleset.renderToObj()));
+      for (const conditionalRule of conditionalRuleset.renderToArray()) {
+        css.push(renderCss(conditionalRule));
+      }
     }
@@ -681,0 +686,0 @@

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

@@ -243,6 +243,6 @@ import { getVarName } from '@vanilla-extract/private';
 
-  renderToObj() {
+  renderToArray() {
     // Sort rulesets according to required rule order
     this.sort();
-    const target = {};
+    const arr = [];
 
@@ -254,12 +254,15 @@ for (const {
     } of this.ruleset) {
-      target[query] = {};
+      const selectors = {};
 
       for (const rule of rules) {
-        target[query][rule.selector] = rule.rule;
+        selectors[rule.selector] = rule.rule;
       }
 
-      Object.assign(target[query], children.renderToObj());
+      Object.assign(selectors, ...children.renderToArray());
+      arr.push({
+        [query]: selectors
+      });
     }
 
-    return target;
+    return arr;
   }
@@ -669,3 +672,5 @@
     for (const conditionalRuleset of this.conditionalRulesets) {
-      css.push(renderCss(conditionalRuleset.renderToObj()));
+      for (const conditionalRule of conditionalRuleset.renderToArray()) {
+        css.push(renderCss(conditionalRule));
+      }
     }
@@ -672,0 +677,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

228776

increased by0.75%

Lines of code

5564

increased by0.45%

Number of lines in readme file

911

increased by4.83%

No dependency changes