Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(dependency): vanilla extract로 의존성 변경 #6

Merged
merged 2 commits into from
Mar 4, 2024
Merged

chore(dependency): vanilla extract로 의존성 변경 #6

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f07d52
chore(dependency): vanilla extract로 의존성 변경
Ubinquitous Mar 3, 2024
4b1a290
chore(css): vanilla extract example 삭제
Ubinquitous Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions .babelrc.js
View file
Open in desktop

This file was deleted.

5 changes: 3 additions & 2 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
jest.config.js
jest.setup.js
next.config.js
commitlint.config.js
commitlint.config.js
.eslintrc.js
next.config.mjs
5 changes: 5 additions & 0 deletions app/asd.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { style } from "@vanilla-extract/css";

export const container = style({
background: "green",
});
19 changes: 0 additions & 19 deletions app/global-error.jsx
View file
Open in desktop

This file was deleted.

99 changes: 6 additions & 93 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,8 @@
import Image from "next/image";
import styles from "./page.module.css";
import React from "react";
import { container } from "./asd.css";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.css.ts 파일에 여러 style들이 있으면

import * as styles from "./asd.css";

이런 식으로 사용하는것이 좋을 것 같습니다

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다! 예제로 적어둔걸 커밋해버렸네요 !!!
다시 지워놓겠습니다 😀
앞으로의 스타일링은 @jyh071116 님이 말씀해주신 대로 진행하면 좋을 것 같습니다!


export default function Home() {
return (
<main className={styles.main}>
<div className={styles.description}>
<p>
Get started by editing&nbsp;
<code className={styles.code}>app/page.tsx</code>
</p>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority
/>
</a>
</div>
</div>
const Home = () => {
return <div className={container}>asd</div>;
};

<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>

<div className={styles.grid}>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Docs <span>-&gt;</span>
</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>

<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Learn <span>-&gt;</span>
</h2>
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
</a>

<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Templates <span>-&gt;</span>
</h2>
<p>Explore starter templates for Next.js.</p>
</a>

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Deploy <span>-&gt;</span>
</h2>
<p>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
);
}
export default Home;
10 changes: 7 additions & 3 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import { withSentryConfig } from "@sentry/nextjs";
import stylexPlugin from "@stylexjs/nextjs-plugin";
import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";

const withVanillaExtract = createVanillaExtractPlugin({
identifiers: ({ hash }) => `bumawiki_${hash}`,
});

/** @type {import('next').NextConfig} */
const nextConfig = {
const nextConfig = withVanillaExtract({
swcMinify: true,
images: {
domains: [],
},
};
});

export default withSentryConfig(
nextConfig,
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,11 @@
},
"dependencies": {
"@sentry/nextjs": "^7.104.0",
"@stylexjs/babel-plugin": "^0.5.1",
"@stylexjs/nextjs-plugin": "^0.5.1",
"@stylexjs/stylex": "^0.5.1",
"@tanstack/react-query": "^5.24.6",
"@types/react-beautiful-dnd": "^13.1.8",
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@typescript-eslint/parser": "^7.1.0",
"@vanilla-extract/css": "^1.14.1",
"autoprefixer": "^10.4.18",
"babel-loader": "^9.1.3",
"babel-plugin-styled-components": "^2.1.4",
Expand All @@ -38,9 +36,11 @@
"react-dom": "^18"
},
"devDependencies": {
"@stylexjs/babel-plugin": "^0.5.1",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@vanilla-extract/next-plugin": "^2.3.6",
"eslint": "^8",
"eslint-config-next": "14.1.1",
"husky": "^9.0.11",
Expand Down
Loading