Merge pull request #6 from bkrmendy/rounded-corner-classes

Add support for rounded corner classes

Author: XEngine

package.json

@@ -16,7 +16,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "types": "./dist/tailwindcss-class-parser.es.d.ts",
   "main": "./dist/tailwindcss-class-parser.umd.cjs",

src/plugins.ts

@@ -148,6 +148,18 @@ export const functionalPlugins = new Map<string, FunctionalPlugin[]>([
     ["rounded", [
         {scaleKey: "borderRadius", ns: 'borderRadius', class: ['border-radius'], type: 'length'},
     ]],
+    ["rounded-tl", [
+        {scaleKey: "borderRadius", ns: 'borderTopLeftRadius', class: ['border-top-left-radius'], type: 'length'},
+    ]],
+    ["rounded-tr", [
+        {scaleKey: "borderRadius", ns: 'borderTopRightRadius', class: ['border-top-right-radius'], type: 'length'},
+    ]],
+    ["rounded-br", [
+        {scaleKey: "borderRadius", ns: 'borderBottomRightRadius', class: ['border-bottom-right-radius'], type: 'length'},
+    ]],
+    ["rounded-bl", [
+        {scaleKey: "borderRadius", ns: 'borderBottomLeftRadius', class: ['border-bottom-left-radius'], type: 'length'},
+    ]],
     ["flex", [
         {scaleKey: "flex", ns: 'flex', class: ['flex'], type: 'number'},
     ]],

test/parse.test.ts

@@ -150,4 +150,74 @@ it("w-1/2", () => {
             "arbitrary": false
         }
     )
-})
+})
+it("should parse rounded corner classes", () => {
+    expect(parse("rounded-tl-lg")).toEqual({
+        arbitrary: false,
+        important: false,
+        kind: "functional",
+        modifier: null,
+        negative: false,
+        property: "borderTopLeftRadius",
+        root: "rounded-tl",
+        value: "0.5rem",
+        valueDef: {
+            class: ["border-top-left-radius"],
+            kind: "length",
+            raw: "lg",
+            value: "0.5rem",
+        },
+        variants: [],
+    });
+    expect(parse("rounded-tr-lg")).toEqual({
+        arbitrary: false,
+        important: false,
+        kind: "functional",
+        modifier: null,
+        negative: false,
+        property: "borderTopRightRadius",
+        root: "rounded-tr",
+        value: "0.5rem",
+        valueDef: {
+            class: ["border-top-right-radius"],
+            kind: "length",
+            raw: "lg",
+            value: "0.5rem",
+        },
+        variants: [],
+    });
+    expect(parse("rounded-bl-lg")).toEqual({
+        arbitrary: false,
+        important: false,
+        kind: "functional",
+        modifier: null,
+        negative: false,
+        property: "borderBottomLeftRadius",
+        root: "rounded-bl",
+        value: "0.5rem",
+        valueDef: {
+            class: ["border-bottom-left-radius"],
+            kind: "length",
+            raw: "lg",
+            value: "0.5rem",
+        },
+        variants: [],
+    });
+    expect(parse("rounded-br-lg")).toEqual({
+        arbitrary: false,
+        important: false,
+        kind: "functional",
+        modifier: null,
+        negative: false,
+        property: "borderBottomRightRadius",
+        root: "rounded-br",
+        value: "0.5rem",
+        valueDef: {
+            class: ["border-bottom-right-radius"],
+            kind: "length",
+            raw: "lg",
+            value: "0.5rem",
+        },
+        variants: [],
+    });
+});