feat: add contain utilities (#12993)
* feat: add contain utilities * chore: lint * Support mulptiple contain properites Support multiple contain properties, such as "contain-size contain-layout". Drop contain-unset as we haven't added -unset variants for other utilities. * Update Vite; fix test regex Vite is generating files like "index--T9oO-MP.css", which required relaxing the regex used in tests. --------- Co-authored-by: Alexander <github@lichter.io>
This commit is contained in:
Kris Braun
GitHub
parent
e3c5c11474
commit
e4154e0086
6 changed files with 173 additions and 48 deletions
|
|
@ -2926,6 +2926,48 @@ export let corePlugins = {
|
|||
{ filterDefault: true }
|
||||
),
|
||||
willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
|
||||
contain: ({ addDefaults, addUtilities }) => {
|
||||
let cssContainValue =
|
||||
'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'
|
||||
|
||||
addDefaults('contain', {
|
||||
'--tw-contain-size': ' ',
|
||||
'--tw-contain-layout': ' ',
|
||||
'--tw-contain-paint': ' ',
|
||||
'--tw-contain-style': ' ',
|
||||
})
|
||||
|
||||
addUtilities({
|
||||
'.contain-none': { contain: 'none' },
|
||||
'.contain-content': { contain: 'content' },
|
||||
'.contain-strict': { contain: 'strict' },
|
||||
'.contain-size': {
|
||||
'@defaults contain': {},
|
||||
'--tw-contain-size': 'size',
|
||||
contain: cssContainValue,
|
||||
},
|
||||
'.contain-inline-size': {
|
||||
'@defaults contain': {},
|
||||
'--tw-contain-size': 'inline-size',
|
||||
contain: cssContainValue,
|
||||
},
|
||||
'.contain-layout': {
|
||||
'@defaults contain': {},
|
||||
'--tw-contain-layout': 'layout',
|
||||
contain: cssContainValue,
|
||||
},
|
||||
'.contain-paint': {
|
||||
'@defaults contain': {},
|
||||
'--tw-contain-paint': 'paint',
|
||||
contain: cssContainValue,
|
||||
},
|
||||
'.contain-style': {
|
||||
'@defaults contain': {},
|
||||
'--tw-contain-style': 'style',
|
||||
contain: cssContainValue,
|
||||
},
|
||||
})
|
||||
},
|
||||
content: createUtilityPlugin('content', [
|
||||
['content', ['--tw-content', ['content', 'var(--tw-content)']]],
|
||||
]),
|
||||
|
|
|
|||
56
tests/plugins/__snapshots__/contain.test.js.snap
Normal file
56
tests/plugins/__snapshots__/contain.test.js.snap
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should test the 'contain' plugin 1`] = `
|
||||
"
|
||||
*, :before, :after {
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
.contain-none {
|
||||
contain: none;
|
||||
}
|
||||
|
||||
.contain-content {
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.contain-strict {
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.contain-size {
|
||||
--tw-contain-size: size;
|
||||
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
|
||||
}
|
||||
|
||||
.contain-inline-size {
|
||||
--tw-contain-size: inline-size;
|
||||
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
|
||||
}
|
||||
|
||||
.contain-layout {
|
||||
--tw-contain-layout: layout;
|
||||
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
|
||||
}
|
||||
|
||||
.contain-paint {
|
||||
--tw-contain-paint: paint;
|
||||
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
|
||||
}
|
||||
|
||||
.contain-style {
|
||||
--tw-contain-style: style;
|
||||
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
|
||||
}
|
||||
"
|
||||
`;
|
||||
3
tests/plugins/contain.test.js
Normal file
3
tests/plugins/contain.test.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { quickPluginTest } from '../util/run'
|
||||
|
||||
quickPluginTest('contain').toMatchSnapshot()
|
||||
|
|
@ -291,56 +291,64 @@ test('preflight + base have source maps', async () => {
|
|||
"243:2-25 -> 243:2-25",
|
||||
"244:2-26 -> 244:2-26",
|
||||
"245:2-23 -> 245:2-23",
|
||||
"246:0 -> 246:0",
|
||||
"248:0 -> 248:0",
|
||||
"249:2-26 -> 249:2-26",
|
||||
"250:2-26 -> 250:2-26",
|
||||
"251:2-21 -> 251:2-21",
|
||||
"252:2-21 -> 252:2-21",
|
||||
"253:2-16 -> 253:2-16",
|
||||
"254:2-16 -> 254:2-16",
|
||||
"255:2-16 -> 255:2-16",
|
||||
"256:2-17 -> 256:2-17",
|
||||
"257:2-17 -> 257:2-17",
|
||||
"258:2-14 -> 258:2-14",
|
||||
"259:2-14 -> 259:2-14",
|
||||
"260:2-19 -> 260:2-19",
|
||||
"261:2-40 -> 261:2-40",
|
||||
"262:2-31 -> 262:2-31",
|
||||
"263:2-30 -> 263:2-30",
|
||||
"264:2-29 -> 264:2-29",
|
||||
"265:2-16 -> 265:2-16",
|
||||
"266:2-21 -> 266:2-21",
|
||||
"267:2-23 -> 267:2-23",
|
||||
"268:2-24 -> 268:2-24",
|
||||
"269:2-25 -> 269:2-25",
|
||||
"270:2-19 -> 270:2-19",
|
||||
"271:2-29 -> 271:2-29",
|
||||
"272:2-30 -> 272:2-30",
|
||||
"273:2-28 -> 273:2-28",
|
||||
"274:2-36 -> 274:2-36",
|
||||
"246:2-21 -> 246:2-21",
|
||||
"247:2-23 -> 247:2-23",
|
||||
"248:2-22 -> 248:2-22",
|
||||
"249:2-22 -> 249:2-22",
|
||||
"250:0 -> 250:0",
|
||||
"252:0 -> 252:0",
|
||||
"253:2-26 -> 253:2-26",
|
||||
"254:2-26 -> 254:2-26",
|
||||
"255:2-21 -> 255:2-21",
|
||||
"256:2-21 -> 256:2-21",
|
||||
"257:2-16 -> 257:2-16",
|
||||
"258:2-16 -> 258:2-16",
|
||||
"259:2-16 -> 259:2-16",
|
||||
"260:2-17 -> 260:2-17",
|
||||
"261:2-17 -> 261:2-17",
|
||||
"262:2-14 -> 262:2-14",
|
||||
"263:2-14 -> 263:2-14",
|
||||
"264:2-19 -> 264:2-19",
|
||||
"265:2-40 -> 265:2-40",
|
||||
"266:2-31 -> 266:2-31",
|
||||
"267:2-30 -> 267:2-30",
|
||||
"268:2-29 -> 268:2-29",
|
||||
"269:2-16 -> 269:2-16",
|
||||
"270:2-21 -> 270:2-21",
|
||||
"271:2-23 -> 271:2-23",
|
||||
"272:2-24 -> 272:2-24",
|
||||
"273:2-25 -> 273:2-25",
|
||||
"274:2-19 -> 274:2-19",
|
||||
"275:2-29 -> 275:2-29",
|
||||
"276:2-24 -> 276:2-24",
|
||||
"277:2-32 -> 277:2-32",
|
||||
"278:2-13 -> 278:2-13",
|
||||
"279:2-19 -> 279:2-19",
|
||||
"280:2-17 -> 280:2-17",
|
||||
"281:2-18 -> 281:2-18",
|
||||
"282:2-19 -> 282:2-19",
|
||||
"283:2-15 -> 283:2-15",
|
||||
"276:2-30 -> 276:2-30",
|
||||
"277:2-28 -> 277:2-28",
|
||||
"278:2-36 -> 278:2-36",
|
||||
"279:2-29 -> 279:2-29",
|
||||
"280:2-24 -> 280:2-24",
|
||||
"281:2-32 -> 281:2-32",
|
||||
"282:2-13 -> 282:2-13",
|
||||
"283:2-19 -> 283:2-19",
|
||||
"284:2-17 -> 284:2-17",
|
||||
"285:2-14 -> 285:2-14",
|
||||
"286:2-20 -> 286:2-20",
|
||||
"287:2-22 -> 287:2-22",
|
||||
"288:2-28 -> 288:2-28",
|
||||
"289:2-26 -> 289:2-26",
|
||||
"290:2-27 -> 290:2-27",
|
||||
"291:2-28 -> 291:2-28",
|
||||
"292:2-24 -> 292:2-24",
|
||||
"293:2-25 -> 293:2-25",
|
||||
"294:2-26 -> 294:2-26",
|
||||
"295:2-23 -> 295:2-23",
|
||||
"296:0 -> 296:0",
|
||||
"285:2-18 -> 285:2-18",
|
||||
"286:2-19 -> 286:2-19",
|
||||
"287:2-15 -> 287:2-15",
|
||||
"288:2-17 -> 288:2-17",
|
||||
"289:2-14 -> 289:2-14",
|
||||
"290:2-20 -> 290:2-20",
|
||||
"291:2-22 -> 291:2-22",
|
||||
"292:2-28 -> 292:2-28",
|
||||
"293:2-26 -> 293:2-26",
|
||||
"294:2-27 -> 294:2-27",
|
||||
"295:2-28 -> 295:2-28",
|
||||
"296:2-24 -> 296:2-24",
|
||||
"297:2-25 -> 297:2-25",
|
||||
"298:2-26 -> 298:2-26",
|
||||
"299:2-23 -> 299:2-23",
|
||||
"300:2-21 -> 300:2-21",
|
||||
"301:2-23 -> 301:2-23",
|
||||
"302:2-22 -> 302:2-22",
|
||||
"303:2-22 -> 303:2-22",
|
||||
"304:0 -> 304:0",
|
||||
]
|
||||
`)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -57,6 +57,10 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
|
|||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
|
|
@ -107,6 +111,10 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
|
|||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,10 @@
|
|||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
|
|
@ -97,6 +101,10 @@
|
|||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
.first-letter\:flex:first-letter,
|
||||
.first-line\:flex:first-line,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue