Add ignoreRule option (kristerkari#232)

* Add ignoreRule option

* Add new option to README

Author: kristerkari

README.md

@@ -69,6 +69,38 @@ transform(`
 }
 ```
 
+### `ignoreRule` option
+
+```js
+transform(
+  `  
+  .foo {
+    color: red;
+  }
+  .bar {
+    font-size: 12px;
+  }
+`,
+  {
+    ignoreRule: (selector) => {
+      if (selector === ".foo") {
+        return true;
+      }
+    },
+  },
+);
+```
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+```js
+{
+  bar: {
+    fontSize: 12;
+  }
+}
+```
+
 ### CSS Modules :export block
 
 Parsing the [CSS Modules (ICSS) :export](https://github.com/css-modules/icss#export) is supported. The `:export` is often used to share variables from CSS or from a preprocessor like Sass/Less/Stylus to Javascript:

index.d.ts

@@ -1,6 +1,7 @@
 export default function transform(
   css: string,
   options?: {
+    ignoreRule?: (selector: string) => boolean;
     parseMediaQueries?: boolean;
   },
 ): { [selector: string]: unknown };

src/index.js

@@ -111,6 +111,13 @@ const transform = (css, options) => {
         continue;
       }
 
+      if (
+        typeof options?.ignoreRule === "function" &&
+        options.ignoreRule(rule.selectors[s]) === true
+      ) {
+        continue;
+      }
+
       const selector = rule.selectors[s].replace(/^\./, "");
       const styles = (result[selector] = result[selector] || {});
       transformDecls(styles, rule.declarations, result);
@@ -155,6 +162,13 @@ const transform = (css, options) => {
       for (const r in rule.rules) {
         const ruleRule = rule.rules[r];
         for (const s in ruleRule.selectors) {
+          if (
+            typeof options?.ignoreRule === "function" &&
+            options.ignoreRule(ruleRule.selectors[s]) === true
+          ) {
+            continue;
+          }
+
           result[media] = result[media] || {};
           const selector = ruleRule.selectors[s].replace(/^\./, "");
           const mediaStyles = (result[media][selector] =

src/index.spec.js

@@ -2670,6 +2670,81 @@ describe("rem unit", () => {
   });
 });
 
+describe("ignoreRule option", () => {
+  it("should allow to ignore a selector completely", () => {
+    expect(
+      transform(
+        `
+      .foo {
+        color: red;
+      }
+      .bar {
+        font-size: 12px;
+      }
+    `,
+        {
+          ignoreRule: (selector) => {
+            if (selector === ".foo") {
+              return true;
+            }
+          },
+        },
+      ),
+    ).toEqual({
+      bar: { fontSize: 12 },
+    });
+  });
+
+  it("should do nothing when returing false", () => {
+    expect(
+      transform(
+        `
+        .foo {
+          color: red;
+        }
+        .bar {
+          font-size: 12px;
+        }
+    `,
+        {
+          ignoreRule: (selector) => {
+            if (selector === ".bar") {
+              return false;
+            }
+            if (selector === ".foo") {
+              return false;
+            }
+          },
+        },
+      ),
+    ).toEqual({
+      bar: { fontSize: 12 },
+      foo: { color: "red" },
+    });
+  });
+
+  it("should not error out even if ignoreRule is not a function", () => {
+    expect(
+      transform(
+        `
+        .foo {
+          color: red;
+        }
+        .bar {
+          font-size: 12px;
+        }
+      `,
+        {
+          ignoreRule: true,
+        },
+      ),
+    ).toEqual({
+      bar: { fontSize: 12 },
+      foo: { color: "red" },
+    });
+  });
+});
+
 describe("viewport units", () => {
   it("should transform viewport units", () => {
     expect(
@@ -3195,6 +3270,48 @@ describe("media queries", () => {
     });
   });
 
+  it("should support media queries + ignoreRule option", () => {
+    expect(
+      transform(
+        `
+        .container {
+          background-color: #f00;
+        }
+
+        @media (orientation: landscape) {
+          .container {
+            background-color: #00f;
+          }
+        }
+        `,
+        {
+          ignoreRule: (selector) => {
+            if (selector === ".container") {
+              return true;
+            }
+          },
+          parseMediaQueries: true,
+        },
+      ),
+    ).toEqual({
+      __mediaQueries: {
+        "@media (orientation: landscape)": [
+          {
+            expressions: [
+              {
+                feature: "orientation",
+                modifier: undefined,
+                value: "landscape",
+              },
+            ],
+            inverse: false,
+            type: "all",
+          },
+        ],
+      },
+    });
+  });
+
   it("should throw for invalid types", () => {
     expect(() =>
       transform(