feat(preset-attributify): more complete type support for tsx (#1531)

unocss · Sep 3, 2022 · a1b3457 · a1b3457
1 parent 05a083e
commit a1b3457
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 23 deletions.
diff --git a/packages/preset-attributify/src/jsx.ts b/packages/preset-attributify/src/jsx.ts
@@ -1,4 +1,95 @@
-export type UtilityNames =
+export type TwoStringsCompositionPrefix =
+  | 'm'
+  | 'p'
+
+export type TwoStringsCompositionSuffix =
+  | 'r'
+  | 'b'
+  | 'l'
+  | 't'
+  | 'a'
+
+/** Some words can compose with two strings to become a complete unocss rule such as ha, mr, mb */
+export type TwoStringsComposition = `${TwoStringsCompositionPrefix}${TwoStringsCompositionSuffix}` | 'ha' | 'wa'
+
+/** Some words can be a complete unocss rule by itself */
+export type SpecialSingleWord =
+  | 'container'
+  | 'flex'
+  | 'block'
+  | 'inline'
+  | 'block'
+  | 'table'
+  | 'isolate'
+  | 'absolute'
+  | 'relative'
+  | 'fixed'
+  | 'sticky'
+  | 'static'
+  | 'visible'
+  | 'invisible'
+  | 'grow'
+  | 'shrink'
+  | 'antialiased'
+  | 'italic'
+  | 'ordinal'
+  | 'overline'
+  | 'underline'
+  | 'uppercase'
+  | 'lowercase'
+  | 'capitalize'
+  | 'truncate'
+  | 'border'
+  | 'rounded'
+  | 'outline'
+  | 'ring'
+  | 'shadow'
+  | 'blur'
+  | 'grayscale'
+  | 'invert'
+  | 'sepia'
+  | 'transition'
+  | 'resize'
+  | 'transform'
+  | 'filter'
+
+export type StringNumberCompositionPrefix =
+  | 'op'
+  | 'opacity'
+  | 'fw'
+  | 'p'
+  | 'm'
+  | 'w'
+  | 'h'
+  | 'z'
+
+/** Some words can be a complete unocss rule by compose a string and a number, such as op80, fw300, p2, p10px */
+export type StringNumberComposition = `${StringNumberCompositionPrefix}${number}${'px' | ''}`
+
+export type PseudoPrefix =
+  | 'active'
+  | 'before'
+  | 'after'
+  | 'dark'
+  | 'light'
+  | 'first'
+  | 'last'
+  | 'focus'
+  | 'hover'
+  | 'link'
+  | 'root'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | 'enabled'
+  | 'disabled'
+  | 'all'
+  | 'children'
+
+/** Some words can be used to separate utilities, such as font="mono light", text="sm white" */
+export type SeparateEnabled =
   | 'align'
   | 'animate'
   | 'backdrop'
@@ -40,30 +131,12 @@ export type UtilityNames =
   | 'underline'
   | 'w'
   | 'z'
+  | PseudoPrefix
 
-export type VariantNames =
-  | 'active'
-  | 'after'
-  | 'all'
-  | 'before'
-  | 'child'
-  | 'dark'
-  | 'enabled'
-  | 'first'
-  | 'focus'
-  | 'hover'
-  | 'last'
-  | 'lg'
-  | 'light'
-  | 'md'
-  | 'root'
-  | 'sm'
-  | 'xl'
-  | 'xxl'
+export type BasicAttributes = StringNumberComposition | SpecialSingleWord | TwoStringsComposition | SeparateEnabled
 
 export type AttributifyNames<Prefix extends string = ''> =
-  | `${Prefix}${UtilityNames}`
-  | `${Prefix}${VariantNames}`
-  | `${Prefix}${VariantNames}:${UtilityNames}`
+  | `${Prefix}${BasicAttributes}`
+  | `${Prefix}${PseudoPrefix}:${BasicAttributes}`
 
 export interface AttributifyAttributes extends Partial<Record<AttributifyNames, string | boolean>> {}
diff --git a/test/dts/jsx.test-d.tsx b/test/dts/jsx.test-d.tsx
@@ -8,6 +8,8 @@ function App() {
       <header className="m-4">
         <p>
           <button
+            ma flex absolute
+            op30 fw20 p1 m10px
             p="x-4 y-2"
             hover:p="0"
             hover="bg-teal-400 border-teal-400"