From d763007201a019fd825fd77934fb6909bda18225 Mon Sep 17 00:00:00 2001 From: abyss-s Date: Sun, 19 Oct 2025 17:10:27 +0900 Subject: [PATCH 01/11] docs: add type infer system core concept documentation --- .../type-inference-system/page.mdx | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx new file mode 100644 index 00000000..1539e713 --- /dev/null +++ b/apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx @@ -0,0 +1,69 @@ +export const metadata = { + title: 'Type Inference System', + alternates: { + canonical: '/docs/core-concepts/type-inference-system', + }, +} + +# Type Inference System + +Devup UI automatically infers TypeScript types for CSS properties, ensuring type safety and a smooth developer experience — no manual definitions required. +Unlike traditional CSS-in-JS libraries, Devup UI **derives types directly from CSS standards**. + +## How It Works + +The type inference process consists of four main steps: + +1. **Parsing** – analyzes JSX/TSX code +2. **Property Lookup** – checks against the CSS property map +3. **Type Generation** – produces corresponding TypeScript types +4. **Validation** – enforces compile-time correctness + +### 1. CSS Property Mapping + +All CSS properties are defined in a Rust-based mapping table. + +```rust +pub(super) static GLOBAL_STYLE_PROPERTY: phf::Map<&str, &[&str]> = phf_map! { + "bg" => &["background"], + "bgColor" => &["background-color"], + "m" => &["margin"], + "w" => &["width"], + "h" => &["height"], + // ... +}; + +``` + +### 2. Type Generation + +TypeScript types are automatically derived from CSS property names and value patterns. + +It supports various value types — such as lengths, colors, and percentages — and + +ensures **type-safe responsive arrays** for breakpoint-based styles. + +```tsx + +``` + +### 3. Special Property Handling + +Certain properties are excluded from inference, such as React-specific or HTML attributes. + +```rust +static SPECIAL_PROPERTIES: phf::Set<&str> = phf_set! { + "children", "ref", "key", "className", "id", "style", +}; + +``` + +## Advantages + +Devup UI’s type inference system provides several key benefits: + +- **Automatic updates** – New CSS properties are supported immediately when standards evolve, without requiring library updates. +- **Type safety** – All properties and values are strictly typed, preventing invalid or misspelled declarations at compile time. +- **Extensibility** – Experimental or custom CSS features can be easily extended within the system. + +This type inference system is automatic, reliable, and future-ready, allowing developers to focus on design and logic rather than manual type management. From d1f15423b608fb9dc428d88111d5612b64b71b8f Mon Sep 17 00:00:00 2001 From: abyss-s Date: Sun, 19 Oct 2025 17:52:59 +0900 Subject: [PATCH 02/11] docs: add optimize css core concept documentation --- .../docs/core-concepts/optimize-css/page.mdx | 239 ++++++++++++++++++ 1 file changed, 239 insertions(+) create mode 100644 apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx new file mode 100644 index 00000000..9661f92e --- /dev/null +++ b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx @@ -0,0 +1,239 @@ +export const metadata = { + title: 'Optimize CSS', + alternates: { + canonical: '/docs/core-concepts/optimize-css', + }, +} + +# Optimize CSS + +Devup UI automatically optimizes CSS output through micro-unit optimization, duplicate removal, and intelligent value conversion to minimize bundle size and improve performance. This document explains the various CSS optimization techniques used by Devup UI, including micro-unit optimization, color optimization, and global CSS handling. + +## Micro-unit Optimization + +### **Value Optimization** + +Devup UI optimizes CSS values by: + +- **Removing unnecessary zeros**: `0px` becomes `0` +- **Shortening decimals**: `0.5000` becomes `0.5` +- **Optimizing units**: `0px` becomes `0` when appropriate +- **Converting to smallest units**: `px` values are converted to `%` when more appropriate +- **Removing redundant spaces**: `margin: 0 0 0 0` becomes `margin:0` + +``` +// Before optimization + + +// After optimization + +``` + +### **Aspect Ratio Optimization** + +Aspect ratios are simplified to their smallest equivalent ratio using the greatest common divisor (GCD). +For example, 500/100 becomes 5/1, while 16/9 remains unchanged since GCD(16, 9) = 1. + +```tsx +// Before: aspect-ratio: 500/100 + + +// After: aspect-ratio: 5/1 (optimized) +// The system calculates GCD(500, 100) = 100, simplifying the ratio to 5/1 +``` + +## Color Optimization + +### **RGB/RGBA to Hex Conversion** + +All RGB and RGBA color values are normalized and converted into compact hexadecimal form. + +``` +// Input + + + +// Output + // #f00 + // #ff000080 +``` + +### **Hex Shortening** + +Hex shortening converts long hex codes into their shortest possible form. +Six- or eight-digit values are reduced to three or four digits when safely equivalent. + +```tsx +// 6-digit hex to 3-digit +// #ffffff → #fff +// #000000 → #000 +// #ff0000 → #f00 + +// 8-digit hex to 4-digit (when alpha is FF) +// #ffffffff → #ffff +// #000000ff → #000f +``` + +### **Alpha Channel Optimization** + +Alpha channel optimization removes unnecessary opacity information. +Fully opaque colors (FF) are shortened, while partial transparency values are preserved for accuracy. + +```tsx +// Full opacity is removed +// #ff0000ff → #ff0000 + +// Partial opacity is preserved +// #ff000080 → #ff000080 +``` + +## Global CSS Optimization + +### **CSS Block Optimization** + +Global CSS blocks are optimized by: + +- **Removing comments**: `/* comment */` is stripped +- **Minifying whitespace**: Multiple spaces become single spaces +- **Removing semicolons**: Last property in a block doesn't need semicolon +- **Optimizing selectors**: Redundant selectors are merged + +```css +/* Before optimization */ +div { + /* comment */ + background-color: red; + /* color: blue; */ +} + +/* After optimization */ +div { + background-color: red; +} +``` + +### **Keyframes Optimization** + +Keyframes are optimized for minimal output: + +```tsx +// Input +const fadeIn = keyframes({ + from: { opacity: 0 }, + to: { opacity: 1 }, +}) + +// Output (optimized) +// @keyframes k-fadeIn{from{opacity:0}to{opacity:1}} +``` + +### **Font Face Optimization** + +Font faces are automatically added and optimized: + +```tsx +// Input + + +// Output (optimized) +// @font-face{font-family:Inter;src:url(./fonts/Inter.woff2)} +``` + +## Value Conversion + +### **Unit Conversion** + +Values are converted to their most appropriate units: +Numeric values are automatically interpreted as pixel units, while string-based values with explicit units (e.g., rem, %) are preserved for accurate rendering. + +``` +// Numbers without units are treated as pixels + // width: 16px + +// Strings with units are preserved + // width: 16rem + // width: 100% +``` + +### **Mathematical Optimization** + +Mathematical expressions are optimized to their most efficient form: + +``` +// Before + + + +// After (optimized) + // px converted to rem for better scalability + // px converted to rem for better scalability +``` + +### **Zero Value Optimization** + +Zero values are optimized: + +``` +// Before + + +// After + +``` + +## Duplicate Removal + +### **Style Deduplication** + +Identical style rules across multiple components are automatically merged into a single CSS rule, reducing redundancy and overall bundle size. + +```tsx +// Multiple components with same styles +
+ + + +
+ +// Output: Only one CSS rule generated +// .red-white{background:red;color:white} +``` + +### **Property Deduplication** + +Duplicate CSS properties within the same rule are automatically removed, keeping only the last valid declaration for consistency and cleaner output. + +``` +// Input + + +// Output: Duplicate margin removed + +``` + +### **Advantages** + +Devup UI offers complete flexibility in how you implement and optimize styles — while maintaining measurable performance gains. + +- **Flexible syntax support** – Use CSS utility objects, template literals, or prop-based expressions seamlessly in one system +- **Smaller bundle size** – Reduced CSS output through color, value, and duplicate optimization +- **Faster parsing** – Lightweight CSS loads and parses quickly in browsers +- **Better caching** – Compact, consistent values improve cache efficiency +- **Lower memory usage** – Reduced CSS footprint minimizes runtime memory consumption + +This unified approach ensures both **maximum developer freedom** and **optimized performance**, +allowing teams to write CSS their way without compromising efficiency. From e14e7de26a68074f75a3fe4044c3c297c376ae4c Mon Sep 17 00:00:00 2001 From: abyss-s Date: Sun, 19 Oct 2025 17:53:19 +0900 Subject: [PATCH 03/11] docs: add nm-base core concept documentation --- .../docs/core-concepts/nm-base/page.mdx | 184 ++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx new file mode 100644 index 00000000..ce45957a --- /dev/null +++ b/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx @@ -0,0 +1,184 @@ +export const metadata = { + title: 'N/M Base', + alternates: { + canonical: '/docs/core-concepts/nm-base', + }, +} + +# N/M Base + +Devup UI uses a custom N/M base numbering system to generate compact, collision-free class names that are optimized for CSS constraints and ad-blocker compatibility. + +- **Generates compact class names**: Short, efficient class names like `a`, `b`, `c` +- **Avoids CSS constraints**: Class names never start with digits +- **Prevents ad-blocker conflicts**: Avoids patterns that trigger content blockers +- **Ensures uniqueness**: Each style gets a unique, deterministic class name +- **Optimizes for size**: Minimal class name length for maximum efficiency + +## How It Works + +### **Base System** + +The N/M base system uses two character sets: + +- **N Base**: `a-z` (26 characters) +- **M Base**: `a-z` (26 characters) + +This creates a base-26 system that can represent any number using only lowercase letters. + +### **Number Conversion** + +Numbers are converted to N/M base using a two-phase approach: + +1. **Zero handling**: Returns 'a' when the number is 0 +2. **Base conversion**: Uses base-26 to convert numbers to alphabetic characters + - First digit: Uses N base array (a-z) + - Remaining digits: Uses M base array (a-z) +3. **Ad-blocker conflict prevention**: Changes result to "a-d" if it ends with "ad" + +### **Class Name Generation** + +Class name generation follows these steps: + +1. **Style signature creation**: Combines property, level, value, selector, and style order to create a unique key +2. **File identifier addition**: Converts filename to number for per-file CSS splitting +3. **Hash conversion**: Converts the generated key to a number using a hash function +4. **N/M base conversion**: Converts the hashed number to an alphabetic class name using the N/M base system +5. **Final combination**: Combines file identifier and class number to create the final class name when file identifier exists + +## Examples + +### **Basic Class Names** + +
+
+ ```tsx // Input +
+ + + +
+ ``` +
+
+ ```tsx // Output (N/M base class names) +
+ {/* bg: red */} + {/* bg: blue */} + {/* color: white */} +
+ ``` +
+
+ +### **Responsive Class Names** + +
+
+ ```tsx // Input + + ``` +
+
+ ```tsx // Output + + {/* w: 100px, w: 200px, w: 300px */} + ``` +
+
+ +### **Pseudo-selector Class Names** + +
+
+ ```tsx + + ``` +
+
+ ```tsx + + {/* .g:hover { background: red; } */} + ``` +
+
+ +### **File-specific Class Names** + +
+
+ ```tsx +
+ + +
+ ``` +
+
+ ```tsx +
+ {/* file1.tsx */} + {/* file2.tsx */} +
+ ``` +
+
+ +## Ad-blocker Compatibility + +### **Why "ad" is Problematic** + +Ad-blockers recognize and block class names containing "ad" patterns as advertisements: + +- **Ad-blocker filters**: Classify elements containing "ad" strings as advertisements +- **CSS blocking**: Styles are not applied, causing UI to break +- **Poor user experience**: Unintended style blocking causes layout issues + +### **Our Solution** + +Devup UI prevents ad-blocker conflicts through the following methods: + +- **Pattern avoidance**: Automatically converts class names ending with "ad" to "a-d" +- **Safe character usage**: Uses only `a-z`, `-`, `_` to avoid blocking patterns +- **No numbers**: Ensures class names don't start with digits to comply with CSS constraints + +## Advantages + +- **Compact class names**: First 26 styles generate single characters like `a`, `b`, `c` +- **Build consistency**: Always generates the same class name for identical input +- **Cache optimization**: Consistent class names improve browser cache efficiency +- **Collision prevention**: Each style has a unique signature to prevent class name collisions +- **Ad-blocker compatibility**: Automatically converts "ad" patterns to "a-d" to prevent blocking +- **CSS constraint compliance**: Class names don't start with digits to comply with CSS rules From f629b89eb25fc2f4cd994f753847cd62b543063d Mon Sep 17 00:00:00 2001 From: abyss-s Date: Sun, 19 Oct 2025 17:53:54 +0900 Subject: [PATCH 04/11] docs: add figma and theme intergration documentation --- .../devup-figma-plugin/page.mdx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-figma-plugin/page.mdx diff --git a/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-figma-plugin/page.mdx b/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-figma-plugin/page.mdx new file mode 100644 index 00000000..3a33d503 --- /dev/null +++ b/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-figma-plugin/page.mdx @@ -0,0 +1,34 @@ +export const metadata = { + title: 'Devup Figma Plugin', + alternates: { + canonical: '/docs/figma-and-theme-integration/devup-figma-plugin', + }, +} + +# Devup Figma Plugin + +Devup UI provides a powerful Figma plugin that enables seamless integration between design and development workflows. The plugin converts Figma layers into Devup UI code snippets and exports design tokens. + +### **From Figma Community** + +1. Open Figma +2. Go to **Plugins** → **Browse all plugins** +3. Search for "Devup UI" +4. Click **Open in Figma** on the Devup UI plugin or go to directly [Figma Community page](https://www.figma.com/community/plugin/1412341601954480694). + +## Features + +### **Layer to Component Conversion** + +Convert Figma layers into Devup UI components. + +```tsx +// Generated from Figma layer + + Button Text + +``` + +### **Design Token Export** + +Export design tokens from Figma to your `devup.json`. From 73dffe5ece6bafbc02d9d710951abe9f5757f0d0 Mon Sep 17 00:00:00 2001 From: abyss-s Date: Sun, 19 Oct 2025 17:54:24 +0900 Subject: [PATCH 05/11] docs: add devup.json for customization documentation --- .../devup-json/page.mdx | 151 ++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx diff --git a/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx b/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx new file mode 100644 index 00000000..eadd1947 --- /dev/null +++ b/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx @@ -0,0 +1,151 @@ +export const metadata = { + title: 'devup.json Configuration', + alternates: { + canonical: '/docs/figma-and-theme-integration/devup-json', + }, +} + +# devup.json Configuration + +The `devup.json` file is the central configuration file for Devup UI that allows you to define custom themes, colors, typography, and other design tokens. + +## Basic Structure + +```json +{ + "theme": { + "colors": { + "primary": "#5A44FF" + }, + "typography": { + "h1": { + "fontSize": "32px" + } + } + } +} +``` + +## Colors Configuration + +### **Basic Color Setup** + +Define colors for different themes. + +```json +{ + "theme": { + "colors": { + "light": { + "primary": "#5A44FF", + "secondary": "#85A5F2", + "text": "#2F2F2F", + "background": "#FFF" + }, + "dark": { + "primary": "#9086FF", + "secondary": "#2A4586", + "text": "#EDEDED", + "background": "#131313" + } + } + } +} +``` + +### **Semantic Color Naming** + +Use semantic names that describe purpose. + +```json +{ + "theme": { + "colors": { + "light": { + "primary": "#5A44FF", + "primaryHover": "#4D38AE", + "text": "#2F2F2F", + "textSecondary": "#787878", + "background": "#FFF", + "surface": "#F8F8F8", + "success": "#4CAF50", + "warning": "#FF9800", + "error": "#F44336" + } + } + } +} +``` + +### **Color Variants** + +Create color variants with opacity. + +```json +{ + "theme": { + "colors": { + "light": { + "primary": "#5A44FF", + "primary50": "#5A44FF80", + "primary20": "#5A44FF33", + "black50": "#00000080" + } + } + } +} +``` + +## Typography Configuration + +### **Typography Properties** + +Each typography definition can include. + +- **fontFamily**: Font family name +- **fontWeight**: Numeric weight (100-900) or string +- **fontSize**: Size with unit (`16px`, `1rem`) +- **lineHeight**: Numeric ratio or string with unit +- **letterSpacing**: Spacing with unit (`-0.03em`) + +### **Static Typography** + +For non-responsive typography, use objects. + +```json +{ + "theme": { + "typography": { + "caption": { + "fontFamily": "Pretendard", + "fontWeight": 500, + "fontSize": "14px", + "lineHeight": 1.4 + } + } + } +} +``` + +## Usage in Components + +### **Color Usage** + +Access colors using the `$` prefix. + +```tsx + + Content + +``` + +### **Typography Usage** + +Apply typography styles using the `typography` prop. + +```tsx +<> + Heading 1 + Body text + +``` From 97cb1d8c88111c2c2ea53264ac57b1f9d64452cb Mon Sep 17 00:00:00 2001 From: abyss-s Date: Sun, 19 Oct 2025 17:54:50 +0900 Subject: [PATCH 06/11] feat: add core concept and figma config with navigation menu --- .../src/app/(detail)/docs/LeftMenu.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx index d3485904..f1e50a92 100644 --- a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx +++ b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx @@ -18,11 +18,37 @@ export function LeftMenu() { to: '/docs/core-concepts/style-storage', children: 'Style Storage', }, + { + to: '/docs/core-concepts/type-inference-system', + children: 'Type Inference System', + }, + { + to: '/docs/core-concepts/optimize-css', + children: 'Optimize CSS', + }, + { + to: '/docs/core-concepts/nm-base', + children: 'N/M Base', + }, ]} > Core Concepts Features + + Figma and Theme Integration + Date: Tue, 21 Oct 2025 10:46:25 +0900 Subject: [PATCH 07/11] docs: fix core concepts documentation - Fix N/M base character for 27/37 - Remove misleading CSS optimization examples - Simplify type inference system explanation with csstype property --- .../docs/core-concepts/nm-base/page.mdx | 6 +-- .../docs/core-concepts/optimize-css/page.mdx | 39 ++------------ .../type-inference-system/page.mdx | 54 +++++-------------- 3 files changed, 17 insertions(+), 82 deletions(-) diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx index ce45957a..6b2242bb 100644 --- a/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx +++ b/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx @@ -21,10 +21,8 @@ Devup UI uses a custom N/M base numbering system to generate compact, collision- The N/M base system uses two character sets: -- **N Base**: `a-z` (26 characters) -- **M Base**: `a-z` (26 characters) - -This creates a base-26 system that can represent any number using only lowercase letters. +- **N Base**: `a-z, _` (27 characters) +- **M Base**: `a-z, 0-9, _` (37 characters) ### **Number Conversion** diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx index 9661f92e..b1adaa61 100644 --- a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx +++ b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx @@ -18,7 +18,7 @@ Devup UI optimizes CSS values by: - **Removing unnecessary zeros**: `0px` becomes `0` - **Shortening decimals**: `0.5000` becomes `0.5` - **Optimizing units**: `0px` becomes `0` when appropriate -- **Converting to smallest units**: `px` values are converted to `%` when more appropriate +- **Converting to alternative units**: `0px` is converted to `0%` in CSS functions where unit-less zero is not allowed - **Removing redundant spaces**: `margin: 0 0 0 0` becomes `margin:0` ``` @@ -104,7 +104,6 @@ Global CSS blocks are optimized by: - **Removing comments**: `/* comment */` is stripped - **Minifying whitespace**: Multiple spaces become single spaces - **Removing semicolons**: Last property in a block doesn't need semicolon -- **Optimizing selectors**: Redundant selectors are merged ```css /* Before optimization */ @@ -155,28 +154,14 @@ Values are converted to their most appropriate units: Numeric values are automatically interpreted as pixel units, while string-based values with explicit units (e.g., rem, %) are preserved for accurate rendering. ``` -// Numbers without units are treated as pixels - // width: 16px +// Numbers without units are treated as pixels (multiplied by 4) + // width: 64px // Strings with units are preserved // width: 16rem // width: 100% ``` -### **Mathematical Optimization** - -Mathematical expressions are optimized to their most efficient form: - -``` -// Before - - - -// After (optimized) - // px converted to rem for better scalability - // px converted to rem for better scalability -``` - ### **Zero Value Optimization** Zero values are optimized: @@ -207,24 +192,6 @@ Identical style rules across multiple components are automatically merged into a // .red-white{background:red;color:white} ``` -### **Property Deduplication** - -Duplicate CSS properties within the same rule are automatically removed, keeping only the last valid declaration for consistency and cleaner output. - -``` -// Input - - -// Output: Duplicate margin removed - -``` - ### **Advantages** Devup UI offers complete flexibility in how you implement and optimize styles — while maintaining measurable performance gains. diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx index 1539e713..333a4fea 100644 --- a/apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx +++ b/apps/landing/src/app/(detail)/docs/core-concepts/type-inference-system/page.mdx @@ -12,58 +12,28 @@ Unlike traditional CSS-in-JS libraries, Devup UI **derives types directly from C ## How It Works -The type inference process consists of four main steps: +Devup UI uses the **csstype** package to automatically generate types for CSS properties. Instead of manually defining types, Devup UI reads the standard CSS definitions from csstype and uses them directly. -1. **Parsing** – analyzes JSX/TSX code -2. **Property Lookup** – checks against the CSS property map -3. **Type Generation** – produces corresponding TypeScript types -4. **Validation** – enforces compile-time correctness +### 1. Reading CSS Standards -### 1. CSS Property Mapping +Devup UI reads all CSS property definitions from the **csstype** package, which contains the official CSS standards. This includes both regular properties (like `width`, `color`) and shorthand properties (like `margin`, `padding`). -All CSS properties are defined in a Rust-based mapping table. +### 2. Auto-Converting Selectors -```rust -pub(super) static GLOBAL_STYLE_PROPERTY: phf::Map<&str, &[&str]> = phf_map! { - "bg" => &["background"], - "bgColor" => &["background-color"], - "m" => &["margin"], - "w" => &["width"], - "h" => &["height"], - // ... -}; +When you use CSS states like `:hover` or `:focus`, Devup UI automatically converts them into props you can use. For example, `:hover` becomes `_hover` so you can write ``. -``` +When `csstype` is updated with new CSS standards, Devup UI automatically gets these updates without needing a library update. -### 2. Type Generation +### 3. Catching Mistakes Early -TypeScript types are automatically derived from CSS property names and value patterns. - -It supports various value types — such as lengths, colors, and percentages — and - -ensures **type-safe responsive arrays** for breakpoint-based styles. - -```tsx - -``` - -### 3. Special Property Handling - -Certain properties are excluded from inference, such as React-specific or HTML attributes. - -```rust -static SPECIAL_PROPERTIES: phf::Set<&str> = phf_set! { - "children", "ref", "key", "className", "id", "style", -}; - -``` +TypeScript checks your CSS properties while you're coding. If you try to use an invalid property or value, you'll get an error right away instead of discovering it later. ## Advantages -Devup UI’s type inference system provides several key benefits: +Devup UI's type inference system provides several key benefits: -- **Automatic updates** – New CSS properties are supported immediately when standards evolve, without requiring library updates. -- **Type safety** – All properties and values are strictly typed, preventing invalid or misspelled declarations at compile time. -- **Extensibility** – Experimental or custom CSS features can be easily extended within the system. +- **Automatic updates** – New CSS properties are supported immediately when the csstype package is updated. Simply update the package without requiring devup-ui library updates. +- **Type safety** – All properties and values are strictly typed based on CSS standards, preventing invalid or misspelled declarations at compile time. +- **Standards compliance** – Types are always aligned with official CSS specifications, ensuring accuracy and consistency across all CSS standards. This type inference system is automatic, reliable, and future-ready, allowing developers to focus on design and logic rather than manual type management. From 229fb93dfbddaa1656087b3316bffc98b4fc3cbc Mon Sep 17 00:00:00 2001 From: abyss-s Date: Sun, 26 Oct 2025 19:07:42 +0900 Subject: [PATCH 08/11] docs: fix core concepts documentation - Fix RGB/RGBA to Hex conversion examples in optimize-css - Add Typography Responsive section and tsconfig.json file --- .../docs/core-concepts/optimize-css/page.mdx | 13 +++--- .../devup-json/page.mdx | 41 ++++++++++++++++++- 2 files changed, 45 insertions(+), 9 deletions(-) diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx index b1adaa61..736e94c3 100644 --- a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx +++ b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx @@ -62,8 +62,8 @@ All RGB and RGBA color values are normalized and converted into compact hexadeci // Output - // #f00 - // #ff000080 + // #ff0000 shortened to #f00 + // #ff000080 shortened to #f000 ``` ### **Hex Shortening** @@ -88,11 +88,11 @@ Alpha channel optimization removes unnecessary opacity information. Fully opaque colors (FF) are shortened, while partial transparency values are preserved for accuracy. ```tsx -// Full opacity is removed -// #ff0000ff → #ff0000 +// Full opacity is removed and shortened to 3-digit hex +// #ff0000ff → #f00 -// Partial opacity is preserved -// #ff000080 → #ff000080 +// Partial opacity is preserved and shortened to 4-digit hex +// #ff000080 → #f000 ``` ## Global CSS Optimization @@ -101,7 +101,6 @@ Fully opaque colors (FF) are shortened, while partial transparency values are pr Global CSS blocks are optimized by: -- **Removing comments**: `/* comment */` is stripped - **Minifying whitespace**: Multiple spaces become single spaces - **Removing semicolons**: Last property in a block doesn't need semicolon diff --git a/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx b/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx index eadd1947..92038e9f 100644 --- a/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx +++ b/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx @@ -108,9 +108,11 @@ Each typography definition can include. - **lineHeight**: Numeric ratio or string with unit - **letterSpacing**: Spacing with unit (`-0.03em`) -### **Static Typography** +### **Typography Configuration** -For non-responsive typography, use objects. +Define typography styles using objects for static values or arrays for responsive breakpoints. + +#### **Static typography** ```json { @@ -127,6 +129,39 @@ For non-responsive typography, use objects. } ``` +#### **Responsive typography** + +Use arrays to define styles for each breakpoint. + +```json +{ + "theme": { + "typography": { + "heading": [ + { + "fontFamily": "Pretendard", + "fontWeight": 700, + "fontSize": "20px", + "lineHeight": 1.3 + }, + { + "fontFamily": "Pretendard", + "fontWeight": 700, + "fontSize": "28px", + "lineHeight": 1.3 + }, + { + "fontFamily": "Pretendard", + "fontWeight": 700, + "fontSize": "32px", + "lineHeight": 1.2 + } + ] + } + } +} +``` + ## Usage in Components ### **Color Usage** @@ -139,6 +174,8 @@ Access colors using the `$` prefix. ``` +- To enable type autocompletion for theme values, add `"df/*.ts"` to the `include` array in your `tsconfig.json` file. + ### **Typography Usage** Apply typography styles using the `typography` prop. From e24bfee4bc17bbddbf37a067ec93086dd3d0963a Mon Sep 17 00:00:00 2001 From: abyss-s Date: Sun, 26 Oct 2025 19:10:33 +0900 Subject: [PATCH 09/11] docs: fix core concepts documentation - Fix Hash conversion to Sequential number assignment in N/M base documentation --- .../src/app/(detail)/docs/core-concepts/nm-base/page.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx index 6b2242bb..c8b683b8 100644 --- a/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx +++ b/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx @@ -40,8 +40,8 @@ Class name generation follows these steps: 1. **Style signature creation**: Combines property, level, value, selector, and style order to create a unique key 2. **File identifier addition**: Converts filename to number for per-file CSS splitting -3. **Hash conversion**: Converts the generated key to a number using a hash function -4. **N/M base conversion**: Converts the hashed number to an alphabetic class name using the N/M base system +3. **Sequential number assignment**: Assigns a sequential number based on the order of unique styles in the GLOBAL_CLASS_MAP +4. **N/M base conversion**: Converts the sequential number to an alphabetic class name using the N/M base system 5. **Final combination**: Combines file identifier and class number to create the final class name when file identifier exists ## Examples From 87488014e7310d17966ea2fb25d5661cf2fb57cd Mon Sep 17 00:00:00 2001 From: abyss-s Date: Tue, 28 Oct 2025 03:57:48 +0900 Subject: [PATCH 10/11] docs: delete semicolon in after optimization --- .../src/app/(detail)/docs/core-concepts/optimize-css/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx index 736e94c3..bc33828e 100644 --- a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx +++ b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx @@ -114,7 +114,7 @@ div { /* After optimization */ div { - background-color: red; + background-color: red } ``` From 5f9468bda3d51e767cb8282049e4a6f891a3b1c8 Mon Sep 17 00:00:00 2001 From: Jeong Min Oh Date: Tue, 28 Oct 2025 11:13:40 +0900 Subject: [PATCH 11/11] Update page.mdx --- .../src/app/(detail)/docs/core-concepts/optimize-css/page.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx index bc33828e..736e94c3 100644 --- a/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx +++ b/apps/landing/src/app/(detail)/docs/core-concepts/optimize-css/page.mdx @@ -114,7 +114,7 @@ div { /* After optimization */ div { - background-color: red + background-color: red; } ```