repository·main·Indexed 18 days ago
https://github.com/dev-five-git/devup-uiA zero-runtime, zero-config CSS-in-JS library featuring a Rust-powered preprocessor for build-time style extraction. It provides an API compatible with styled-components and Emotion, supporting React Server Components (RSC). The ecosystem includes @devup-ui/bun-plugin for Bun build integration, a WebAssembly-based extractor, and a dedicated ESLint plugin to enforce literal values and prevent redundant responsive styles.
_hover, _focus, _active), and type-safe themes.Css utility provides a way to convert CSS property definitions into a single string format. This is useful for programmatic CSS generation or managing styles within JavaScript/TypeScript environments.Sheet library allows you to generate a CSS file directly from Devup UI configurations.Devup UI normalizes and compresses color values to reduce the character count in the final CSS bundle through several techniques:
rgb() and rgba() values are converted to compact hexadecimal format.#ffffff → #fff) and 8-digit hex codes are reduced to 4 digits when the alpha channel is fully opaque (e.g., #ffffffff → #ffff).// RGB/RGBA to Hex
<Box bg="rgb(255, 0, 0)" /> // Output: #f00
<Box bg="rgba(255, 0, 0, 0.5)" /> // Output: #f000
// Hex Shortening & Alpha Optimization
// #ffffff → #fff
// #ffffffff → #ffff
// #ff0000ff → #f00typography prop, TypeScript provides autocomplete for defined tokens (e.g., $h1, $body) and will throw an error if an invalid token is provided.When nesting elements with data-group, the _group* selector applies to the nearest parent that possesses the data-group attribute. This allows you to create complex, layered interactive components where inner elements respond to their immediate container while outer elements respond to the main container.
<Box bg="white" data-group p={4}>
<Text _groupHover={{ color: 'blue' }}>Responds to outer group</Text>
<Box bg="$backgroundMuted" data-group mt={2} p={2}>
<Text _groupHover={{ color: 'red' }}>Responds to inner group</Text>
</Box>
</Box>There is a critical distinction between using a token as a standalone value versus using it inside a manual responsive array:
"$token" directly to a prop, Devup UI expands it into all defined breakpoints.['8px', null, '$token']), the token does not expand. Instead, the array itself defines the breakpoints, and the token is treated as a single value at its specific index.| Syntax | Behavior | Classes |
|---|---|---|
px="$containerX" | Expands to all defined breakpoints | Multiple |
px={ "$containerX" } | Expands to all defined breakpoints | Multiple |
px={ ["$containerX"] } | Single value at index 0 | 1 |
px={ ["8px", null, "$containerX"] } | 8px at index 0, token at index 2 | 2 |
{/* The token stays as a single value at breakpoint index 2 */}
<Box px={['8px', null, '$containerX']} />When your project builds, Devup UI automatically generates TypeScript types based on your devup.json configuration. These types are emitted to df/theme.d.ts and provide:
Devup UI is designed to avoid common ad-blocker triggers that can break UI layouts. Ad-blockers often look for the string ad in class names to identify and hide advertisements.
Safety Measures:
ad is automatically transformed to a-d.a-z, -, and _ are used to avoid triggering filters.Devup UI uses a centralized style storage mechanism to eliminate CSS duplication. Instead of generating redundant styles, it ensures that identical style declarations across your application are mapped to exactly one atomic class.
How it works:
Requirement: To guarantee effective de-duplication, your build pipeline must use exactly one style storage. Multiple storages will fragment duplicate detection, potentially causing the same style to be generated with different class names.
Devup UI uses a custom N/M base numbering system to generate compact, collision-free, and ad-blocker-safe class names. The system converts unique style signatures into short alphabetic strings.
a-z and _ (27 characters).a-z, 0-9, and _ (37 characters).GLOBAL_CLASS_MAP.a-a) to ensure uniqueness across different files.Devup UI uses a scaling system for numeric style properties where a value of n is automatically converted to n * 4px.
Example:
h={25} results in height: 100px (25 * 4).w={2} results in width: 8px (2 * 4).Exceptions: The following properties are not multiplied by 4 and will use the literal numeric value provided:
opacityflexz-indexline-clamp / -webkit-line-clampfont-weightline-heightscaleaspect-ratioflex-growflex-shrinkordergrid-column, grid-column-start, grid-column-endgrid-row, grid-row-start, grid-row-endanimation-iteration-counttab-size, moz-tab-size