@fwkui/x-css 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -0
- package/package.json +9 -1
package/README.md
CHANGED
|
@@ -46,8 +46,17 @@ Danh sách đầy đủ các từ viết tắt được cập nhật liên tục
|
|
|
46
46
|
|
|
47
47
|
---
|
|
48
48
|
|
|
49
|
+
Bạn có thể tải thư viện hoặc xem mã nguồn tại: [https://github.com/dwork-dev/fwkui](https://github.com/dwork-dev/fwkui)
|
|
50
|
+
|
|
49
51
|
## 📦 Cài đặt
|
|
50
52
|
|
|
53
|
+
### Cách 1: Dùng qua CDN (Khuyên dùng cho thử nghiệm nhanh)
|
|
54
|
+
Thêm thẻ script sau vào `index.html`:
|
|
55
|
+
```html
|
|
56
|
+
<script src="https://unpkg.com/@fwkui/x-css@1.0.9/dist/index.js"></script>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Cách 2: Cài đặt qua NPM
|
|
51
60
|
```bash
|
|
52
61
|
npm install @fwkui/x-css
|
|
53
62
|
```
|
|
@@ -135,10 +144,41 @@ import { getCss } from '@fwkui/x-css';
|
|
|
135
144
|
// Trong file layout/server entry
|
|
136
145
|
const styles = getCss();
|
|
137
146
|
|
|
147
|
+
// Inject HTML
|
|
138
148
|
// Inject HTML
|
|
139
149
|
// <style dangerouslySetInnerHTML={{ __html: styles }} />
|
|
140
150
|
```
|
|
141
151
|
|
|
152
|
+
### 5. Xuất File CSS (Static Extraction)
|
|
153
|
+
|
|
154
|
+
Nếu bạn muốn tạo file `.css` tĩnh (dành cho Static Site Generation hoặc Cache build), bạn có thể dùng script sau:
|
|
155
|
+
|
|
156
|
+
```javascript
|
|
157
|
+
// build-css.js
|
|
158
|
+
const fs = require('fs');
|
|
159
|
+
const xcss = require('@fwkui/x-css');
|
|
160
|
+
|
|
161
|
+
// 1. Giả lập quá trình Render để thu thập class
|
|
162
|
+
// (Bạn có thể import App và renderToString nếu dùng React/Vue)
|
|
163
|
+
// Ở đây ví dụ gọi thủ công:
|
|
164
|
+
const { clsx, getCssString } = xcss({
|
|
165
|
+
theme: { brand: '#ff0000' } // Cấu hình (nếu có)
|
|
166
|
+
}).buildCss();
|
|
167
|
+
|
|
168
|
+
// Gọi clsx với các class bạn sử dụng trong project
|
|
169
|
+
clsx('m10px p20px cBrand dFlex');
|
|
170
|
+
|
|
171
|
+
// 2. Lấy nội dung CSS đã sinh
|
|
172
|
+
const cssContent = getCssString();
|
|
173
|
+
|
|
174
|
+
// 3. Ghi ra file
|
|
175
|
+
fs.writeFileSync('./public/styles.css', cssContent);
|
|
176
|
+
console.log('✅ CSS file generated!');
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
> [!NOTE]
|
|
180
|
+
> **Custom Config SSR**: Nếu dự án dùng config tùy chỉnh (Theme, Prefix...), hãy đảm bảo khởi tạo `xcss(config)` và truyền instance đó xuống các component (qua Context/Props) thay vì dùng `import { clsx }` mặc định. Điều này đảm bảo Server và Client đồng bộ hash.
|
|
181
|
+
|
|
142
182
|
### 5. Zero-FOUC (Hybrid Cache) ⚡
|
|
143
183
|
|
|
144
184
|
Để tăng tốc độ hiển thị và ngăn chặn FOUC (Flash of Unstyled Content) hoàn toàn, bạn hãy thêm đoạn script Bootloader này vào thẻ `<head>` của `index.html` (đặt **trước** tất cả các thẻ style/script khác):
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fwkui/x-css",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "A fast, modular CSS-in-JS library with utility-first approach and static extraction support.",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -30,6 +30,14 @@
|
|
|
30
30
|
],
|
|
31
31
|
"author": "",
|
|
32
32
|
"license": "MIT",
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "git+https://github.com/dwork-dev/fwkui.git"
|
|
36
|
+
},
|
|
37
|
+
"bugs": {
|
|
38
|
+
"url": "https://github.com/dwork-dev/fwkui/issues"
|
|
39
|
+
},
|
|
40
|
+
"homepage": "https://github.com/dwork-dev/fwkui#readme",
|
|
33
41
|
"devDependencies": {
|
|
34
42
|
"@types/node": "^20.0.0",
|
|
35
43
|
"@vitest/coverage-v8": "^4.0.18",
|