From 0dada2ec8264135ed2e4d3b9aa87b7a73d0f9bda Mon Sep 17 00:00:00 2001
From: Pavel Zhukov <cray0000@gmail.com>
Date: Mon, 17 Aug 2020 16:39:27 +0300
Subject: [PATCH] feat: add support for parsing the ::part() selectors

---
 README.md         | 34 ++++++++++++++++++++++
 src/index.js      |  6 +++-
 src/index.spec.js | 73 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bd32862..6c003e5 100644
--- a/README.md
+++ b/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
diff --git a/src/index.js b/src/index.js
index 74dc344..80b3104 100644
--- a/src/index.js
+++ b/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 ||
diff --git a/src/index.spec.js b/src/index.spec.js
index ae7f7c6..5ed04e9 100644
--- a/src/index.spec.js
+++ b/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",
+      },
+    });
+  });
+});