@reykjavik/webtools 0.1.35 → 0.1.36

package/CHANGELOG.md

@@ -4,6 +4,13 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.1.36
+
+_2024-10-18_
+
+- `@reykjavik/webtools/next/vanillaExtract`:
+  - fix: Change `vanillaClass` replacement token to be `&&`
+
 ## 0.1.35
 
 _2024-10-18_

package/README.md

@@ -774,11 +774,11 @@ CSS.
 Returns a scoped cssClassName styled with free-form CSS. This function is a
 thin wrapper around vanilla-extract's `style` function.
 
-When you pass it a string, all `.&` tokens are automatically replaced with the
+When you pass it a string, all `&&` tokens are automatically replaced with the
 selector for the auto-generated class-name. Note that in such cases EVERY
 style property must be wrapped in a selector block.
 
-To opt out of the `.&` replacement, use the callback function signature.
+To opt out of the `&&` replacement, use the callback function signature.
 
 ```ts
 // someFile.css.ts
@@ -790,13 +790,13 @@ export const myClass = vanillaClass(`
   padding: .5em 1em;
 `);
 
-// With .& tokens that get replaced with the generated class-name
+// With && tokens that get replaced with the generated class-name
 export const myClasWithAmp = vanillaClass(`
-  .& {
+  && {
     background-color: #ccc;
     padding: .5em 1em;
   }
-  .& > strong {
+  && > strong {
     color: #c00;
   }
 `);
@@ -817,8 +817,8 @@ export const myOtherClass = vanillaClass(
         background-color: #eee;
       }
     }
-    /* ".&" tokens in CSS returned from a callback are not replaced */
-    .& { will-not-be: interpolated; }
+    /* NOTE: '&&' tokens returned from a callback function are NOT replaced */
+    && { will-not-be: interpolated; }
   `
 );
 
@@ -832,7 +832,7 @@ export const humanReadableClass = vanillaClass(
 );
 ```
 
-(NOTE: The dot-prefixed `.&` pattern is chosen to not conflict with the bare
+(NOTE: The dot-prefixed `&&` pattern is chosen to not conflict with the bare
 `&` token in modern nested CSS.)
 
 ### `vanillaGlobal`

package/esm/vanillaExtract.d.ts

@@ -21,11 +21,11 @@ classNameSelector: string) => string;
  * Returns a scoped cssClassName styled with free-form CSS. This function is a
  * thin wrapper around vanilla-extract's `style` function.
  *
- * When you pass it a string, all `.&` tokens are automatically replaced with the
+ * When you pass it a string, all `&&` tokens are automatically replaced with the
  * selector for the auto-generated class-name. Note that in such cases EVERY
  * style property must be wrapped in a selector block.
  *
- * To opt out of the `.&` replacement, use the callback function signature.
+ * To opt out of the `&&` replacement, use the callback function signature.
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
  */

package/esm/vanillaExtract.js

@@ -16,13 +16,13 @@ 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 === 'string' && !/.&/.test(css)) {
+    if (typeof css === 'string' && !/&&/.test(css)) {
         return style(vanillaProps(css), debugId);
     }
     const className = style({}, debugId);
     vanillaGlobal(typeof css === 'function'
         ? css('className', `.${className}`)
-        : css.replace(/.&/g, `.${className}`));
+        : css.replace(/&&/g, `.${className}`));
     return className;
 }
 // ---------------------------------------------------------------------------

package/package.json

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

@@ -21,11 +21,11 @@ classNameSelector: string) => string;
  * Returns a scoped cssClassName styled with free-form CSS. This function is a
  * thin wrapper around vanilla-extract's `style` function.
  *
- * When you pass it a string, all `.&` tokens are automatically replaced with the
+ * When you pass it a string, all `&&` tokens are automatically replaced with the
  * selector for the auto-generated class-name. Note that in such cases EVERY
  * style property must be wrapped in a selector block.
  *
- * To opt out of the `.&` replacement, use the callback function signature.
+ * To opt out of the `&&` replacement, use the callback function signature.
  *
  * @see https://github.com/reykjavikcity/webtools/blob/v0.1/README.md#vanillaclass
  */

package/vanillaExtract.js

@@ -21,13 +21,13 @@ exports.vanillaProps = vanillaProps;
 function vanillaClass(cssOrDebugId, css) {
     const debugId = css != null ? cssOrDebugId : undefined;
     css = css != null ? css : cssOrDebugId;
-    if (typeof css === 'string' && !/.&/.test(css)) {
+    if (typeof css === 'string' && !/&&/.test(css)) {
         return (0, css_1.style)((0, exports.vanillaProps)(css), debugId);
     }
     const className = (0, css_1.style)({}, debugId);
     (0, exports.vanillaGlobal)(typeof css === 'function'
         ? css('className', `.${className}`)
-        : css.replace(/.&/g, `.${className}`));
+        : css.replace(/&&/g, `.${className}`));
     return className;
 }
 exports.vanillaClass = vanillaClass;