chore: update aspect-ratio

hunghg255 · Sep 12, 2023 · fe10b08 · fe10b08
1 parent c51ac8e
commit fe10b08
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/__TEST__/index.test.ts b/__TEST__/index.test.ts
@@ -99,3 +99,23 @@ test('CSS to tailwindcss with variable', () => {
     ],
   });
 });
+
+test('CSS Aspect Ratio', () => {
+  const cssCode1 = `body {
+    aspect-ratio: auto;
+    aspect-ratio: 1 / 1;
+    aspect-ratio: 16 / 9;
+    aspect-ratio: 3 / 4;
+  }`;
+
+  expect(CssToTailwind(cssCode1)).toEqual({
+    code: 'OK',
+    data: [
+      {
+        resultVal: 'aspect-auto aspect-square aspect-video [aspect-ratio:3_/_4]',
+        selectorName: 'body',
+      },
+    ],
+  });
+});
+
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import { CssCodeParse, CustomSelect, CustomTheme, ResultCode, TranslatorConfig } from "./types";
-import { getBorderRadiusDefaultVal, getCustomVal, getFilterDefaultVal, getFontSizeDefaultVal, getRemDefaultVal, getUnitMetacharactersVal, hasNegative, isColor, isUnit } from "./utils";
+import { getBorderRadiusDefaultVal, getCustomVal, getFilterDefaultVal, getFontSizeDefaultVal, getRemDefaultVal, getUnitMetacharactersVal, hasNegative, isColor, isUnit, removeSpace } from "./utils";
 
 const specialAttribute = ['@charset', '@font-face', '@import', '@keyframes'];
 
@@ -83,7 +83,13 @@ const propertyMap: Map<
     (val) =>
       ({ none: 'appearance-none' }[val] ?? `[appearance:${getCustomVal(val)}]`),
   ],
-  ['aspect-ratio', (val) => `[aspect-ratio:${getCustomVal(val)}]`],
+  ['aspect-ratio', (val) => {
+    return {
+      auto: 'aspect-auto',
+      '1/1': 'aspect-square',
+      '16/9': 'aspect-video',
+    }[removeSpace(val)] ?? `[aspect-ratio:${getCustomVal(val)}]`;
+  }],
   [
     'backdrop-filter',
     (val) => {

diff --git a/src/utils.ts b/src/utils.ts
@@ -411,3 +411,7 @@ export const getFontSizeDefaultVal = (val: string) => {
 
   return fontSize[val] ?? `text-[${val}]`;
 };
+
+export const removeSpace = (str: string) => {
+  return str.replace(/\s/g, '');
+}