feat: Better support for data attributes (#106)

feat: Add `if` overloads for attribute selectors.
homebound-team · May 8, 2023 · bf7c0b2 · bf7c0b2
1 parent a6e5e35
commit bf7c0b2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/packages/template-tachyons/src/Css.ts b/packages/template-tachyons/src/Css.ts
@@ -2451,11 +2451,14 @@ class CssBuilder<T extends Properties> {
 
   if(bp: Breakpoint): CssBuilder<T>;
   if(cond: boolean): CssBuilder<T>;
-  if(arg: boolean | Breakpoint): CssBuilder<T> {
-    if (typeof arg === "boolean") {
+  if(attr: string, value: boolean | string): CssBuilder<T>;
+  if(arg: boolean | Breakpoint | string, value?: boolean | string): CssBuilder<T> {
+    if (value !== undefined) {
+      return this.newCss({ selector: `[${arg}='${value}']` });
+    } else if (typeof arg === "boolean") {
       return this.newCss({ enabled: arg });
     } else {
-      return this.newCss({ selector: Breakpoints[arg] });
+      return this.newCss({ selector: Breakpoints[arg as Breakpoint] });
     }
   }
 

diff --git a/packages/testing-tachyons/src/Css.test.tsx b/packages/testing-tachyons/src/Css.test.tsx
@@ -278,6 +278,24 @@ describe("Css", () => {
     `);
   });
 
+  it("can use data attributes", () => {
+    // Maybe Css.black.ifDataActive.blue.$ ?
+    // Maybe Css.black.ifData("active", "true").blue.$
+    // Maybe Css.black.if("data-active", "true").blue.$ <-- trying this one
+    // Maybe Css.black.if("data-active='true'").blue.$
+    expect(Css.black.if("data-active", "true").blue.if("data-active", false).primary.$).toMatchInlineSnapshot(`
+      {
+        "[data-active='false']": {
+          "color": "var(--primary)",
+        },
+        "[data-active='true']": {
+          "color": "#526675",
+        },
+        "color": "#353535",
+      }
+    `);
+  });
+
   it("can use sqPx", () => {
     expect(Css.sqPx(24).$).toMatchInlineSnapshot(`
       {

diff --git a/packages/testing-tachyons/src/Css.ts b/packages/testing-tachyons/src/Css.ts
@@ -2150,11 +2150,14 @@ class CssBuilder<T extends Properties> {
 
   if(bp: Breakpoint): CssBuilder<T>;
   if(cond: boolean): CssBuilder<T>;
-  if(arg: boolean | Breakpoint): CssBuilder<T> {
-    if (typeof arg === "boolean") {
+  if(attr: string, value: boolean | string): CssBuilder<T>;
+  if(arg: boolean | Breakpoint | string, value?: boolean | string): CssBuilder<T> {
+    if (value !== undefined) {
+      return this.newCss({ selector: `[${arg}='${value}']` });
+    } else if (typeof arg === "boolean") {
       return this.newCss({ enabled: arg });
     } else {
-      return this.newCss({ selector: Breakpoints[arg] });
+      return this.newCss({ selector: Breakpoints[arg as Breakpoint] });
     }
   }
 

diff --git a/packages/truss/src/generate.ts b/packages/truss/src/generate.ts
@@ -106,11 +106,14 @@ class CssBuilder<T extends Properties> {
 
   if(bp: Breakpoint): CssBuilder<T>;
   if(cond: boolean): CssBuilder<T>;
-  if(arg: boolean | Breakpoint): CssBuilder<T> {
-    if (typeof arg === "boolean") {
+  if(attr: string, value: boolean | string): CssBuilder<T>;
+  if(arg: boolean | Breakpoint | string, value?: boolean | string): CssBuilder<T> {
+    if (value !== undefined) {
+      return this.newCss({ selector: \`[\${arg}='\${value}']\` });
+    } else if (typeof arg === "boolean") {
       return this.newCss({ enabled: arg });
     } else {
-      return this.newCss({ selector: Breakpoints[arg] });
+      return this.newCss({ selector: Breakpoints[arg as Breakpoint] });
     }
   }