@reykjavik/webtools 0.2.8 → 0.2.9

package/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.2.9
+
+_2025-09-30_
+
+- `@reykjavik/webtools/next/vanillaExtract`:
+  - feat: Make `vanillaVars` return a type-safe `setVars()` helper to avoid
+    offending VSCode's CSS syntax parser too much.
+
 ## 0.2.8
 
 _2025-09-17_

package/README.md

@@ -847,9 +847,11 @@ editor), but there's a brief summary:
   `scriptUrl` prop).
 - `scriptUrl?: string` — The full SiteImprove analytics script URL.
   (alternative to `accountId` prop).
-- `hasConsented?: boolean` — Manual GDPR 'analytics' consent flag. Allows hard
-  opt-out, but defers to [`CookieHubProvider` values](#usecookiehubconsent) if
-  they are available.
+- `hasConsented?: boolean` — Manual GDPR 'analytics' consent flag. A `false`
+  value allows hard opt-out, but defers to
+  [`CookieHubProvider` values](#usecookiehubconsent) if they are available.
+  Defaults to `undefined` which means "ask CookieHub if available, otherwise
+  no".
 - `onLoad?: (e: unknown) => void` — Fires when the script has loaded.
 - `onError?: (e: unknown) => void` — Fires if loading the script failed.
 
@@ -1186,21 +1188,21 @@ import {
   vanillaGlobal,
 } from '@reykjavik/webtools/vanillaExtract';
 
-export const { varPrimaryColor, varSecondaryColor } = vanillaVars(
+const { varPrimaryColor, varSecondaryColor, setVars } = vanillaVars(
   'primaryColor',
   'secondaryColor'
 );
 
-vanillaGlobal(`
-  :root {
-    ${varPrimaryColor}: #ff0000;
-    ${varSecondaryColor}: #00ff00;
-  }
-  body {
-    background-color: var(${varPrimaryColor});
-    color: var(${varSecondaryColor});
-  }
-`);
+export { varPrimaryColor, varSecondaryColor };
+
+export const wrapper = vanillaClass(`
+  ${setVars({
+    primaryColor: '#ff0000',
+    secondaryColor: '#00ff00',
+  })}
+  background-color: var(${varPrimaryColor});
+  color: var(${varSecondaryColor});
+ `);
 ```
 
 …and then in your component:
@@ -1213,6 +1215,7 @@ import * as cl from './someFile.css.ts';
 export function MyComponent() {
   return (
     <div
+      className={cl.wrapper}
       style={{
         [cl.varPrimaryColor]: 'yellow',
         [cl.varSecondaryColor]: 'blue',

package/esm/vanillaExtract.d.ts

@@ -37,5 +37,8 @@ export declare function vanillaClass(debugId: string, css: string | ClassNameCal
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#vanillacvars
  */
-export declare const vanillaVars: <T extends string>(...varNames: Array<T>) => Record<`var${Capitalize<T>}`, string>;
+export declare const vanillaVars: <T extends string>(...varNames: Array<T>) => Record<`var${Capitalize<T>}`, string> & {
+    /** Allows initializing all or some of the variables in CSS, without offending VSCode's CSS syntax parser too much. */
+    setVars: (vars: Partial<Record<T, unknown>>) => string;
+};
 export {};

package/esm/vanillaExtract.js

@@ -36,8 +36,12 @@ export function vanillaClass(cssOrDebugId, css) {
 export const vanillaVars = (...varNames) => {
     const id = vanillaClass(``);
     const vars = {};
+    vars.setVars = (vars) => Object.entries(vars)
+        .map(([name, value]) => `--${id}--${name}: ${value || ''};`)
+        .join('\n');
     for (const name of varNames) {
         vars[`var${capitalize(name)}`] = `--${id}--${name}`;
     }
     return vars;
 };
+const { varColor, varBg, setVars } = vanillaVars('color', 'bg');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/webtools",
-	"version": "0.2.8",
+	"version": "0.2.9",
 	"description": "Misc. JS/TS helpers used by Reykjavík City's web dev teams.",
 	"main": "index.js",
 	"repository": "ssh://git@github.com:reykjavikcity/webtools.git",

package/vanillaExtract.d.ts

@@ -37,5 +37,8 @@ export declare function vanillaClass(debugId: string, css: string | ClassNameCal
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.2/README.md#vanillacvars
  */
-export declare const vanillaVars: <T extends string>(...varNames: Array<T>) => Record<`var${Capitalize<T>}`, string>;
+export declare const vanillaVars: <T extends string>(...varNames: Array<T>) => Record<`var${Capitalize<T>}`, string> & {
+    /** Allows initializing all or some of the variables in CSS, without offending VSCode's CSS syntax parser too much. */
+    setVars: (vars: Partial<Record<T, unknown>>) => string;
+};
 export {};

package/vanillaExtract.js

@@ -42,9 +42,13 @@ function vanillaClass(cssOrDebugId, css) {
 const vanillaVars = (...varNames) => {
     const id = vanillaClass(``);
     const vars = {};
+    vars.setVars = (vars) => Object.entries(vars)
+        .map(([name, value]) => `--${id}--${name}: ${value || ''};`)
+        .join('\n');
     for (const name of varNames) {
         vars[`var${(0, hanna_utils_1.capitalize)(name)}`] = `--${id}--${name}`;
     }
     return vars;
 };
 exports.vanillaVars = vanillaVars;
+const { varColor, varBg, setVars } = (0, exports.vanillaVars)('color', 'bg');