Merge pull request #26 from lttb/lttb/fix-specifcity-class

fix: fix specificity class appending
lttb · Mar 18, 2024 · 8000ea9 · 8000ea9
2 parents a374635 + d2edfea
commit 8000ea9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 22 deletions.
diff --git a/@taddy/core/index.test.ts b/@taddy/core/index.test.ts
@@ -12,7 +12,7 @@ describe('@taddy/core', () => {
                 'background',
                 'blue',
             )}`,
-            '__id1',
+            '__id1 _',
         );
 
         expect(
@@ -24,10 +24,10 @@ describe('@taddy/core', () => {
                 '__id2',
             ).className,
         ).toEqual(
-            `_ ${getClassName('color', 'blue')} ${getClassName(
+            `${getClassName('color', 'blue')} ${getClassName(
                 'background',
                 'blue',
-            )} __id1 __id2`,
+            )} __id1 __id2 _`,
         );
 
         expect(
@@ -39,10 +39,10 @@ describe('@taddy/core', () => {
                 '__id2',
             ).className,
         ).toEqual(
-            `_ ${getClassName('color', 'red')} ${getClassName(
+            `${getClassName('color', 'red')} ${getClassName(
                 'background',
                 'blue',
-            )} __id1 __id2`,
+            )} __id1 __id2 _`,
         );
     });
 });
diff --git a/@taddy/core/static/index.ts b/@taddy/core/static/index.ts
@@ -54,6 +54,9 @@ export const withId = (result, id?: string | void) => {
     result[Symbol?.toPrimitive || 'toString'] = () => '.' + value;
     result.className += (result.className ? ' ' : '') + value;
 
+    // append "_" to the final className to maintain specificity
+    result.className += ' _';
+
     return result;
 };
 
@@ -100,8 +103,7 @@ const _css = (
         }
     }
 
-    // append "_" to the final className to maintain specificity
-    result.className = '_ ' + joinClassName(className);
+    result.className = joinClassName(className);
 
     if (style) {
         result.style = style;

diff --git a/taddy/index.ts b/taddy/index.ts
@@ -56,8 +56,7 @@ function _css<T extends TaddyRule | {[key: string]: TaddyRule}>(
         delete result.className[MIXIN_KEY];
 
         // @ts-expect-error fix types
-        // append "_" to the final className to maintain specificity
-        result.className = '_ ' + joinClassName(result.className);
+        result.className = joinClassName(result.className);
     }
 
     return withId(result, id);

diff --git a/taddy/tests/index.test.ts b/taddy/tests/index.test.ts
@@ -30,8 +30,8 @@ describe('api', () => {
     it('should generate atoms', () => {
         expect(css({color: 'red', background: 'green'})).toMatchInlineSnapshot(`
             {
-              "className": "_ _1kgt43_2f0x _-m15jgy_1mpr0j ___lp7ldc",
-              Symbol(ID_KEY): "___lp7ldc",
+              "className": "_1kgt43_2f0x _-m15jgy_1mpr0j ___jtqwen _",
+              Symbol(ID_KEY): "___jtqwen",
               Symbol(Symbol.toPrimitive): [Function],
             }
         `);
@@ -52,8 +52,8 @@ describe('api', () => {
             }),
         ).toMatchInlineSnapshot(`
             {
-              "className": "_ _-kygmid_1c _rnbphe_1vf95 ___sba9to",
-              Symbol(ID_KEY): "___sba9to",
+              "className": "_-kygmid_1c _rnbphe_1vf95 ___86u29p _",
+              Symbol(ID_KEY): "___86u29p",
               Symbol(Symbol.toPrimitive): [Function],
             }
         `);
@@ -259,24 +259,24 @@ describe('api', () => {
 
         expect(button).toMatchInlineSnapshot(`
             {
-              "className": "_ _1kgt43_2f0x ___-wnp3vy",
-              Symbol(ID_KEY): "___-wnp3vy",
+              "className": "_1kgt43_2f0x ___6zzohd _",
+              Symbol(ID_KEY): "___6zzohd",
               Symbol(Symbol.toPrimitive): [Function],
             }
         `);
 
         expect(box).toMatchInlineSnapshot(`
             {
-              "className": "_ _1kgt43_1svoa _ozbvb8_wlfys5_wcpz ___s7670w",
-              Symbol(ID_KEY): "___s7670w",
+              "className": "_1kgt43_1svoa _ea88or_wlfys5_wcpz ___pox1ff _",
+              Symbol(ID_KEY): "___pox1ff",
               Symbol(Symbol.toPrimitive): [Function],
             }
         `);
 
         expect(getStyles()).toMatchInlineSnapshot(`
             "._1kgt43_2f0x { color: red; }
             ._1kgt43_1svoa { color: blue; }
-            ._ozbvb8_wlfys5_wcpz + .___-wnp3vy { margin-left: 10px; }"
+            ._ea88or_wlfys5_wcpz + .___6zzohd { margin-left: 10px; }"
         `);
     });
 
@@ -328,8 +328,8 @@ describe('api', () => {
 
         expect(button).toMatchInlineSnapshot(`
             {
-              "className": "_ _1kgt43_1svoa _w0o0bo_-wl9t3s_1kgt43_2f0x ___cd9162",
-              Symbol(ID_KEY): "___cd9162",
+              "className": "_1kgt43_1svoa _w0o0bo_-wl9t3s_1kgt43_2f0x ___-xdchlh _",
+              Symbol(ID_KEY): "___-xdchlh",
               Symbol(Symbol.toPrimitive): [Function],
             }
         `);
@@ -348,8 +348,8 @@ describe('api', () => {
 
         expect(button).toMatchInlineSnapshot(`
             {
-              "className": "_ _1kgt43_1svoa _-1p9wvz_-wl9t3s_1kgt43_2f0x ___v2j7o3",
-              Symbol(ID_KEY): "___v2j7o3",
+              "className": "_1kgt43_1svoa _-1p9wvz_-wl9t3s_1kgt43_2f0x ___xs95gy _",
+              Symbol(ID_KEY): "___xs95gy",
               Symbol(Symbol.toPrimitive): [Function],
             }
         `);