MCPcopy
hub / github.com/tailwindlabs/tailwindcss / maskEdgeUtility

Function maskEdgeUtility

packages/tailwindcss/src/utilities.ts:3358–3439  ·  view source on GitHub ↗
(name: string, stop: MaskStop, edges: Record<MaskEdge, boolean>)

Source from the content-addressed store, hash-verified

3356 type MaskStop = 'from' | 'to'
3357
3358 function maskEdgeUtility(name: string, stop: MaskStop, edges: Record<MaskEdge, boolean>) {
3359 maskStopUtility(name, {
3360 color(value) {
3361 let nodes: AstNode[] = [
3362 // Common @property declarations
3363 maskPropertiesGradient(),
3364 maskPropertiesEdge(),
3365
3366 // Common properties to all edge utilities
3367 decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
3368 decl('mask-composite', 'intersect'),
3369 decl(
3370 '--tw-mask-linear',
3371 'var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top)',
3372 ),
3373 ]
3374
3375 for (let edge of ['top', 'right', 'bottom', 'left'] as const) {
3376 if (!edges[edge]) continue
3377
3378 nodes.push(
3379 decl(
3380 `--tw-mask-${edge}`,
3381 `linear-gradient(to ${edge}, var(--tw-mask-${edge}-from-color) var(--tw-mask-${edge}-from-position), var(--tw-mask-${edge}-to-color) var(--tw-mask-${edge}-to-position))`,
3382 ),
3383 )
3384
3385 nodes.push(
3386 atRoot([
3387 property(`--tw-mask-${edge}-from-position`, '0%'),
3388 property(`--tw-mask-${edge}-to-position`, '100%'),
3389 property(`--tw-mask-${edge}-from-color`, 'black'),
3390 property(`--tw-mask-${edge}-to-color`, 'transparent'),
3391 ]),
3392 )
3393
3394 nodes.push(decl(`--tw-mask-${edge}-${stop}-color`, value))
3395 }
3396
3397 return nodes
3398 },
3399 position(value) {
3400 let nodes: AstNode[] = [
3401 // Common @property declarations
3402 maskPropertiesGradient(),
3403 maskPropertiesEdge(),
3404
3405 // Common properties to all edge utilities
3406 decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
3407 decl('mask-composite', 'intersect'),
3408 decl(
3409 '--tw-mask-linear',
3410 'var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top)',
3411 ),
3412 ]
3413
3414 for (let edge of ['top', 'right', 'bottom', 'left'] as const) {
3415 if (!edges[edge]) continue

Callers 1

createUtilitiesFunction · 0.85

Calls 1

maskStopUtilityFunction · 0.85

Tested by

no test coverage detected