feat: add support for parsing the ::part() selectors (#1)

Author: cray0000

README.md

@@ -185,6 +185,40 @@ transform(`.foo { font-size: 1vh; }`);
 }
 ```
 
+### CSS ::part() pseudo-elements
+
+To enable parsing [::part() selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), specify the `parsePartSelectors` flag:
+
+```js
+transform(
+  `
+  .container {
+    background-color: #f00;
+  }
+
+  .container::part(input) {
+    background-color: #00f;
+  }
+  `,
+  {
+    parsePartSelectors: true,
+  },
+);
+```
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+```js
+{
+  container: {
+    backgroundColor: "#f00",
+  },
+  "container::part(input)": {
+    backgroundColor: "#00f",
+  },
+}
+```
+
 ## Limitations
 
 - For `rem` unit the root element `font-size` is currently set to 16 pixels. A

src/index.js

@@ -16,6 +16,7 @@ const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px|rem$))/;
 const viewportUnitRe = /^([+-]?[0-9.]+)(vh|vw|vmin|vmax)$/;
 const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/;
 const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|cm|mm|in|pc|pt))$/;
+const cssPartRe = /::?part\(([^)]+)\)/;
 const shorthandBorderProps = [
   "border-radius",
   "border-width",
@@ -100,7 +101,10 @@ const transform = (css, options) => {
 
       if (
         rule.selectors[s].indexOf(".") !== 0 ||
-        rule.selectors[s].indexOf(":") !== -1 ||
+        (rule.selectors[s].indexOf(":") !== -1 &&
+          (options != null && options.parsePartSelectors
+            ? !cssPartRe.test(rule.selectors[s])
+            : true)) ||
         rule.selectors[s].indexOf("[") !== -1 ||
         rule.selectors[s].indexOf("~") !== -1 ||
         rule.selectors[s].indexOf(">") !== -1 ||

src/index.spec.js

@@ -3487,3 +3487,76 @@ describe("ICSS :export pseudo-selector", () => {
     ).toThrow();
   });
 });
+
+describe("::part() selectors", () => {
+  it("transforms ::part() selectors", () => {
+    expect(
+      transform(
+        `
+        .container {
+          background-color: #f00;
+        }
+
+        .container::part(input) {
+          background-color: #00f;
+        }
+        `,
+        {
+          parsePartSelectors: true,
+        },
+      ),
+    ).toEqual({
+      container: {
+        backgroundColor: "#f00",
+      },
+      "container::part(input)": {
+        backgroundColor: "#00f",
+      },
+    });
+  });
+
+  it("does not transform ::part() selectors without option enabled", () => {
+    expect(
+      transform(
+        `
+        .container {
+          background-color: #f00;
+        }
+
+        .container::part(input) {
+          background-color: #00f;
+        }
+        `,
+        {},
+      ),
+    ).toEqual({
+      container: {
+        backgroundColor: "#f00",
+      },
+    });
+
+    expect(
+      transform(
+        `
+        .container {
+          background-color: #f00;
+        }
+
+        .container::part(input) {
+          background-color: #00f;
+        }
+        `,
+        {
+          parsePartSelectors: true,
+        },
+      ),
+    ).toEqual({
+      container: {
+        backgroundColor: "#f00",
+      },
+      "container::part(input)": {
+        backgroundColor: "#00f",
+      },
+    });
+  });
+});