feat: support add attr

src/PostCSSPrefixWrap.ts

@@ -8,6 +8,7 @@ export interface PostCSSPrefixWrapOptions {
   prefixRootTags?: boolean;
   whitelist?: Array<string>;
   blacklist?: Array<string>;
+  hasAttribute?: string;
 }
 
 export default class PostCSSPrefixWrap {
@@ -17,6 +18,7 @@ export default class PostCSSPrefixWrap {
   private readonly prefixRootTags: boolean;
   private readonly prefixSelector: string;
   private readonly whitelist: Array<string>;
+  private readonly hasAttribute: string;
 
   constructor(prefixSelector: string, options: PostCSSPrefixWrapOptions = {}) {
     this.blacklist = options.blacklist ?? [];
@@ -26,6 +28,7 @@ export default class PostCSSPrefixWrap {
     this.prefixRootTags = options.prefixRootTags ?? false;
     this.prefixSelector = prefixSelector;
     this.whitelist = options.whitelist ?? [];
+    this.hasAttribute = options.hasAttribute || "";
   }
 
   prefixWrapCSSSelector(
@@ -54,7 +57,14 @@ export default class PostCSSPrefixWrap {
 
     // Anything other than a root tag is always prefixed.
     if (Selector.isNotRootTag(cleanSelector)) {
-      return this.prefixSelector + " " + cleanSelector;
+      let css = `${this.prefixSelector} ${cleanSelector}`;
+      if (Selector.isClassSelector(cleanSelector)) {
+        css = `${css}, ${this.prefixSelector}${cleanSelector}`;
+      }
+      if (this.hasAttribute) {
+        css = `${css},${this.prefixSelector}[${this.hasAttribute}] ${cleanSelector}`;
+      }
+      return css;
     }
 
     // Handle special case where root tags should be converted into classes

src/Selector.ts

@@ -2,6 +2,8 @@ import { PostCSSAtRule, PostCSSRule } from "Types";
 
 const ANY_WHITESPACE_AT_BEGINNING_OR_END = /(^\s*|\s*$)/g;
 const IS_ROOT_TAG = /^(body|html).*$/;
+const IS_CLASS_SELECTOR = /^\./;
+const IS_ID_SELECTOR = /^\#/;
 
 export default class Selector {
   static isValid(cssSelector: string | null): boolean {
@@ -28,4 +30,18 @@ export default class Selector {
   static isNotRootTag(cleanSelector: string): boolean {
     return !cleanSelector.match(IS_ROOT_TAG);
   }
+
+  static isTagSelector(cleanSelector: string): boolean {
+    return (
+      this.isIdSelector(cleanSelector) && this.isClassSelector(cleanSelector)
+    );
+  }
+
+  static isIdSelector(cleanSelector: string): boolean {
+    return !!cleanSelector.match(IS_ID_SELECTOR);
+  }
+
+  static isClassSelector(cleanSelector: string): boolean {
+    return !!cleanSelector.match(IS_CLASS_SELECTOR);
+  }
 }

src/acceptance/fixtures/multiple-classes-expected.css

@@ -1,8 +1,8 @@
 /* Ensure classes are prefixed. */
-.my-container .something, .my-container .else {
+.my-container .something, .my-container.something, .my-container .else, .my-container.else {
   font-size: 40px;
 }
 
-.my-container .foo, .my-container .bar {
+.my-container .foo, .my-container.foo, .my-container .bar, .my-container.bar {
   font-size: 40px;
 }

src/acceptance/fixtures/standard-classes-expected.css

@@ -1,9 +1,9 @@
 /* Ensure classes are prefixed. */
-.my-container .something {
+.my-container .something, .my-container.something {
   font-size: 40px;
 }
 
 /* Ensure child selectors are kept. */
-.my-container .something p {
+.my-container .something p, .my-container.something p {
   color: red;
 }