Optimize CSS
Devup UI extracts styles at build time, normalizes supported values, and reuses identical atomic rules. It is not a general-purpose CSS minifier: do not assume that every decimal or shorthand will be reduced.
Each input below is a standalone source file. With the build plugin configured,
the shown CSS was emitted by an isolated extraction with an empty theme ({})
and the default prefix. Generated class, keyframe, and layer names depend on
extraction state and prefix; they are not stable identifiers to reference manually.
Value and Unit Optimization
1import { Box } from '@devup-ui/react' 2 3const values = <Box m="0px 0px 0px 0px" p="16.0000px" w="0px" /> 4const ratios = ( 5 <> 6 <Box aspectRatio="500/100" /> 7 <Box aspectRatio="16/9" /> 8 </> 9) 10const units = ( 11 <> 12 <Box w={16} /> 13 <Box w="16rem" /> 14 <Box w="100%" /> 15 </> 16)1import { Box } from '@devup-ui/react' 2 3const values = <Box m="0px 0px 0px 0px" p="16.0000px" w="0px" /> 4const ratios = ( 5 <> 6 <Box aspectRatio="500/100" /> 7 <Box aspectRatio="16/9" /> 8 </> 9) 10const units = ( 11 <> 12 <Box w={16} /> 13 <Box w="16rem" /> 14 <Box w="100%" /> 15 </> 16)
Generated CSS:
1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.e{aspect-ratio:16/9}.d{aspect-ratio:5/1}.a{margin:0 0 0 0}.b{padding:16.0000px}.c{width:0}.h{width:100%}.g{width:16rem}.f{width:64px}1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.e{aspect-ratio:16/9}.d{aspect-ratio:5/1}.a{margin:0 0 0 0}.b{padding:16.0000px}.c{width:0}.h{width:100%}.g{width:16rem}.f{width:64px}
- Zero lengths lose their units here, but the four margin values remain
0 0 0 0; they are not collapsed into one value. - The explicit decimal string
16.0000pxis preserved, not shortened to16px. - The integer aspect ratio
500/100reduces to5/1, while16/9is unchanged. - Numeric width uses Devup UI's scale:
16becomes64px. Explicitremand percentage units are preserved. Unitless properties such asopacityandaspectRatiodo not use this four-times scale.
Color Optimization
The following RGB, RGBA, and hex inputs show color normalization, hex shortening, and opaque-alpha removal. These observations do not promise conversion of every CSS color syntax.
1import { Box } from '@devup-ui/react' 2 3const colors = ( 4 <> 5 <Box bg="rgb(255, 0, 0)" /> 6 <Box bg="rgba(255, 0, 0, 0.5)" /> 7 <Box bg="#ffffff" /> 8 <Box bg="#000000" /> 9 <Box bg="#ff0000" /> 10 <Box bg="#ffffffff" /> 11 <Box bg="#000000ff" /> 12 <Box bg="#ff0000ff" /> 13 <Box bg="#ff000080" /> 14 </> 15)1import { Box } from '@devup-ui/react' 2 3const colors = ( 4 <> 5 <Box bg="rgb(255, 0, 0)" /> 6 <Box bg="rgba(255, 0, 0, 0.5)" /> 7 <Box bg="#ffffff" /> 8 <Box bg="#000000" /> 9 <Box bg="#ff0000" /> 10 <Box bg="#ffffffff" /> 11 <Box bg="#000000ff" /> 12 <Box bg="#ff0000ff" /> 13 <Box bg="#ff000080" /> 14 </> 15)
Generated CSS:
1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.d{background:#000}.a{background:#F00}.b{background:#FF000080}.c{background:#FFF}1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.d{background:#000}.a{background:#F00}.b{background:#FF000080}.c{background:#FFF}
RGB red, six-digit red, and fully opaque eight-digit red share #F00. White and
black likewise shorten to #FFF and #000, including their opaque-alpha forms.
The RGBA input with alpha 0.5 emits #FF000080, as does the equivalent hex
input in this fixture. Its alpha byte 80 cannot be shortened to a repeated
single hex digit. In particular, #f000 would mean fully transparent red, not
half-transparent red.
Global CSS Extraction
Use globalCss() to extract global rules. This example emits a compact rule
inside a generated cascade layer; it does not demonstrate minification of an
arbitrary CSS text block.
1import { globalCss } from '@devup-ui/react' 2 3globalCss({ div: { backgroundColor: 'red' } })1import { globalCss } from '@devup-ui/react' 2 3globalCss({ div: { backgroundColor: 'red' } })
Generated CSS:
1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */@layer b;@layer b{div{background-color:red}}1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */@layer b;@layer b{div{background-color:red}}
Keyframes Extraction
keyframes() returns the generated animation name. It is not derived from the
JavaScript variable name fadeIn.
1import { Box, keyframes } from '@devup-ui/react' 2 3const fadeIn = keyframes({ 4 from: { opacity: 0 }, 5 to: { opacity: 1 }, 6}) 7const animated = <Box animation={`${fadeIn} 1s linear`} />1import { Box, keyframes } from '@devup-ui/react' 2 3const fadeIn = keyframes({ 4 from: { opacity: 0 }, 5 to: { opacity: 1 }, 6}) 7const animated = <Box animation={`${fadeIn} 1s linear`} />
Generated CSS:
1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */@keyframes a{from{opacity:0}to{opacity:1}}.b{animation:a 1s linear}1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */@keyframes a{from{opacity:0}to{opacity:1}}.b{animation:a 1s linear}
Font Family Extraction
Setting fontFamily emits a font-family declaration. It does not discover a
font file or automatically create an @font-face rule. Load the font separately.
1import { Box } from '@devup-ui/react' 2 3const text = <Box fontFamily="Inter" />1import { Box } from '@devup-ui/react' 2 3const text = <Box fontFamily="Inter" />
Generated CSS:
1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{font-family:Inter}1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{font-family:Inter}
Style Deduplication
Repeated identical declarations reuse atomic classes. Background and text color
remain separate rules, not a fused .red-white rule.
1import { Box } from '@devup-ui/react' 2 3const repeated = ( 4 <div> 5 <Box bg="red" color="white" /> 6 <Box bg="red" color="white" /> 7 <Box bg="red" color="white" /> 8 </div> 9)1import { Box } from '@devup-ui/react' 2 3const repeated = ( 4 <div> 5 <Box bg="red" color="white" /> 6 <Box bg="red" color="white" /> 7 <Box bg="red" color="white" /> 8 </div> 9)
Extracted code:
1import "@devup-ui/react/devup-ui.css"; 2const repeated = <div> 3 <div className="a b" /> 4 <div className="a b" /> 5 <div className="a b" /> 6</div>;1import "@devup-ui/react/devup-ui.css"; 2const repeated = <div> 3 <div className="a b" /> 4 <div className="a b" /> 5 <div className="a b" /> 6</div>;
Generated CSS:
1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:red}.b{color:white}1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:red}.b{color:white}
These three elements share two rules. Reuse reduces repeated CSS without adding JavaScript for styling at runtime; the examples above describe observed output, not a guarantee of the shortest possible representation for every value.