feat(preset-mini): support (flex|grid)-(items|justify)-*

packages/preset-mini/src/_rules/default.ts

@@ -7,7 +7,7 @@ import { fonts, tabSizes, textIndents, textShadows, textStrokes } from './typogr
 import { gaps } from './gap'
 import { grids } from './grid'
 import { overflows } from './layout'
-import { alignments, boxSizing, floats, insets, justifies, orders, placements, positions, zIndexes } from './position'
+import { alignments, boxSizing, flexGridJustifiesAlignments, floats, insets, justifies, orders, placements, positions, zIndexes } from './position'
 import { rings } from './ring'
 import { boxShadows } from './shadow'
 import { aspectRatio, sizes } from './size'
@@ -69,6 +69,7 @@ export const rules: Rule[] = [
   justifies,
   alignments,
   placements,
+  flexGridJustifiesAlignments,
   insets,
   floats,
   zIndexes,

packages/preset-mini/src/_rules/position.ts

@@ -1,4 +1,4 @@
-import type { CSSEntries, Rule, RuleContext } from '@unocss/core'
+import type { CSSEntries, Rule, RuleContext, StaticRule } from '@unocss/core'
 import type { Theme } from '../theme'
 import { globalKeywords, handler as h, insetMap, makeGlobalStaticRules } from '../utils'
 
@@ -8,7 +8,7 @@ export const positions: Rule[] = [
   [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })],
 ]
 
-export const justifies: Rule[] = [
+export const justifies: StaticRule[] = [
   // contents
   ['justify-start', { 'justify-content': 'flex-start' }],
   ['justify-end', { 'justify-content': 'flex-end' }],
@@ -41,7 +41,7 @@ export const orders: Rule[] = [
   ['order-none', { order: '0' }],
 ]
 
-export const alignments: Rule[] = [
+export const alignments: StaticRule[] = [
   // contents
   ['content-center', { 'align-content': 'center' }],
   ['content-start', { 'align-content': 'flex-start' }],
@@ -96,6 +96,16 @@ export const placements: Rule[] = [
   ...makeGlobalStaticRules('place-self'),
 ]
 
+/**
+ * This is to add `flex-` and `grid-` prefix to the alignment rules,
+ * supporting `flex="~ items-center"` in attributify mode.
+ */
+export const flexGridJustifiesAlignments = [...justifies, ...alignments]
+  .flatMap(([k, v]): StaticRule[] => [
+    [`flex-${k}`, v],
+    [`grid-${k}`, v],
+  ])
+
 function handleInsetValue(v: string, { theme }: RuleContext<Theme>): string | number | undefined {
   return theme.spacing?.[v] ?? h.bracket.cssvar.global.auto.fraction.rem(v)
 }

packages/preset-mini/src/_utils/utilities.ts

@@ -1,4 +1,4 @@
-import type { CSSEntries, CSSObject, DynamicMatcher, ParsedColorValue, Rule, RuleContext, VariantContext } from '@unocss/core'
+import type { CSSEntries, CSSObject, DynamicMatcher, ParsedColorValue, RuleContext, StaticRule, VariantContext } from '@unocss/core'
 import { isString, toArray } from '@unocss/core'
 import type { Theme } from '../theme'
 import { colorOpacityToString, colorToString, parseCssColor } from './colors'
@@ -231,8 +231,8 @@ export function resolveVerticalBreakpoints({ theme, generator }: Readonly<Varian
   return verticalBreakpoints
 }
 
-export function makeGlobalStaticRules(prefix: string, property?: string) {
-  return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }] as Rule)
+export function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[] {
+  return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }])
 }
 
 export function getBracket(str: string, open: string, close: string) {

packages/preset-wind/src/rules/default.ts

@@ -1,62 +1,5 @@
 import type { Rule } from '@unocss/core'
-import {
-  alignments,
-  appearance,
-  appearances,
-  aspectRatio,
-  bgColors,
-  borders,
-  boxShadows,
-  boxSizing,
-  containerParent,
-  contains,
-  contentVisibility,
-  contents,
-  cssProperty,
-  cursors,
-  displays,
-  flex,
-  floats,
-  fontSmoothings,
-  fontStyles,
-  fonts,
-  gaps,
-  grids,
-  insets,
-  justifies,
-  margins,
-  cssVariables as miniCssVariables,
-  textTransforms as miniTextTransforms,
-  opacity,
-  orders,
-  outline,
-  overflows,
-  paddings,
-  placements,
-  pointerEvents,
-  positions,
-  questionMark,
-  resizes,
-  rings,
-  sizes,
-  svgUtilities,
-  tabSizes,
-  textAligns,
-  textColors,
-  textDecorations,
-  textIndents,
-  textOverflows,
-  textShadows,
-  textStrokes,
-  transforms,
-  transitions,
-  userSelects,
-  verticalAligns,
-  whitespaces,
-  willChange,
-  breaks as wordBreaks,
-  zIndexes,
-} from '@unocss/preset-mini/rules'
+import * as _ from '@unocss/preset-mini/rules'
 import { container } from './container'
 import { backgroundStyles } from './background'
 import { filters } from './filters'
@@ -74,92 +17,95 @@ import { scrolls } from './scrolls'
 import { columns } from './columns'
 import { placeholders } from './placeholder'
 
+// _. indicates that the rule is from @unocss/preset-mini
+
 export const rules: Rule[] = [
-  miniCssVariables,
+  _.cssVariables,
   cssVariables,
-  cssProperty,
+  _.cssProperty,
   container,
-  contains,
+  _.contains,
   screenReadersAccess,
-  pointerEvents,
-  appearances,
-  positions,
-  insets,
+  _.pointerEvents,
+  _.appearances,
+  _.positions,
+  _.insets,
   lineClamps,
   isolations,
-  zIndexes,
-  orders,
-  grids,
-  floats,
-  margins,
-  boxSizing,
-  displays,
-  aspectRatio,
-  sizes,
-  flex,
+  _.zIndexes,
+  _.orders,
+  _.grids,
+  _.floats,
+  _.margins,
+  _.boxSizing,
+  _.displays,
+  _.aspectRatio,
+  _.sizes,
+  _.flex,
   tables,
-  transforms,
+  _.transforms,
   animations,
-  cursors,
+  _.cursors,
   touchActions,
-  userSelects,
-  resizes,
+  _.userSelects,
+  _.resizes,
   scrolls,
   listStyle,
-  appearance,
+  _.appearance,
   columns,
-  placements,
-  alignments,
-  justifies,
-  gaps,
+  _.placements,
+  _.alignments,
+  _.justifies,
+  _.gaps,
+  _.flexGridJustifiesAlignments,
   spaces,
   divides,
-  overflows,
+  _.overflows,
   overscrolls,
   scrollBehaviors,
-  textOverflows,
-  whitespaces,
-  wordBreaks,
-  borders,
-  bgColors,
+  _.textOverflows,
+  _.whitespaces,
+  _.breaks,
+  _.borders,
+  _.bgColors,
   backgroundStyles,
-  svgUtilities,
+  _.svgUtilities,
   objectPositions,
-  paddings,
-  textAligns,
-  textIndents,
-  verticalAligns,
-  fonts,
-  miniTextTransforms,
+  _.paddings,
+  _.textAligns,
+  _.textIndents,
+  _.verticalAligns,
+  _.fonts,
+  _.textTransforms,
   textTransforms,
-  fontStyles,
+  _.fontStyles,
   fontVariantNumeric,
-  textColors,
-  textDecorations,
-  fontSmoothings,
-  tabSizes,
-  textStrokes,
-  textShadows,
+  _.textColors,
+  _.textDecorations,
+  _.fontSmoothings,
+  _.tabSizes,
+  _.textStrokes,
+  _.textShadows,
   hyphens,
   writingModes,
   writingOrientations,
   carets,
   accents,
-  opacity,
+  _.opacity,
   backgroundBlendModes,
   mixBlendModes,
-  boxShadows,
-  outline,
-  rings,
+  _.boxShadows,
+  _.outline,
+  _.rings,
   imageRenderings,
   filters,
-  transitions,
-  willChange,
-  contentVisibility,
-  contents,
+  _.transitions,
+  _.willChange,
+  _.contentVisibility,
+  _.contents,
   placeholders,
-  containerParent,
+  _.containerParent,
 
   // should be the last
-  questionMark,
+  _.questionMark,
 ].flat(1)

test/__snapshots__/autocomplete.test.ts.snap

@@ -34,7 +34,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "divide-": "divide-amber divide-black divide-block divide-block-reverse divide-blue divide-bluegray divide-blueGray divide-coolgray divide-coolGray divide-current",
   "fill-": "fill-amber fill-black fill-blue fill-bluegray fill-blueGray fill-coolgray fill-coolGray fill-current fill-cyan fill-dark",
   "filter-": "filter-drop filter-drop-shadow filter-drop-shadow-color filter-grayscale filter-inherit filter-initial filter-invert filter-none filter-revert filter-revert-layer",
-  "fle": "flex flex-1 flex-auto flex-col flex-col-reverse flex-initial flex-inline flex-none flex-nowrap flex-row",
+  "fle": "flex flex-1 flex-auto flex-col flex-col-reverse flex-content-around flex-content-between flex-content-center flex-content-end flex-content-evenly",
   "font-": "font-100 font-200 font-300 font-400 font-500 font-600 font-700 font-800 font-900 font-black",
   "grid-auto-flow-": "grid-auto-flow-col grid-auto-flow-col-dense grid-auto-flow-dense grid-auto-flow-row grid-auto-flow-row-dense",
   "grid-auto-rows-": "grid-auto-rows-0 grid-auto-rows-1 grid-auto-rows-2 grid-auto-rows-3 grid-auto-rows-4 grid-auto-rows-5 grid-auto-rows-6 grid-auto-rows-8 grid-auto-rows-10 grid-auto-rows-12",

test/__snapshots__/preset-attributify.test.ts.snap

@@ -33,6 +33,8 @@ exports[`attributify > variant 1`] = `
   "!leading-4",
   "!flex",
   "flex-col",
+  "flex-items-center",
+  "flex-justify-center",
   "p-t-2",
   "pt-2",
   "border-rounded-xl",

test/cases/preset-attributify/case-1/input.html

@@ -8,7 +8,7 @@
   bg="blue-400 hover:blue-500 dark:!blue-500 dark:hover:blue-600"
   text="sm white"
   !leading-4
-  flex="!~ col"
+  flex="!~ col items-center justify-center"
   p="t-2"
   pt="2"
   border="rounded-xl x-1 x-style-dashed"

test/cases/preset-attributify/case-1/output.css

@@ -19,6 +19,8 @@
 [rotate-30=""]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:30deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [rotate-60=""]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:60deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [transform=""]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+[flex~="justify-center"]{justify-content:center;}
+[flex~="items-center"]{align-items:center;}
 [border~="\32 "]{border-width:2px;}
 [border~="x-1"]{border-left-width:1px;border-right-width:1px;}
 [border~="blue-200"]{--un-border-opacity:1;border-color:rgba(191,219,254,var(--un-border-opacity));}

test/preset-attributify.test.ts

@@ -40,7 +40,7 @@ describe('attributify', async () => {
     for (const [path, input] of Object.entries(cases)) {
       test(path, async () => {
         const { css } = await uno.generate(await input(), { preflights: false })
-        expect(css).toMatchFileSnapshot(path.replace('input.html', 'output.css'))
+        await expect(css).toMatchFileSnapshot(path.replace('input.html', 'output.css'))
       })
     }
   })