[송규경] Chore/Design: Design System 세팅 및 Nested CSS warning 해결 #15

Ssong-Q · 2024-01-25T05:28:19Z

📖 작업 내용

Nested CSS warning 해결

Error log

Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

해결 방법

withastro/astro#6202

@tailwindcss/nesting 다운로드 후
아래와 같이 postcss.config.js 수정

module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Design System 세팅 완료

Color

Font

const notoSansKr = Noto_Sans_KR({
  preload: false,
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body className={notoSansKr.className}>
        <ReactQueryProviders>{children}</ReactQueryProviders>
      </body>
    </html>
  );

✅ PR 포인트

Issue close #11

📸 스크린샷

vercel · 2024-01-25T05:28:25Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
youth-frontend	✅ Ready (Inspect)	Visit Preview	Jan 25, 2024 5:28am

Ssong-Q · 2024-01-25T05:30:31Z

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
  plugins: {
+    'tailwindcss/nesting': {},


warning 해결 포인트입니다

오호 클래스명이 아니라 css 파일 내에서 nesting(중첩) 문법을 사용할 때 쓰일 때 필요한 요소로 보이는데 맞나요?!

테일윈드에서 nesting 문법으로 @apply을 보통 이용하지 않나요?!

Ssong-Q · 2024-01-25T05:31:32Z

src/app/layout.tsx

+// Noto sans 폰트 적용
+const notoSansKr = Noto_Sans_KR({
+  preload: false,
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+});


notoSansKr의 경우, preload false 값으로 불러옵니다.

Ssong-Q · 2024-01-25T05:32:05Z

tailwind.config.ts

-      md: '0.375rem',
-      lg: '0.5rem',
+      sm: '0.5rem', // 추후 수정 가능
+      md: '1.5rem', // 추후 수정 가능


Figma design system 기본 값을 md 설정했어요

Ssong-Q · 2024-01-25T05:33:46Z

tailwind.config.ts

+        DEFAULT: 'var(--primary-400)',
+        1: 'var(--primary-50)',
+        2: 'var(--primary-100)',
+        3: 'var(--primary-200)',
+        4: 'var(--primary-300)',
+        5: 'var(--primary-500)',
+        6: 'var(--primary-600)',
+        7: 'var(--primary-700)',
+        8: 'var(--primary-800)',
+        9: 'var(--primary-900)',


Primary Color
DEFAULT의 경우 아래와 같이,

className="text-primary"

다른건 아래와 같이,

className="text-primary-4"

Ssong-Q · 2024-01-25T05:36:51Z

tailwind.config.ts

+        1: 'var(--gray-50)',
+        2: 'var(--gray-100)',
+        3: 'var(--gray-200)',
+        4: 'var(--gray-300)',
+        5: 'var(--gray-400)',
+        6: 'var(--gray-500)',
+        7: 'var(--gray-600)',
+        8: 'var(--gray-700)',
+        9: 'var(--gray-800)',


Gray Color
아래와 같이,

className="bg-gray-9"

BeMatthewsong

LGTM! 👍🏻 고생하셨습니다!

BeMatthewsong · 2024-01-25T05:39:57Z

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
  plugins: {
+    'tailwindcss/nesting': {},


오호 클래스명이 아니라 css 파일 내에서 nesting(중첩) 문법을 사용할 때 쓰일 때 필요한 요소로 보이는데 맞나요?!

테일윈드에서 nesting 문법으로 @apply을 보통 이용하지 않나요?!

BeMatthewsong · 2024-01-25T05:42:38Z

src/app/layout.tsx

@@ -17,7 +20,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="ko">
-      <body className={inter.className}>
+      <body className={notoSansKr.className}>


혹시 레이아웃에 폰트에 관련한 클래스를 넣은 이유가 있을까요?!

글로벌 css에 넣으면 안 되는 건가 싶어서요!

google font를 import 해서 가장 최상단 root Layout에서 감싸주려고 했어요

BeMatthewsong · 2024-01-25T05:43:22Z

src/styles/globals.css

-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 900;
-  font-display: swap;
-  src: local("Pretendard Black"),
-    url("/fonts/Pretendard-Black.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-Black.subset.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 800;
-  font-display: swap;
-  src: local("Pretendard ExtraBold"),
-    url("/fonts/Pretendard-ExtraBold.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-ExtraBold.subset.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 700;
-  font-display: swap;
-  src: local("Pretendard Bold"),
-    url("/fonts/Pretendard-Bold.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-Bold.subset.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 600;
-  font-display: swap;
-  src: local("Pretendard SemiBold"),
-    url("/fonts/Pretendard-SemiBold.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-SemiBold.subset.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 500;
-  font-display: swap;
-  src: local("Pretendard Medium"),
-    url("/fonts/Pretendard-Medium.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-Medium.subset.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 400;
-  font-display: swap;
-  src: local("Pretendard Regular"),
-    url("/fonts/Pretendard-Regular.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-Regular.subset.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 300;
-  font-display: swap;
-  src: local("Pretendard Light"),
-    url("/fonts/Pretendard-Light.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-Light.subset.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 200;
-  font-display: swap;
-  src: local("Pretendard ExtraLight"),
-    url("/fonts/Pretendard-ExtraLight.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-ExtraLight.subset.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Pretendard";
-  font-weight: 100;
-  font-display: swap;
-  src: local("Pretendard Thin"),
-    url("/fonts/Pretendard-Thin.subset.woff2") format("woff2"),
-    url("/fonts/Pretendard-Thin.subset.woff") format("woff");
-}


헉 엄청나게 코드를 줄이셨네요 👍🏻

SsongQ-92 added 2 commits January 25, 2024 14:16

fix: CSS nesting warning 해결 with @tailwindcss/nesting

f177a44

style: Design System globals.css에 적용 및 Noto Sans 글꼴 root Layout에 적용

062ee1b

Ssong-Q added this to the ❤️‍🔥 1번째 스프린트 milestone Jan 25, 2024

Ssong-Q requested review from BeMatthewsong, leegyuho-programer and K-Y-Hoo January 25, 2024 05:28

Ssong-Q self-assigned this Jan 25, 2024

Ssong-Q linked an issue Jan 25, 2024 that may be closed by this pull request

🚩 Design System 세팅하기 #11

Closed

1 task

Ssong-Q commented Jan 25, 2024

View reviewed changes

BeMatthewsong approved these changes Jan 25, 2024

View reviewed changes

Ssong-Q merged commit 6beb387 into dev Jan 25, 2024
4 checks passed

Ssong-Q deleted the chore/design-system branch January 25, 2024 12:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[송규경] Chore/Design: Design System 세팅 및 Nested CSS warning 해결 #15

[송규경] Chore/Design: Design System 세팅 및 Nested CSS warning 해결 #15

Ssong-Q commented Jan 25, 2024

vercel bot commented Jan 25, 2024

Ssong-Q Jan 25, 2024

BeMatthewsong Jan 25, 2024

Ssong-Q Jan 25, 2024

Ssong-Q Jan 25, 2024

Ssong-Q Jan 25, 2024

Ssong-Q Jan 25, 2024

BeMatthewsong left a comment

BeMatthewsong Jan 25, 2024

BeMatthewsong Jan 25, 2024

Ssong-Q Jan 25, 2024

BeMatthewsong Jan 25, 2024

[송규경] Chore/Design: Design System 세팅 및 Nested CSS warning 해결 #15

[송규경] Chore/Design: Design System 세팅 및 Nested CSS warning 해결 #15

Conversation

Ssong-Q commented Jan 25, 2024

📖 작업 내용

Nested CSS warning 해결

Error log

해결 방법

Design System 세팅 완료

Color

Font

✅ PR 포인트

Issue close #11

📸 스크린샷

vercel bot commented Jan 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BeMatthewsong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment