Build Cache/ Incremental Build for staticCss in config

[omeroy]

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

• Caching the outputs
• Rebuilding only what has changed

Alternatives

    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'],
                },
            },
        ],
    }