After adding some predefined sets to the "staticCss" property in the PandaCSS config, the build takes very long time.
There doesn't seem to be any caching mechanism/ incremental build, that prevents from rebuilding the whole CSS. Even if only a single property is added/ modified, the whole CSS seems to be regenerated.
Caching the staticCss generated parts would speed up the build process. Then only the required parts could be rebuilt.
staticCss: {
css: [
{
responsive: false,
conditions: ['@pb/sm', '@pb/md', '@pb/lg', '@pb/xl'],
properties: {
fontSize: fontSizeOptions,
display: ['inline', 'inline-block', 'block', 'flex', 'grid', 'none'],
position: ['relative', 'absolute', 'fixed', 'sticky'],
flexDirection: ['row', 'column'],
alignItems: ['start', 'center', 'flex-start', 'flex-end'],
alignSelf: ['stretch', 'auto'],
justifyContent: ['center', 'flex-start', 'flex-end', 'space-between'],
height: Object.keys(sizesWithNumbers),
width: Object.keys(sizesWithNumbers),
padding: Object.keys(sizesWithNumbers),
paddingTop: Object.keys(sizesWithNumbers),
paddingBottom: Object.keys(sizesWithNumbers),
paddingLeft: Object.keys(sizesWithNumbers),
paddingRight: Object.keys(sizesWithNumbers),
paddingX: Object.keys(sizesWithNumbers),
paddingY: Object.keys(sizesWithNumbers),
margin: Object.keys(sizesWithNumbers),
marginTop: Object.keys(sizesWithNumbers),
marginBottom: Object.keys(sizesWithNumbers),
marginLeft: Object.keys(sizesWithNumbers),
marginRight: Object.keys(sizesWithNumbers),
marginX: Object.keys(sizesWithNumbers),
marginY: Object.keys(sizesWithNumbers),
gap: Object.keys(sizesWithNumbers),
gridTemplateColumns: [
'repeat(1, minmax(0, 1fr))',
'repeat(2, minmax(0, 1fr))',
'repeat(3, minmax(0, 1fr))',
'repeat(4, minmax(0, 1fr))',
'repeat(5, minmax(0, 1fr))',
'repeat(6, minmax(0, 1fr))',
'repeat(7, minmax(0, 1fr))',
'repeat(8, minmax(0, 1fr))',
'repeat(9, minmax(0, 1fr))',
'repeat(10, minmax(0, 1fr))',
'repeat(11, minmax(0, 1fr))',
'repeat(12, minmax(0, 1fr))',
],
// image
objectFit: ['cover', 'contain', 'fill', 'none'],
top: Object.keys(sizesWithNumbers),
left: Object.keys(sizesWithNumbers),
right: Object.keys(sizesWithNumbers),
bottom: Object.keys(sizesWithNumbers),
inset: ['0', 'auto'],
overflow: ['hidden', 'auto', 'scroll', 'visible'],
overflowX: ['hidden', 'auto', 'scroll', 'visible'],
overflowY: ['hidden', 'auto', 'scroll', 'visible'],
transform: [
'none',
'translateX(0)',
'translateY(0)',
'scale(1)',
'rotate(0deg)',
],
translate: ['0', '50%', '100%'],
transition: ['all'],
transitionDuration: ['100', '200', '300', '400', '500'],
boxShadow: ['none', 'sm', 'md', 'lg', 'xl'],
// Add visibility properties
visibility: ['visible', 'hidden'],
// Add backdrop properties
backdropFilter: ['blur(4px)', 'none'],
backdropBlur: ['sm', 'md', 'lg'],
// Add transform origin
transformOrigin: ['top', 'bottom', 'left', 'right'],
// Add scale transforms for animations
scale: ['0', '0.95', '1', '1.05'],
},
},
{
responsive: false,
conditions: ['_groupHover', '_hover', '_focus', '_active', '_disabled'],
properties: {
fontSize: fontSizeOptions,
color: ['*'],
backgroundColor: ['*'],
opacity: Object.keys(sizesForPercentiles),
maxWidth: Object.keys(sizesWithNumbers),
maxHeight: Object.keys(sizesWithNumbers),
// border
stroke: ['*'], // This will generate all possible stroke variants
strokeWidth: ['none', 'thin', 'medium', 'thick'],
borderRadius: ['*'],
borderColor: ['*'],
textDecoration: ['underline'],
// ring
ringColor: ['*'],
ringOpacity: ['0', '0.2', '0.4', '0.6', '0.8', '1'],
// visibility
visibility: ['visible', 'hidden'],
// backdrop properties
backdropFilter: ['blur(4px)', 'none'],
backdropBlur: ['sm', 'md', 'lg'],
// transform
scale: ['0', '0.95', '1', '1.05'],
translate: ['0', '50%', '100%'],
},
},
{
responsive: false,
conditions: [],
properties: {
hideFrom: ['@pb/lg'],
fontFamily: [...SUPPORTED_FONTS.map((font) => font.id), 'system-ui'],
fontWeight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
zIndex: Object.keys(zIndexes),
// border
border: ['*'],
borderWidth: ['*'],
borderStyle: ['*'],
borderTop: ['*'],
borderBottom: ['*'],
borderLeft: ['*'],
borderRight: ['*'],
// user interaction
pointerEvents: ['pointer', 'none', 'auto'],
cursor: ['pointer', 'default', 'not-allowed'],
userSelect: ['none', 'text'],
textDecoration: ['underline', 'none'],
ringWidth: ['0', '1', '2', '4', '8'],
ringOffsetWidth: ['0', '1', '2', '4'],
ringOffsetColor: ['*'],
// Add transition properties
transitionProperty: ['all', 'opacity', 'transform'],
transitionTimingFunction: ['ease-in', 'ease-out', 'ease-in-out'],
// transform
transformOrigin: ['top', 'bottom', 'left', 'right'],
},
},
],
}
Description
After adding some predefined sets to the "staticCss" property in the PandaCSS config, the build takes very long time.
There doesn't seem to be any caching mechanism/ incremental build, that prevents from rebuilding the whole CSS. Even if only a single property is added/ modified, the whole CSS seems to be regenerated.
Is that correct?
Problem Statement/Justification
Caching the staticCss generated parts would speed up the build process. Then only the required parts could be rebuilt.
Proposed Solution or API
Alternatives