Remove regex lookbehinds to support Safari 16.3 or older (#298)

* Remove regex lookbehinds

* Refactor regex

* Fix _addPseudoRule and refactor some tests

* Fix changeset

.changeset/mighty-coats-breathe.md

@@ -0,0 +1,5 @@
+---
+"@kuma-ui/sheet": patch
+---
+
+Remove regex lookbehinds to support Safari <= 16.3 and some refactoring

packages/sheet/src/regex.test.ts

@@ -1,8 +1,11 @@
-import { cssPropertyRegex, removeSpacesExceptInPropertiesRegex } from "./regex";
+import {
+  removeSpacesAroundCssPropertyValues,
+  removeSpacesExceptInProperties,
+} from "./regex";
 import { describe, expect, test } from "vitest";
 
 describe("regex", () => {
-  describe("cssPropertyRegex", () => {
+  describe("removeSpacesAroundCssPropertyValues", () => {
     // Arrange
     const testCases = [
       { input: "color: red;", expected: "color:red;" },
@@ -44,14 +47,14 @@ describe("regex", () => {
       "should removes whitespace around CSS property values correctly",
       ({ input, expected }) => {
         // Act
-        const result = input.replace(cssPropertyRegex, "");
+        const result = removeSpacesAroundCssPropertyValues(input);
         // Assert
         expect(result).toStrictEqual(expected);
       }
     );
   });
 
-  describe("removeSpacesExceptInPropertiesRegex", () => {
+  describe("removeSpacesExceptInProperties", () => {
     // Arrange
     const testCases = [
       { input: "padding: 10px 20px;", expected: "padding:10px 20px;" },
@@ -74,7 +77,7 @@ describe("regex", () => {
       "should removes whitespace except around CSS property values and after commas",
       ({ input, expected }) => {
         // Act
-        const result = input.replace(removeSpacesExceptInPropertiesRegex, "");
+        const result = removeSpacesExceptInProperties(input);
         // Assert
         expect(result).toStrictEqual(expected);
       }

packages/sheet/src/regex.ts

@@ -1,6 +1,10 @@
-// removes white space around property values
-export const cssPropertyRegex = /(?<=:)\s+|\s+(?=;)/g;
+export const removeSpacesAroundCssPropertyValues = (css: string) => {
+  const regex = /(:)\s+|\s+(?=;)/g;
+  return css.replace(regex, "$1");
+};
 
 // removes whitespace except around CSS property values and after commas.
-export const removeSpacesExceptInPropertiesRegex =
-  /(?<=:)\s+|\s+(?=;)|(?<=\{)\s+|\s+(?=\})|(?<=,)\s+|\s+(?=,)|\s+(?={)/g;
+export const removeSpacesExceptInProperties = (css: string) => {
+  const regex = /(:)\s+|\s+(?=;)|(\{)\s+|\s+(?=\})|(,)\s+|\s+(?=,)|\s+(?={)/g;
+  return css.replace(regex, "$1$2$3");
+};

packages/sheet/src/sheet.test.ts

@@ -1,6 +1,6 @@
 import { sheet, SystemStyle } from "./sheet";
 import { describe, expect, test, beforeEach } from "vitest";
-import { removeSpacesExceptInPropertiesRegex, cssPropertyRegex } from "./regex";
+import { removeSpacesAroundCssPropertyValues } from "./regex";
 
 describe("Sheet class", () => {
   beforeEach(() => {
@@ -31,18 +31,17 @@ describe("Sheet class", () => {
     // Assert
     expect(className.startsWith("🐻-")).toBeTruthy();
     expect(cssString).toContain(
-      `.${className}{${style.base.replace(cssPropertyRegex, "")}}`
+      `.${className}{${removeSpacesAroundCssPropertyValues(style.base)}}`
     );
     expect(cssString).toContain(
-      `@media (min-width:768px){.${className}{${style.responsive[
-        "768px"
-      ].replace(cssPropertyRegex, "")}}}`
+      `@media (min-width:768px){.${className}{${removeSpacesAroundCssPropertyValues(
+        style.responsive["768px"]
+      )}}}`
     );
     expect(cssString).toContain(
-      `.${className}${style.pseudo[0].key}{${style.pseudo[0].base.replace(
-        cssPropertyRegex,
-        ""
-      )}}`
+      `.${className}${
+        style.pseudo[0].key
+      }{${removeSpacesAroundCssPropertyValues(style.pseudo[0].base)}}`
     );
   });
 
@@ -69,17 +68,16 @@ describe("Sheet class", () => {
     const className = sheet.parseCSS(style);
     // Assert
     const expectedCSS = `.${className}{display:flex;flex-direction:row;}@media (max-width: 768px){.${className}{flex-direction:column;}}.${className}:after{content:" 🦄";}`;
-    expect(sheet.getCSS()).toContain(expectedCSS);
+    expect(sheet.getCSS()).toEqual(expectedCSS);
   });
 
   test("getCSS() should return the CSS string with unique rules", () => {
     // Arrange
     const id = sheet.addRule(style);
     // Act
     const cssString = sheet.getCSS();
+    const expectedCSS = `.${id}{color:red;}@media (min-width:768px){.${id}{color:blue;}}@media (min-width:768px){.${id}:hover{color:yellow;}}.${id}:hover{color:green;}`;
     // Assert
-    expect(cssString).toContain(
-      `.${id}{${style.base}}`.replace(cssPropertyRegex, "")
-    );
+    expect(cssString).toEqual(expectedCSS);
   });
 });

packages/sheet/src/sheet.ts

@@ -1,6 +1,9 @@
 import { theme } from ".";
 import { generateHash } from "./hash";
-import { cssPropertyRegex, removeSpacesExceptInPropertiesRegex } from "./regex";
+import {
+  removeSpacesAroundCssPropertyValues,
+  removeSpacesExceptInProperties,
+} from "./regex";
 import { compile, serialize, stringify, Element } from "stylis";
 
 // to avoid cyclic dependency, we declare an exact same type declared in @kuma-ui/system
@@ -65,32 +68,29 @@ export class Sheet {
   }
 
   private _addBaseRule(className: string, css: string) {
-    css = css.replace(cssPropertyRegex, "");
-    this.base.push(`.${className}{${css}}`);
+    const minifiedCss = removeSpacesAroundCssPropertyValues(css);
+    this.base.push(`.${className}{${minifiedCss}}`);
   }
 
   private _addMediaRule(
     className: string,
     css: string,
     breakpoint: string
   ): void {
-    css = css.replace(cssPropertyRegex, "");
-    const mediaCss =
-      `@media (min-width: ${breakpoint}) { .${className} { ${css} } }`.replace(
-        removeSpacesExceptInPropertiesRegex,
-        ""
-      );
+    const minifiedCss = removeSpacesAroundCssPropertyValues(css);
+    const mediaCss = removeSpacesExceptInProperties(
+      `@media (min-width: ${breakpoint}) { .${className} { ${minifiedCss} } }`
+    );
     this.responsive.push(mediaCss);
   }
 
   private _addPseudoRule(
     className: string,
     pseudo: SystemStyle["pseudo"][number]
   ) {
-    const css = pseudo.base.replace(cssPropertyRegex, "");
-    const pseudoCss = `.${className}${pseudo.key} { ${css} }`.replace(
-      removeSpacesExceptInPropertiesRegex,
-      ""
+    const css = removeSpacesAroundCssPropertyValues(pseudo.base);
+    const pseudoCss = removeSpacesExceptInProperties(
+      `.${className}${pseudo.key} { ${css} }`
     );
     this.pseudo.push(pseudoCss);
     for (const [breakpoint, _css] of Object.entries(pseudo.responsive)) {