wrote isValidStyle, and ensureValidStyle to css semicolon issues for react native

Author: landonwjohnson

.yarn/versions/73032223.yml

@@ -1,7 +1,7 @@
 {
   "name": "@devlander/utils",
   "description": "Utils shared between projects that are plain javascript",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "browser": "dist/umd/index.js",
   "main": "dist/cjs/index.js",
   "types": "typings/index.d.ts",

package.json

@@ -0,0 +1,49 @@
+import { ensureValidStyle } from "../ensureValidStyle";
+
+
+
+// These are the tests that are failing.
+
+// ● ensureValidStyle › should add semicolons at the end of each CSS property if missing
+
+// expect(received).toBe(expected) // Object.is equality
+
+// Expected: "border-width: 1px; color: red; font-size: 16px;"
+// Received: "border-width: 1px; color: red; font-size: 16px"
+
+// ● ensureValidStyle › should fix missing colons and semicolons in the CSS string
+
+// expect(received).toBe(expected) // Object.is equality
+
+// Expected: "color: red; font-size: 16px;"
+// Received: "color: : red; font-size 16px;"
+
+describe("ensureValidStyle", () => {
+  it("should return the same CSS string if it is already valid", () => {
+    const cssString = "color: red; font-size: 16px;";
+
+    const result = ensureValidStyle(cssString);
+
+    expect(result).toBe(cssString);
+  });
+
+  it("should fix missing colons and semicolons in the CSS string", () => {
+    const cssString = "color: red; font-size 16px";
+    const expectedFixedCSS = "color: red; font-size: 16px;";
+
+    const result = ensureValidStyle(cssString);
+
+    expect(result).toBe(expectedFixedCSS);
+  });
+
+  it("should add semicolons at the end of each CSS property if missing", () => {
+    const cssString = "border-width: 1px; color: red; font-size: 16px";
+    const expectedFixedCSS = "border-width: 1px; color: red; font-size: 16px;";
+
+    const result = ensureValidStyle(cssString);
+
+    expect(result).toBe(expectedFixedCSS);
+  });
+
+  // Add more test cases for other potential fixes
+});

src/__tests__/ensureValidStyle.test.ts

@@ -0,0 +1,86 @@
+import { isValidStyle } from "../isValidStyle";
+
+describe("isValidStyle", () => {
+  it("should return true for a valid CSS string", () => {
+    const cssString = "color: red; font-size: 16px;";
+
+    const result = isValidStyle(cssString);
+
+    expect(result).toBe(true);
+  });
+
+  it("should return false for an invalid CSS string", () => {
+    const cssString = "color: red; font-size: 16px; invalid-property: value;";
+
+    const result = isValidStyle(cssString);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false for an empty CSS string", () => {
+    const cssString = "";
+
+    const result = isValidStyle(cssString);
+
+    expect(result).toBe(false);
+  });
+
+  it("should return false for a CSS string with missing semicolons", () => {
+    const cssString = "color: red font-size: 16px";
+
+    const result = isValidStyle(cssString);
+
+    expect(result).toBe(false);
+  });
+
+  
+    it("should return false for a CSS string with extra spaces", () => {
+      const cssString = "color: red;  font-size : 16px; ";
+  
+      const result = isValidStyle(cssString);
+  
+      expect(result).toBe(true); // Assuming the function trims spaces correctly
+    });
+  
+    it("should return true for a CSS string using valid React Native properties", () => {
+      const cssString = "flex-direction: row; justify-content: center;";
+  
+      const result = isValidStyle(cssString);
+  
+      expect(result).toBe(true); // Assumes flex-direction and justify-content are in the list of valid properties
+    });
+  
+    it("should return false for a CSS string with invalid values", () => {
+      const cssString = "color: magicColor; font-size: big;";
+  
+      const result = isValidStyle(cssString);
+  
+      expect(result).toBe(true); // This test assumes validation is only for property names, not values
+    });
+  
+    it("should return false for a CSS string with no value after colon", () => {
+      const cssString = "color: ; font-size: 16px;";
+  
+      const result = isValidStyle(cssString);
+  
+      expect(result).toBe(false);
+    });
+  
+    it("should return false for a CSS string with valid properties but incorrect format", () => {
+      const cssString = "color:red;font-size:16px;"; // Missing spaces after colon
+  
+      const result = isValidStyle(cssString);
+  
+      expect(result).toBe(true); // Assumes the function handles missing spaces gracefully
+    });
+  
+    it("should return false for a CSS string that uses camelCase properties", () => {
+      const cssString = "backgroundColor: red; fontSize: 16px;";
+  
+      const result = isValidStyle(cssString);
+  
+      expect(result).toBe(false); // Assumes the function expects kebab-case properties
+    });
+  
+});
+

src/__tests__/isValidStyle.test.ts

@@ -0,0 +1,10 @@
+export const ensureValidStyle = (cssString: string): string => {
+  // Fix for missing colons and ensuring semicolons are correctly placed
+  const fixedCSS = cssString
+    // Fix missing colons. Matches property names followed by spaces and values, ensuring a colon is inserted.
+    .replace(/([a-z-]+)\s+([^;:]+)(;|$)/gi, (match, property, value, ending) => `${property}: ${value}${ending === ';' ? ';' : ''}`)
+    // Ensure semicolons at the end of each declaration
+    .replace(/([^;])\s*$/gm, '$1;');
+
+  return fixedCSS;
+};

src/ensureValidStyle.ts

@@ -0,0 +1,37 @@
+import { safeCssProperties } from "./safeCssProperties";
+
+/**
+ * Checks if a CSS string contains valid style declarations.
+ * 
+ * @param cssString - The CSS string to validate.
+ * @param validProperties - An optional array of additional valid CSS properties.
+ * @returns A boolean indicating whether the CSS string is valid.
+ */
+export const isValidStyle = (cssString: string, validProperties?: string[]): boolean => {
+    // Combine safeCssProperties with any additional valid properties provided
+    const combinedProperties = [...safeCssProperties, ...(validProperties || [])];
+    const cssProperties: Set<string> = new Set(combinedProperties.map(prop => 
+        // Assuming safeCssProperties are in camelCase, convert them back to kebab-case for comparison
+        prop.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+    ));
+
+    cssString = cssString.trim();
+    if (!cssString) return false; // Early return for an empty string
+
+    // Splitting CSS string into declarations
+    const declarations = cssString.split(';').filter(decl => decl.trim());
+
+    // Ensuring CSS string ends with a semicolon
+    if (cssString && !cssString.endsWith(';')) return false;
+
+    for (const decl of declarations) {
+        const parts = decl.split(':').map(part => part.trim());
+        if (parts.length !== 2) return false; // Incorrect syntax
+
+        const [property, value] = parts;
+        // Check if the property is valid and the value is not empty
+        if (!cssProperties.has(property) || !value) return false; // Invalid property or value
+    }
+
+    return true; // All declarations are valid
+};

src/isValidStyle.ts

@@ -0,0 +1,74 @@
+export const safeCssProperties: string[] = [
+    "align-items",
+    "align-self",
+    "align-content",
+    "aspect-ratio",
+    "backface-visibility",
+    "border-bottom-width",
+    "border-end-width",
+    "border-left-width",
+    "border-right-width",
+    "border-start-width",
+    "border-top-width",
+    "border-width",
+    "bottom",
+    "color",
+    "display",
+    "elevation",
+    "flex",
+    "flex-basis",
+    "flex-direction",
+    "flex-grow",
+    "flex-shrink",
+    "flex-wrap",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "height",
+    "justify-content",
+    "left",
+    "letter-spacing",
+    "line-height",
+    "margin",
+    "margin-bottom",
+    "margin-end",
+    "margin-horizontal",
+    "margin-left",
+    "margin-right",
+    "margin-start",
+    "margin-top",
+    "margin-vertical",
+    "max-height",
+    "max-width",
+    "min-height",
+    "min-width",
+    "opacity",
+    "overflow",
+    "padding",
+    "padding-bottom",
+    "padding-end",
+    "padding-horizontal",
+    "padding-left",
+    "padding-right",
+    "padding-start",
+    "padding-top",
+    "padding-vertical",
+    "position",
+    "right",
+    "text-align",
+    "text-decoration",
+    "text-decoration-color",
+    "text-decoration-line",
+    "text-decoration-style",
+    "text-shadow-color",
+    "text-shadow-offset",
+    "text-shadow-radius",
+    "text-transform",
+    "top",
+    "width",
+    "z-index",
+    // Add more properties as needed
+  ];
+  
+