Skip to content

Commit 268f096

Browse files
committed
Revert "attempt to reduce bundle size impact of mask-image class groups"
This reverts commit fedad41. The reverted commit reduced increased `twMerge` bundle size from +7.4% to +5.9% but at the same time made init runtime perf a lot worse from -15.13% to -51.44%
1 parent fedad41 commit 268f096

File tree

1 file changed

+36
-98
lines changed

1 file changed

+36
-98
lines changed

src/lib/default-config.ts

Lines changed: 36 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1490,111 +1490,49 @@ 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() }],
14931521
'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() }],
14941526
'mask-image-radial-shape': [{ 'mask-radial': ['circle', 'ellipse'] }],
14951527
'mask-image-radial-size': [
14961528
{ 'mask-radial': [{ closest: ['side', 'corner'], farthest: ['side', 'corner'] }] },
14971529
],
14981530
'mask-image-radial-pos': [{ 'mask-radial-at': scalePosition() }],
14991531
'mask-image-conic-pos': [{ 'mask-conic': [isNumber] }],
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-
}),
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() }],
15981536
/**
15991537
* Mask Mode
16001538
* @see https://tailwindcss.com/docs/mask-mode

0 commit comments

Comments
 (0)