Skip to content

Commit e4154e0

Browse files
KrisBraunTheAlexLichter
KrisBraun
and
TheAlexLichter
authored
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>
1 parent e3c5c11 commit e4154e0

File tree

6 files changed

+173
-48
lines changed

6 files changed

+173
-48
lines changed

‎src/corePlugins.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2926,6 +2926,48 @@ export let corePlugins = {
29262926
{ filterDefault: true }
29272927
),
29282928
willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
2929+
contain: ({ addDefaults, addUtilities }) => {
2930+
let cssContainValue =
2931+
'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'
2932+
2933+
addDefaults('contain', {
2934+
'--tw-contain-size': ' ',
2935+
'--tw-contain-layout': ' ',
2936+
'--tw-contain-paint': ' ',
2937+
'--tw-contain-style': ' ',
2938+
})
2939+
2940+
addUtilities({
2941+
'.contain-none': { contain: 'none' },
2942+
'.contain-content': { contain: 'content' },
2943+
'.contain-strict': { contain: 'strict' },
2944+
'.contain-size': {
2945+
'@defaults contain': {},
2946+
'--tw-contain-size': 'size',
2947+
contain: cssContainValue,
2948+
},
2949+
'.contain-inline-size': {
2950+
'@defaults contain': {},
2951+
'--tw-contain-size': 'inline-size',
2952+
contain: cssContainValue,
2953+
},
2954+
'.contain-layout': {
2955+
'@defaults contain': {},
2956+
'--tw-contain-layout': 'layout',
2957+
contain: cssContainValue,
2958+
},
2959+
'.contain-paint': {
2960+
'@defaults contain': {},
2961+
'--tw-contain-paint': 'paint',
2962+
contain: cssContainValue,
2963+
},
2964+
'.contain-style': {
2965+
'@defaults contain': {},
2966+
'--tw-contain-style': 'style',
2967+
contain: cssContainValue,
2968+
},
2969+
})
2970+
},
29292971
content: createUtilityPlugin('content', [
29302972
['content', ['--tw-content', ['content', 'var(--tw-content)']]],
29312973
]),

‎tests/plugins/__snapshots__/contain.test.js.snap‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`should test the 'contain' plugin 1`] = `
4+
"
5+
*, :before, :after {
6+
--tw-contain-size: ;
7+
--tw-contain-layout: ;
8+
--tw-contain-paint: ;
9+
--tw-contain-style: ;
10+
}
11+
12+
::backdrop {
13+
--tw-contain-size: ;
14+
--tw-contain-layout: ;
15+
--tw-contain-paint: ;
16+
--tw-contain-style: ;
17+
}
18+
19+
.contain-none {
20+
contain: none;
21+
}
22+
23+
.contain-content {
24+
contain: content;
25+
}
26+
27+
.contain-strict {
28+
contain: strict;
29+
}
30+
31+
.contain-size {
32+
--tw-contain-size: size;
33+
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
34+
}
35+
36+
.contain-inline-size {
37+
--tw-contain-size: inline-size;
38+
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
39+
}
40+
41+
.contain-layout {
42+
--tw-contain-layout: layout;
43+
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
44+
}
45+
46+
.contain-paint {
47+
--tw-contain-paint: paint;
48+
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
49+
}
50+
51+
.contain-style {
52+
--tw-contain-style: style;
53+
contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
54+
}
55+
"
56+
`;

‎tests/plugins/contain.test.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { quickPluginTest } from '../util/run'
2+
3+
quickPluginTest('contain').toMatchSnapshot()

