Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(preset-mini): add contain (#1854)
  • Loading branch information
praburangki committed Nov 17, 2022
1 parent 2faa911 commit 448142a
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 1 deletion.
3 changes: 2 additions & 1 deletion packages/preset-mini/src/_rules/default.ts
Expand Up @@ -12,7 +12,7 @@ import { rings } from './ring'
import { boxShadows } from './shadow'
import { aspectRatio, sizes } from './size'
import { margins, paddings } from './spacing'
import { appearances, breaks, contentVisibility, contents, cursors, displays, fontSmoothings, fontStyles, pointerEvents, resizes, textOverflows, textTransforms, userSelects, whitespaces } from './static'
import { appearances, breaks, contains, contentVisibility, contents, cursors, displays, fontSmoothings, fontStyles, pointerEvents, resizes, textOverflows, textTransforms, userSelects, whitespaces } from './static'
import { transforms } from './transform'
import { cssProperty, cssVariables } from './variables'
import { questionMark } from './question-mark'
Expand Down Expand Up @@ -77,6 +77,7 @@ export const rules: Rule[] = [
transforms,
willChange,
containerParent,
contains,

// should be the last
questionMark,
Expand Down
13 changes: 13 additions & 0 deletions packages/preset-mini/src/_rules/static.ts
Expand Up @@ -2,6 +2,7 @@ import type { Rule } from '@unocss/core'
import { globalKeywords, handler as h, makeGlobalStaticRules } from '../utils'

const cursorValues = ['auto', 'default', 'none', 'context-menu', 'help', 'pointer', 'progress', 'wait', 'cell', 'crosshair', 'text', 'vertical-text', 'alias', 'copy', 'move', 'no-drop', 'not-allowed', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out']
const containValues = ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint']

export const varEmpty = ' '

Expand Down Expand Up @@ -30,6 +31,18 @@ export const cursors: Rule[] = [
...cursorValues.map((v): Rule => [`cursor-${v}`, { cursor: v }]),
]

export const contains: Rule[] = [
[/^contain-(.*)$/, ([, d]) => {
if (h.bracket(d) != null) {
return {
contain: h.bracket(d)!.split(' ').map(e => h.cssvar.fraction(e) ?? e).join(' '),
}
}

return containValues.includes(d) ? { contain: d } : undefined
}],
]

export const pointerEvents: Rule[] = [
['pointer-events-auto', { 'pointer-events': 'auto' }],
['pointer-events-none', { 'pointer-events': 'none' }],
Expand Down
3 changes: 3 additions & 0 deletions test/__snapshots__/preset-mini.test.ts.snap
Expand Up @@ -918,6 +918,9 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
.\\\\@container-normal{container-type:normal;}
.\\\\@container\\\\/label{container-type:inline-size;container-name:label;}
.\\\\@container\\\\/label-normal{container-type:normal;container-name:label;}
.contain-\\\\[size_layout_paint\\\\]{contain:size layout paint;}
.contain-\\\\[size_layout\\\\]{contain:size layout;}
.contain-layout{contain:layout;}
@container (min-width: 10.5rem){
.\\\\@\\\\[10\\\\.5rem\\\\]-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
Expand Down
3 changes: 3 additions & 0 deletions test/assets/preset-mini-targets.ts
Expand Up @@ -595,6 +595,9 @@ export const presetMiniTargets: string[] = [
'whitespace-unset',
'ws-nowrap',
'ws-revert',
'contain-layout',
'contain-[size_layout]',
'contain-[size_layout_paint]',

'break-normal',
'break-words',
Expand Down

0 comments on commit 448142a

Please sign in to comment.