fix: addComponent with attribute selectors, close #232

windicss · Apr 8, 2021 · 29d4493 · 29d4493
1 parent 611b6ba
commit 29d4493
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -749,9 +749,15 @@ export class Processor {
           }
         });
       } else if (Array.isArray(className)) {
-        className.filter(i => i.isClass).forEach(({ selector, pseudo }) => this._addPluginCache('components', selector, pseudo ? styles.map(i => i.clone('.' + cssEscape(selector)).wrapSelector(selector => selector + pseudo)): deepCopy(styles)));
-        const base = className.filter(i => !i.isClass).map(i => i.selector).join(', ');
-        if (base) this._addPluginCache('static', base, styles.map(i => i.clone(base)));
+        // one of the selector are not class, treat the entire as static to avoid duplication
+        if (className.some(i => !i.isClass)) {
+          const base = className.map(i => i.selector).join(', ');
+          if (base) this._addPluginCache('static', base, styles.map(i => i.clone(base)));
+        }
+        // class
+        else {
+          className.forEach(({ selector, pseudo }) => this._addPluginCache('components', selector, pseudo ? styles.map(i => i.clone('.' + cssEscape(selector)).wrapSelector(selector => selector + pseudo)): deepCopy(styles)));
+        }
       } else {
         this._addPluginCache(className.isClass? 'components': 'static', className.selector, className.pseudo ? styles.map(style => style.clone('.' + cssEscape((className as { selector: string }).selector)).wrapSelector(selector => selector + (className as { pseudo: string }).pseudo)) : styles);
       }

diff --git a/src/utils/tools.ts b/src/utils/tools.ts
@@ -255,8 +255,8 @@ export function searchNotEscape(text:string, char = '{'): number {
 }
 
 export function guessClassName(selector: string): { selector: string, isClass: boolean, pseudo?: string } | { selector: string, isClass: boolean, pseudo?: string }[] {
-  if (/\s*,\s*/.test(selector)) return selector.split(/\s*,\s*/g).map(i => guessClassName(i) as { selector: string, isClass: boolean });
-  if (selector.charAt(0) !== '.') return { selector, isClass: false };
+  if (selector.indexOf(',') >= 0) return selector.split(/\s*,\s*/g).map(i => guessClassName(i) as { selector: string, isClass: boolean });
+  if (selector.charAt(0) !== '.' || selector.indexOf('[') >= 0) return { selector, isClass: false };
   const pos = searchNotEscape(selector, ':');
   if (pos === -1) return { selector: selector.slice(1, ).replace(/\\/g, ''), isClass: true };
   return { selector: selector.slice(1, pos).replace(/\\/g, ''), isClass: true, pseudo: selector.slice(pos,) };

diff --git a/test/interface/__snapshots__/plugin.test.ts.yml b/test/interface/__snapshots__/plugin.test.ts.yml
@@ -0,0 +1,10 @@
+Tools / addComponents with attribute selectors / css / 0: |-
+  btn-disabled, .btn[disabled] {
+    --tw-bg-opacity: 1;
+    --tw-bg-opacity: 0.2;
+    background-color: hsla(var(--n,219 14% 28%)/var(--tw-bg-opacity));
+    --tw-border-opacity: 0;
+    --tw-text-opacity: 1;
+    --tw-text-opacity: 0.2;
+    color: hsla(var(--bc,215 28% 17%)/var(--tw-text-opacity));
+  }
diff --git a/test/interface/plugin.test.ts b/test/interface/plugin.test.ts
@@ -1,5 +1,6 @@
-import plugin from '../../dist/plugin';
-import type { PluginUtils } from '../../dist/types/interfaces';
+import { Processor } from '../../src/lib';
+import plugin from '../../src/plugin';
+import type { PluginFunction, PluginUtils } from '../../src/interfaces';
 
 describe('plugin interface test', () => {
   it('import', () => {
@@ -33,4 +34,24 @@ describe('plugin interface test', () => {
     });
     expect(plugin.withOptions).toBeDefined();
   });
+
+  // #232
+  it('addComponents with attribute selectors', () => {
+    const plugin: PluginFunction = (utils) => {
+      utils.addComponents({
+        '.btn-disabled,.btn[disabled]': {
+          '-TwBgOpacity':['1', '0.2'],
+          'backgroundColor':'hsla(var(--n,219 14% 28%)/var(--tw-bg-opacity))',
+          '-TwBorderOpacity':'0',
+          '-TwTextOpacity':['1', '0.2'],
+          'color':'hsla(var(--bc,215 28% 17%)/var(--tw-text-opacity))',
+        },
+      });
+    };
+    const processor = new Processor({
+      plugins: [plugin],
+    });
+
+    expect(processor.preflight(' ', false, false, true).build()).toMatchSnapshot('css');
+  });
 });