atomic-css-cli 1.0.2 → 1.0.4
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 -7
- package/dist/atomic-css.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,6 +6,36 @@ HTML 클래스명을 기반으로 CSS 규칙을 자동 생성하는 CLI 도구
|
|
|
6
6
|
|
|
7
7
|
> **VSCode 확장도 있습니다**: [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Drangon-Knight.atomicss)에서 설치하면 파일 저장 시 자동으로 CSS가 생성됩니다.
|
|
8
8
|
|
|
9
|
+
## 어떤 프로젝트에든 바로 적용
|
|
10
|
+
|
|
11
|
+
Atomic CSS는 기존 프로젝트의 CSS를 전혀 건드리지 않고 도입할 수 있습니다.
|
|
12
|
+
|
|
13
|
+
**핵심 원리: `atomic.min.css`를 항상 가장 마지막에 로드합니다.**
|
|
14
|
+
|
|
15
|
+
CSS는 동일 선택자 우선순위일 때 나중에 선언된 스타일이 이기므로, Atomic CSS를 맨 마지막에 불러오면 기존 스타일을 자연스럽게 덮어씁니다. 기존 코드를 수정하거나 삭제할 필요 없이, HTML에 Atomic 클래스만 추가하면 됩니다.
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<!-- 기존에 사용하던 CSS -->
|
|
19
|
+
<link rel="stylesheet" href="/css/framework.css" />
|
|
20
|
+
<link rel="stylesheet" href="/css/custom.css" />
|
|
21
|
+
|
|
22
|
+
<!-- Atomic CSS를 항상 가장 마지막에 → 최우선 적용 -->
|
|
23
|
+
<link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
React, Vue 등 import 방식도 동일합니다. **항상 가장 마지막에 import**하면 됩니다:
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
// 기존에 사용하던 스타일
|
|
30
|
+
import "./styles/framework.css";
|
|
31
|
+
import "./styles/global.css";
|
|
32
|
+
|
|
33
|
+
// Atomic CSS를 항상 가장 마지막에 import → 최우선 적용
|
|
34
|
+
import "./assets/css/atomic.min.css";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
> 기존 프로젝트에 점진적으로 도입하거나, 새 프로젝트에서 처음부터 사용하거나, 자유롭게 선택할 수 있습니다. 도입 비용은 제로입니다.
|
|
38
|
+
|
|
9
39
|
---
|
|
10
40
|
|
|
11
41
|
## 설치
|
|
@@ -60,6 +90,8 @@ atomic-css init
|
|
|
60
90
|
<!DOCTYPE html>
|
|
61
91
|
<html>
|
|
62
92
|
<head>
|
|
93
|
+
<!-- 기존 CSS가 있다면 먼저 -->
|
|
94
|
+
<!-- Atomic CSS를 항상 가장 마지막에 → 최우선 적용 -->
|
|
63
95
|
<link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
|
|
64
96
|
</head>
|
|
65
97
|
<body>
|
|
@@ -275,14 +307,13 @@ atomic-css init
|
|
|
275
307
|
| `atomic.min.css` | 항상 | 미니파이된 CSS (프로덕션용) |
|
|
276
308
|
| `atomic.css` | `-d` 플래그 사용 시 | 포매팅된 CSS (디버그/확인용) |
|
|
277
309
|
|
|
278
|
-
HTML에서
|
|
310
|
+
HTML에서 연결 — **항상 모든 CSS 중 가장 마지막에** 로드합니다:
|
|
279
311
|
|
|
280
312
|
```html
|
|
281
|
-
|
|
282
|
-
<link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
|
|
313
|
+
<link rel="stylesheet" href="/css/기존스타일.css" />
|
|
283
314
|
|
|
284
|
-
<!--
|
|
285
|
-
<link rel="stylesheet" href="/assets/css/common/atomic.css" />
|
|
315
|
+
<!-- Atomic CSS를 항상 가장 마지막에 → 최우선 적용 -->
|
|
316
|
+
<link rel="stylesheet" href="/assets/css/common/atomic.min.css" />
|
|
286
317
|
```
|
|
287
318
|
|
|
288
319
|
---
|
|
@@ -344,11 +375,12 @@ npx atomic-css init
|
|
|
344
375
|
npx atomic-css watch src -e html,tsx,jsx
|
|
345
376
|
```
|
|
346
377
|
|
|
347
|
-
CSS import (React)
|
|
378
|
+
CSS import (React) — **항상 가장 마지막에 import**:
|
|
348
379
|
|
|
349
380
|
```tsx
|
|
350
381
|
// src/App.tsx
|
|
351
|
-
import "./
|
|
382
|
+
import "./styles/global.css"; // 기존 스타일
|
|
383
|
+
import "./assets/css/atomic.min.css"; // 항상 마지막 → 최우선 적용
|
|
352
384
|
```
|
|
353
385
|
|
|
354
386
|
### Vue / Nuxt 프로젝트
|
|
@@ -426,6 +458,7 @@ const watcher = watch("./src", {
|
|
|
426
458
|
- **32개 의사 클래스**: hover, focus, disabled, valid 등 32개 의사 클래스를 프리픽스 방식으로 간편하게 적용합니다.
|
|
427
459
|
- **협업 효율**: HTML에서 바로 디자인 변경 및 조정이 가능하여, CSS 파일을 오가며 작업하는 시간이 대폭 줄어듭니다.
|
|
428
460
|
- **제로 의존성**: 외부 CSS 라이브러리 없이 사용 가능합니다.
|
|
461
|
+
- **모든 프로젝트에 적용**: 어떤 CSS를 사용하고 있든, 마지막에 로드하는 것만으로 즉시 사용 가능합니다.
|
|
429
462
|
- **스타일 일관성**: 전체 프로젝트에 걸쳐 동일한 유틸리티 클래스를 사용하므로 스타일의 일관성이 자연스럽게 유지됩니다.
|
|
430
463
|
|
|
431
464
|
## 핵심 컨셉
|