@reykjavik/webtools 0.1.33 → 0.1.34

package/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.1.34
+
+_2024-10-17_
+
+- `@reykjavik/webtools/next/vanillaExtract`:
+  - feat: `vanillaClass` passes `classNameSelector` a second parameter to the
+    render callback.
+
 ## 0.1.33
 
 _2024-10-16_

package/README.md

@@ -767,9 +767,9 @@ CSS.
 ### `vanillaClass`
 
 **Syntax:**
-`vanillaClass(css: string | ((className: string) => string)): string`  
+`vanillaClass(css: string | ((className: string, classNameSelector: string) => string)): string`  
 **Syntax:**
-`vanillaClass(debugId: string, css: string | ((className: string) => string)): string`
+`vanillaClass(debugId: string, css: string | ((className: string, classNameSelector: string) => string)): string`
 
 Returns a scoped cssClassName styled with free-form CSS. This function is a
 thin wrapper around vanilla-extract's `style` function.
@@ -783,19 +783,19 @@ export const myClass = vanillaClass(`
   padding: .5em 1em;
 `);
 
-// Passing a function to get the generated class name for
+// Passing a function to get the generated class-name for
 // more complex styles.
 export const myOtherClass = vanillaClass(
-  (className) => `
-    .${className} { 
+  (className, classNameSelector) => `
+    ${classNameSelector} { 
       background-color: #ccc;
       padding: .5em 1em;
     }
-    .${className} > strong {
+    [class="${className}"] > strong {
       color: #c00;
     }
     @media (min-width: 800px) {
-      .${className} {
+      ${classNameSelector} {
         background-color: #eee;
       }
     }

package/esm/next/http.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="node" resolution-mode="require"/>
 import React, { FunctionComponent } from 'react';
 import type { Cleanup } from '@reykjavik/hanna-utils';
-import type { ServerResponse } from 'http';
 import type { AppType } from 'next/app.js';
+import type { ServerResponse } from 'node:http';
 import type { HTTP_ERROR_ALL, TTLConfig } from '../http.js';
 export * from '../http.js';
 type NextContextLike = {

package/esm/vanillaExtract.d.ts

@@ -12,13 +12,14 @@ export declare const vanillaGlobal: (css: string) => void;
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaprops
  */
 export declare const vanillaProps: (css: string) => GlobalStyleRule;
+type ClassNameCallback = (className: string, classNameSelector: string) => string;
 /**
  * Returns a scoped cssClassName styled with free-form CSS
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
  */
-export declare function vanillaClass(css: string | ((className: string) => string)): string;
-export declare function vanillaClass(debugId: string, css: string | ((className: string) => string)): string;
+export declare function vanillaClass(css: string | ClassNameCallback): string;
+export declare function vanillaClass(debugId: string, css: string | ClassNameCallback): string;
 /**
  * @deprecated  (Will be removed in v0.2)
  *
@@ -148,3 +149,4 @@ export declare function vanillaClassNested(css: string): string;
  * `postcss` config.
  */
 export declare function vanillaClassNested(debugId: string, css: string): string;
+export {};

package/esm/vanillaExtract.js

@@ -18,7 +18,7 @@ export function vanillaClass(cssOrDebugId, css) {
     css = css != null ? css : cssOrDebugId;
     if (typeof css === 'function') {
         const className = style({}, debugId);
-        vanillaGlobal(css(className));
+        vanillaGlobal(css(className, `.${className}`));
         return className;
     }
     return style(vanillaProps(css), debugId);

package/next/http.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="node" />
 import React, { FunctionComponent } from 'react';
 import type { Cleanup } from '@reykjavik/hanna-utils';
-import type { ServerResponse } from 'http';
 import type { AppType } from 'next/app.js';
+import type { ServerResponse } from 'node:http';
 import type { HTTP_ERROR_ALL, TTLConfig } from '../http.js';
 export * from '../http.js';
 type NextContextLike = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/webtools",
-	"version": "0.1.33",
+	"version": "0.1.34",
 	"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

@@ -12,13 +12,14 @@ export declare const vanillaGlobal: (css: string) => void;
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaprops
  */
 export declare const vanillaProps: (css: string) => GlobalStyleRule;
+type ClassNameCallback = (className: string, classNameSelector: string) => string;
 /**
  * Returns a scoped cssClassName styled with free-form CSS
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
  */
-export declare function vanillaClass(css: string | ((className: string) => string)): string;
-export declare function vanillaClass(debugId: string, css: string | ((className: string) => string)): string;
+export declare function vanillaClass(css: string | ClassNameCallback): string;
+export declare function vanillaClass(debugId: string, css: string | ClassNameCallback): string;
 /**
  * @deprecated  (Will be removed in v0.2)
  *
@@ -148,3 +149,4 @@ export declare function vanillaClassNested(css: string): string;
  * `postcss` config.
  */
 export declare function vanillaClassNested(debugId: string, css: string): string;
+export {};

package/vanillaExtract.js

@@ -23,7 +23,7 @@ function vanillaClass(cssOrDebugId, css) {
     css = css != null ? css : cssOrDebugId;
     if (typeof css === 'function') {
         const className = (0, css_1.style)({}, debugId);
-        (0, exports.vanillaGlobal)(css(className));
+        (0, exports.vanillaGlobal)(css(className, `.${className}`));
         return className;
     }
     return (0, css_1.style)((0, exports.vanillaProps)(css), debugId);