Skip to content

Commit fedad41

Browse files
dcastildcastil
committed
attempt to reduce bundle size impact of mask-image class groups
1 parent 5ab81b3 commit fedad41

File tree

1 file changed

+98
-36
lines changed

1 file changed

+98
-36
lines changed

‎src/lib/default-config.ts

Lines changed: 98 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1490,49 +1490,111 @@ export const getDefaultConfig = () => {
14901490
* @see https://tailwindcss.com/docs/mask-image
14911491
*/
14921492
'mask-image-linear-pos': [{ 'mask-linear': [isNumber] }],
1493-
'mask-image-linear-from-pos': [{ 'mask-linear-from': scaleMaskImagePosition() }],
1494-
'mask-image-linear-to-pos': [{ 'mask-linear-to': scaleMaskImagePosition() }],
1495-
'mask-image-linear-from-color': [{ 'mask-linear-from': scaleColor() }],
1496-
'mask-image-linear-to-color': [{ 'mask-linear-to': scaleColor() }],
1497-
'mask-image-t-from-pos': [{ 'mask-t-from': scaleMaskImagePosition() }],
1498-
'mask-image-t-to-pos': [{ 'mask-t-to': scaleMaskImagePosition() }],
1499-
'mask-image-t-from-color': [{ 'mask-t-from': scaleColor() }],
1500-
'mask-image-t-to-color': [{ 'mask-t-to': scaleColor() }],
1501-
'mask-image-r-from-pos': [{ 'mask-r-from': scaleMaskImagePosition() }],
1502-
'mask-image-r-to-pos': [{ 'mask-r-to': scaleMaskImagePosition() }],
1503-
'mask-image-r-from-color': [{ 'mask-r-from': scaleColor() }],
1504-
'mask-image-r-to-color': [{ 'mask-r-to': scaleColor() }],
1505-
'mask-image-b-from-pos': [{ 'mask-b-from': scaleMaskImagePosition() }],
1506-
'mask-image-b-to-pos': [{ 'mask-b-to': scaleMaskImagePosition() }],
1507-
'mask-image-b-from-color': [{ 'mask-b-from': scaleColor() }],
1508-
'mask-image-b-to-color': [{ 'mask-b-to': scaleColor() }],
1509-
'mask-image-l-from-pos': [{ 'mask-l-from': scaleMaskImagePosition() }],
1510-
'mask-image-l-to-pos': [{ 'mask-l-to': scaleMaskImagePosition() }],
1511-
'mask-image-l-from-color': [{ 'mask-l-from': scaleColor() }],
1512-
'mask-image-l-to-color': [{ 'mask-l-to': scaleColor() }],
1513-
'mask-image-x-from-pos': [{ 'mask-x-from': scaleMaskImagePosition() }],
1514-
'mask-image-x-to-pos': [{ 'mask-x-to': scaleMaskImagePosition() }],
1515-
'mask-image-x-from-color': [{ 'mask-x-from': scaleColor() }],
1516-
'mask-image-x-to-color': [{ 'mask-x-to': scaleColor() }],
1517-
'mask-image-y-from-pos': [{ 'mask-y-from': scaleMaskImagePosition() }],
1518-
'mask-image-y-to-pos': [{ 'mask-y-to': scaleMaskImagePosition() }],
1519-
'mask-image-y-from-color': [{ 'mask-y-from': scaleColor() }],
1520-
'mask-image-y-to-color': [{ 'mask-y-to': scaleColor() }],
15211493
'mask-image-radial': [{ 'mask-radial': [isArbitraryVariable, isArbitraryValue] }],
1522-
'mask-image-radial-from-pos': [{ 'mask-radial-from': scaleMaskImagePosition() }],
1523-
'mask-image-radial-to-pos': [{ 'mask-radial-to': scaleMaskImagePosition() }],
1524-
'mask-image-radial-from-color': [{ 'mask-radial-from': scaleColor() }],
1525-
'mask-image-radial-to-color': [{ 'mask-radial-to': scaleColor() }],
15261494
'mask-image-radial-shape': [{ 'mask-radial': ['circle', 'ellipse'] }],
15271495
'mask-image-radial-size': [
15281496
{ 'mask-radial': [{ closest: ['side', 'corner'], farthest: ['side', 'corner'] }] },
15291497
],
15301498
'mask-image-radial-pos': [{ 'mask-radial-at': scalePosition() }],
15311499
'mask-image-conic-pos': [{ 'mask-conic': [isNumber] }],
1532-
'mask-image-conic-from-pos': [{ 'mask-conic-from': scaleMaskImagePosition() }],
1533-
'mask-image-conic-to-pos': [{ 'mask-conic-to': scaleMaskImagePosition() }],
1534-
'mask-image-conic-from-color': [{ 'mask-conic-from': scaleColor() }],
1535-
'mask-image-conic-to-color': [{ 'mask-conic-to': scaleColor() }],
1500+
...(Object.fromEntries(
1501+
['linear', 't', 'r', 'b', 'l', 'x', 'y', 'radial', 'conic'].flatMap((value) => [
1502+
[
1503+
`mask-image-${value}-from-pos`,
1504+
[{ [`mask-${value}-from`]: scaleMaskImagePosition() }],
1505+
],
1506+
[
1507+
`mask-image-${value}-to-pos`,
1508+
[{ [`mask-${value}-to`]: scaleMaskImagePosition() }],
1509+
],
1510+
[`mask-image-${value}-from-color`, [{ [`mask-${value}-from`]: scaleColor() }]],
1511+
[`mask-image-${value}-to-color`, [{ [`mask-${value}-to`]: scaleColor() }]],
1512+
]),
1513+
) as {
1514+
// linear
1515+
'mask-image-linear-from-pos': [
1516+
{ 'mask-linear-from': ReturnType<typeof scaleMaskImagePosition> },
1517+
]
1518+
'mask-image-linear-to-pos': [
1519+
{ 'mask-linear-to': ReturnType<typeof scaleMaskImagePosition> },
1520+
]
1521+
'mask-image-linear-from-color': [
1522+
{ 'mask-linear-from': ReturnType<typeof scaleColor> },
1523+
]
1524+
'mask-image-linear-to-color': [{ 'mask-linear-to': ReturnType<typeof scaleColor> }]
1525+
1526+
// t
1527+
'mask-image-t-from-pos': [
1528+
{ 'mask-t-from': ReturnType<typeof scaleMaskImagePosition> },
1529+
]
1530+
'mask-image-t-to-pos': [{ 'mask-t-to': ReturnType<typeof scaleMaskImagePosition> }]
1531+
'mask-image-t-from-color': [{ 'mask-t-from': ReturnType<typeof scaleColor> }]
1532+
'mask-image-t-to-color': [{ 'mask-t-to': ReturnType<typeof scaleColor> }]
1533+
1534+
// r
1535+
'mask-image-r-from-pos': [
1536+
{ 'mask-r-from': ReturnType<typeof scaleMaskImagePosition> },
1537+
]
1538+
'mask-image-r-to-pos': [{ 'mask-r-to': ReturnType<typeof scaleMaskImagePosition> }]
1539+
'mask-image-r-from-color': [{ 'mask-r-from': ReturnType<typeof scaleColor> }]
1540+
'mask-image-r-to-color': [{ 'mask-r-to': ReturnType<typeof scaleColor> }]
1541+
1542+
// b
1543+
'mask-image-b-from-pos': [
1544+
{ 'mask-b-from': ReturnType<typeof scaleMaskImagePosition> },
1545+
]
1546+
'mask-image-b-to-pos': [{ 'mask-b-to': ReturnType<typeof scaleMaskImagePosition> }]
1547+
'mask-image-b-from-color': [{ 'mask-b-from': ReturnType<typeof scaleColor> }]
1548+
'mask-image-b-to-color': [{ 'mask-b-to': ReturnType<typeof scaleColor> }]
1549+
1550+
// l
1551+
'mask-image-l-from-pos': [
1552+
{ 'mask-l-from': ReturnType<typeof scaleMaskImagePosition> },
1553+
]
1554+
'mask-image-l-to-pos': [{ 'mask-l-to': ReturnType<typeof scaleMaskImagePosition> }]
1555+
'mask-image-l-from-color': [{ 'mask-l-from': ReturnType<typeof scaleColor> }]
1556+
'mask-image-l-to-color': [{ 'mask-l-to': ReturnType<typeof scaleColor> }]
1557+
1558+
// x
1559+
'mask-image-x-from-pos': [
1560+
{ 'mask-x-from': ReturnType<typeof scaleMaskImagePosition> },
1561+
]
1562+
'mask-image-x-to-pos': [{ 'mask-x-to': ReturnType<typeof scaleMaskImagePosition> }]
1563+
'mask-image-x-from-color': [{ 'mask-x-from': ReturnType<typeof scaleColor> }]
1564+
'mask-image-x-to-color': [{ 'mask-x-to': ReturnType<typeof scaleColor> }]
1565+
1566+
// y
1567+
'mask-image-y-from-pos': [
1568+
{ 'mask-y-from': ReturnType<typeof scaleMaskImagePosition> },
1569+
]
1570+
'mask-image-y-to-pos': [{ 'mask-y-to': ReturnType<typeof scaleMaskImagePosition> }]
1571+
'mask-image-y-from-color': [{ 'mask-y-from': ReturnType<typeof scaleColor> }]
1572+
'mask-image-y-to-color': [{ 'mask-y-to': ReturnType<typeof scaleColor> }]
1573+
1574+
// radial
1575+
'mask-image-radial-from-pos': [
1576+
{ 'mask-radial-from': ReturnType<typeof scaleMaskImagePosition> },
1577+
]
1578+
'mask-image-radial-to-pos': [
1579+
{ 'mask-radial-to': ReturnType<typeof scaleMaskImagePosition> },
1580+
]
1581+
'mask-image-radial-from-color': [
1582+
{ 'mask-radial-from': ReturnType<typeof scaleColor> },
1583+
]
1584+
'mask-image-radial-to-color': [{ 'mask-radial-to': ReturnType<typeof scaleColor> }]
1585+
1586+
// conic
1587+
'mask-image-conic-from-pos': [
1588+
{ 'mask-conic-from': ReturnType<typeof scaleMaskImagePosition> },
1589+
]
1590+
'mask-image-conic-to-pos': [
1591+
{ 'mask-conic-to': ReturnType<typeof scaleMaskImagePosition> },
1592+
]
1593+
'mask-image-conic-from-color': [
1594+
{ 'mask-conic-from': ReturnType<typeof scaleColor> },
1595+
]
1596+
'mask-image-conic-to-color': [{ 'mask-conic-to': ReturnType<typeof scaleColor> }]
1597+
}),
15361598
/**
15371599
* Mask Mode
15381600
* @see https://tailwindcss.com/docs/mask-mode

0 commit comments

Comments
 (0)