‎tests/source-maps.test.js‎

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -291,56 +291,64 @@ test('preflight + base have source maps', async () => {
291291
"243:2-25 -> 243:2-25",
292292
"244:2-26 -> 244:2-26",
293293
"245:2-23 -> 245:2-23",
294-
"246:0 -> 246:0",
295-
"248:0 -> 248:0",
296-
"249:2-26 -> 249:2-26",
297-
"250:2-26 -> 250:2-26",
298-
"251:2-21 -> 251:2-21",
299-
"252:2-21 -> 252:2-21",
300-
"253:2-16 -> 253:2-16",
301-
"254:2-16 -> 254:2-16",
302-
"255:2-16 -> 255:2-16",
303-
"256:2-17 -> 256:2-17",
304-
"257:2-17 -> 257:2-17",
305-
"258:2-14 -> 258:2-14",
306-
"259:2-14 -> 259:2-14",
307-
"260:2-19 -> 260:2-19",
308-
"261:2-40 -> 261:2-40",
309-
"262:2-31 -> 262:2-31",
310-
"263:2-30 -> 263:2-30",
311-
"264:2-29 -> 264:2-29",
312-
"265:2-16 -> 265:2-16",
313-
"266:2-21 -> 266:2-21",
314-
"267:2-23 -> 267:2-23",
315-
"268:2-24 -> 268:2-24",
316-
"269:2-25 -> 269:2-25",
317-
"270:2-19 -> 270:2-19",
318-
"271:2-29 -> 271:2-29",
319-
"272:2-30 -> 272:2-30",
320-
"273:2-28 -> 273:2-28",
321-
"274:2-36 -> 274:2-36",
294+
"246:2-21 -> 246:2-21",
295+
"247:2-23 -> 247:2-23",
296+
"248:2-22 -> 248:2-22",
297+
"249:2-22 -> 249:2-22",
298+
"250:0 -> 250:0",
299+
"252:0 -> 252:0",
300+
"253:2-26 -> 253:2-26",
301+
"254:2-26 -> 254:2-26",
302+
"255:2-21 -> 255:2-21",
303+
"256:2-21 -> 256:2-21",
304+
"257:2-16 -> 257:2-16",
305+
"258:2-16 -> 258:2-16",
306+
"259:2-16 -> 259:2-16",
307+
"260:2-17 -> 260:2-17",
308+
"261:2-17 -> 261:2-17",
309+
"262:2-14 -> 262:2-14",
310+
"263:2-14 -> 263:2-14",
311+
"264:2-19 -> 264:2-19",
312+
"265:2-40 -> 265:2-40",
313+
"266:2-31 -> 266:2-31",
314+
"267:2-30 -> 267:2-30",
315+
"268:2-29 -> 268:2-29",
316+
"269:2-16 -> 269:2-16",
317+
"270:2-21 -> 270:2-21",
318+
"271:2-23 -> 271:2-23",
319+
"272:2-24 -> 272:2-24",
320+
"273:2-25 -> 273:2-25",
321+
"274:2-19 -> 274:2-19",
322322
"275:2-29 -> 275:2-29",
323-
"276:2-24 -> 276:2-24",
324-
"277:2-32 -> 277:2-32",
325-
"278:2-13 -> 278:2-13",
326-
"279:2-19 -> 279:2-19",
327-
"280:2-17 -> 280:2-17",
328-
"281:2-18 -> 281:2-18",
329-
"282:2-19 -> 282:2-19",
330-
"283:2-15 -> 283:2-15",
323+
"276:2-30 -> 276:2-30",
324+
"277:2-28 -> 277:2-28",
325+
"278:2-36 -> 278:2-36",
326+
"279:2-29 -> 279:2-29",
327+
"280:2-24 -> 280:2-24",
328+
"281:2-32 -> 281:2-32",
329+
"282:2-13 -> 282:2-13",
330+
"283:2-19 -> 283:2-19",
331331
"284:2-17 -> 284:2-17",
332-
"285:2-14 -> 285:2-14",
333-
"286:2-20 -> 286:2-20",
334-
"287:2-22 -> 287:2-22",
335-
"288:2-28 -> 288:2-28",
336-
"289:2-26 -> 289:2-26",
337-
"290:2-27 -> 290:2-27",
338-
"291:2-28 -> 291:2-28",
339-
"292:2-24 -> 292:2-24",
340-
"293:2-25 -> 293:2-25",
341-
"294:2-26 -> 294:2-26",
342-
"295:2-23 -> 295:2-23",
343-
"296:0 -> 296:0",
332+
"285:2-18 -> 285:2-18",
333+
"286:2-19 -> 286:2-19",
334+
"287:2-15 -> 287:2-15",
335+
"288:2-17 -> 288:2-17",
336+
"289:2-14 -> 289:2-14",
337+
"290:2-20 -> 290:2-20",
338+
"291:2-22 -> 291:2-22",
339+
"292:2-28 -> 292:2-28",
340+
"293:2-26 -> 293:2-26",
341+
"294:2-27 -> 294:2-27",
342+
"295:2-28 -> 295:2-28",
343+
"296:2-24 -> 296:2-24",
344+
"297:2-25 -> 297:2-25",
345+
"298:2-26 -> 298:2-26",
346+
"299:2-23 -> 299:2-23",
347+
"300:2-21 -> 300:2-21",
348+
"301:2-23 -> 301:2-23",
349+
"302:2-22 -> 302:2-22",
350+
"303:2-22 -> 303:2-22",
351+
"304:0 -> 304:0",
344352
]
345353
`)
346354
})

‎tests/util/defaults.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
5757
--tw-backdrop-opacity: ;
5858
--tw-backdrop-saturate: ;
5959
--tw-backdrop-sepia: ;
60+
--tw-contain-size: ;
61+
--tw-contain-layout: ;
62+
--tw-contain-paint: ;
63+
--tw-contain-style: ;
6064
}
6165
6266
::backdrop {
@@ -107,6 +111,10 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
107111
--tw-backdrop-opacity: ;
108112
--tw-backdrop-saturate: ;
109113
--tw-backdrop-sepia: ;
114+
--tw-contain-size: ;
115+
--tw-contain-layout: ;
116+
--tw-contain-paint: ;
117+
--tw-contain-style: ;
110118
}
111119
`
112120
}

‎tests/variants.test.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@
4848
--tw-backdrop-opacity: ;
4949
--tw-backdrop-saturate: ;
5050
--tw-backdrop-sepia: ;
51+
--tw-contain-size: ;
52+
--tw-contain-layout: ;
53+
--tw-contain-paint: ;
54+
--tw-contain-style: ;
5155
}
5256
::backdrop {
5357
--tw-border-spacing-x: 0;
@@ -97,6 +101,10 @@
97101
--tw-backdrop-opacity: ;
98102
--tw-backdrop-saturate: ;
99103
--tw-backdrop-sepia: ;
104+
--tw-contain-size: ;
105+
--tw-contain-layout: ;
106+
--tw-contain-paint: ;
107+
--tw-contain-style: ;
100108
}
101109
.first-letter\:flex:first-letter,
102110
.first-line\:flex:first-line,

0 commit comments

Comments
 (0)