@reykjavik/webtools 0.1.26 → 0.1.28

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.1.28
+
+_2024-08-26_
+
+- `@reykjavik/webtools/http`:
+  - feat: `cacheControl` now also accepts `Map<string, string>` for headers
+
+## 0.1.27
+
+_2024-07-18_
+
+- `@reykjavik/webtools/next/vanillaExtract`:
+  - feat: `vanillaClass` now accepts a function that receives the generated
+    `className` as parameter
+
 ## 0.1.26
 
 _2024-05-25_

package/README.md

@@ -1,4 +1,4 @@
-# @reykjavik/webtools
+# @reykjavik/webtools <!-- omit from toc -->
 
 Miscellaneous JavaScript/TypeScript helpers used by Reykjavík City's web dev
 teams.
@@ -112,10 +112,10 @@ codes, are also available:
 ### `cacheControl` helper
 
 **Syntax:**
-`cacheConrol(response: ServerResponse | { res: ServerResponse }, ttlCfg: TTLConfig, eTag?: string|number): void`
+`cacheConrol(response: ServerResponse | Response | Map<string, string> | { res: ServerResponse | Response }, ttlCfg: TTLConfig, eTag?: string|number): void`
 
 Use this function to quickly set the `Cache-Control` header with a `max-age=`
-on a HTTP response.
+on a HTTP response (or a `Map` object representing response headers).
 
 ```js
 import { cacheControl } from '@reykjavik/webtools/http';
@@ -530,8 +530,10 @@ const myStyle = style({
 
 ### `vanillaClass`
 
-**Syntax:** `vanillaClass(css: string): string`  
-**Syntax:** `vanillaClass(debugId: string, css: string): string`
+**Syntax:**
+`vanillaClass(css: string | ((className: string) => string)): string`  
+**Syntax:**
+`vanillaClass(debugId: string, css: string | ((className: string) => string)): string`
 
 Returns a scoped cssClassName styled with free-form CSS. This function is a
 thin wrapper around vanilla-extract's `style` function.
@@ -545,6 +547,25 @@ export const myClass = vanillaClass(`
   padding: .5em 1em;
 `);
 
+// Passing a function to get the generated class name for
+// more complex styles.
+export const myOtherClass = vanillaClass(
+  (className) => `
+  .${className} {
+    background-color: #ccc;
+    padding: .5em 1em;
+  }
+  .${className} > strong {
+    color: #c00;
+  }
+  @media (min-width: 800px) {
+    .${className} {
+      background-color: #eee;
+    }
+  }
+`
+);
+
 export const humanReadableClass = vanillaClass(
   'HumanReadable',
   `

package/esm/http.d.ts

@@ -168,7 +168,7 @@ type ServerResponseStub = Pick<ServerResponse, 'setHeader' | 'getHeader' | 'remo
     headers?: Record<string, string | Array<string>>;
 };
 type ResponseStub = {
-    headers: Pick<Headers, 'set' | 'get' | 'delete' | 'append'>;
+    headers: Pick<Headers, 'set' | 'get' | 'delete'>;
 };
 /**
  * Use this function to quickly set the `Cache-Control` header with a `max-age=`
@@ -176,7 +176,7 @@ type ResponseStub = {
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#getcssbundleurl
  */
-export declare const cacheControl: (response: ServerResponseStub | ResponseStub | {
+export declare const cacheControl: (response: ServerResponseStub | ResponseStub | Map<string, string> | {
     res: ServerResponseStub | ResponseStub;
 }, ttlCfg: TTLConfig, eTag?: string | number) => void;
 export {};

package/esm/http.js

@@ -147,6 +147,9 @@ export const toSec = (ttl) => {
     return Math.max(0, Math.round(ttl)) || 0;
 };
 const toRespnseStubHeaders = (response) => {
+    if (response instanceof Map) {
+        return response;
+    }
     if ('headers' in response && !('setHeader' in response)) {
         return response.headers;
     }
@@ -159,15 +162,6 @@ const toRespnseStubHeaders = (response) => {
             return val != null ? `${val}` : null;
         },
         set: (name, value) => response.setHeader(name, value),
-        append: (name, value) => {
-            const existing = response.getHeader(name);
-            if (existing) {
-                response.setHeader(name, `${existing}, ${value}`);
-            }
-            else {
-                response.setHeader(name, value);
-            }
-        },
         delete: (name) => response.removeHeader(name),
     };
 };

package/esm/vanillaExtract.d.ts

@@ -17,8 +17,8 @@ export declare const vanillaProps: (css: string) => GlobalStyleRule;
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
  */
-export declare function vanillaClass(css: string): string;
-export declare function vanillaClass(debugId: string, css: string): string;
+export declare function vanillaClass(css: string | ((className: string) => string)): string;
+export declare function vanillaClass(debugId: string, css: string | ((className: string) => string)): string;
 /**
  * Replaces all `&` tokens with the given selector string, in a direct
  * (read. "dumb") way. It's mainly useful when used with style-mixins, etc.

package/esm/vanillaExtract.js

@@ -16,6 +16,11 @@ export const vanillaProps = (css) => ({ x: `; ${css}` });
 export function vanillaClass(cssOrDebugId, css) {
     const debugId = css != null ? cssOrDebugId : undefined;
     css = css != null ? css : cssOrDebugId;
+    if (typeof css === 'function') {
+        const className = style({}, debugId);
+        vanillaGlobal(css(className));
+        return className;
+    }
     return style(vanillaProps(css), debugId);
 }
 // ---------------------------------------------------------------------------

package/http.d.ts

@@ -168,7 +168,7 @@ type ServerResponseStub = Pick<ServerResponse, 'setHeader' | 'getHeader' | 'remo
     headers?: Record<string, string | Array<string>>;
 };
 type ResponseStub = {
-    headers: Pick<Headers, 'set' | 'get' | 'delete' | 'append'>;
+    headers: Pick<Headers, 'set' | 'get' | 'delete'>;
 };
 /**
  * Use this function to quickly set the `Cache-Control` header with a `max-age=`
@@ -176,7 +176,7 @@ type ResponseStub = {
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#getcssbundleurl
  */
-export declare const cacheControl: (response: ServerResponseStub | ResponseStub | {
+export declare const cacheControl: (response: ServerResponseStub | ResponseStub | Map<string, string> | {
     res: ServerResponseStub | ResponseStub;
 }, ttlCfg: TTLConfig, eTag?: string | number) => void;
 export {};

package/http.js

@@ -152,6 +152,9 @@ const toSec = (ttl) => {
 };
 exports.toSec = toSec;
 const toRespnseStubHeaders = (response) => {
+    if (response instanceof Map) {
+        return response;
+    }
     if ('headers' in response && !('setHeader' in response)) {
         return response.headers;
     }
@@ -164,15 +167,6 @@ const toRespnseStubHeaders = (response) => {
             return val != null ? `${val}` : null;
         },
         set: (name, value) => response.setHeader(name, value),
-        append: (name, value) => {
-            const existing = response.getHeader(name);
-            if (existing) {
-                response.setHeader(name, `${existing}, ${value}`);
-            }
-            else {
-                response.setHeader(name, value);
-            }
-        },
         delete: (name) => response.removeHeader(name),
     };
 };

package/package.json

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

@@ -17,8 +17,8 @@ export declare const vanillaProps: (css: string) => GlobalStyleRule;
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
  */
-export declare function vanillaClass(css: string): string;
-export declare function vanillaClass(debugId: string, css: string): string;
+export declare function vanillaClass(css: string | ((className: string) => string)): string;
+export declare function vanillaClass(debugId: string, css: string | ((className: string) => string)): string;
 /**
  * Replaces all `&` tokens with the given selector string, in a direct
  * (read. "dumb") way. It's mainly useful when used with style-mixins, etc.

package/vanillaExtract.js

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