vanilla-extractをlinariaに移行 (#544)

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["next/babel", "linaria/babel"]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Linaria"]
+}

next.config.js

@@ -2,10 +2,9 @@
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
     enabled: process.env.ANALYZE === 'true',
 });
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
 
-const withVanillaExtract = createVanillaExtractPlugin();
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const withLinaria = require('next-linaria');
 
 /** @type {import('next').NextConfig} */
 const config = {
@@ -21,4 +20,4 @@ const config = {
     pageExtensions: ['tsx'],
 };
 
-module.exports = withBundleAnalyzer(withVanillaExtract(config));
+module.exports = withBundleAnalyzer(withLinaria(config));

package.json

@@ -33,8 +33,6 @@
     ]
   },
   "dependencies": {
-    "@vanilla-extract/css": "1.9.2",
-    "@vanilla-extract/next-plugin": "2.1.1",
     "date-fns": "2.29.3",
     "gray-matter": "4.0.3",
     "next": "13.4.1",
@@ -55,7 +53,6 @@
     "@types/prismjs": "^1.16.6",
     "@typescript-eslint/eslint-plugin": "5.59.7",
     "@typescript-eslint/parser": "5.59.7",
-    "@vanilla-extract/vite-plugin": "3.8.0",
     "@vitejs/plugin-react": "4.0.0",
     "@vitest/coverage-c8": "0.29.2",
     "eslint": "8.41.0",
@@ -69,9 +66,11 @@
     "identity-obj-proxy": "3.0.0",
     "image-size": "^1.0.0",
     "jsdom": "22.0.0",
+    "linaria": "4.1.17",
     "lint-staged": "13.1.2",
     "markdown-it": "13.0.1",
     "markuplint": "3.3.1",
+    "next-linaria": "0.11.0",
     "prettier": "2.8.4",
     "ts-mockito": "2.6.1",
     "typescript": "5.0.4",

src/components/common/GlobalHeader/GlobalHeaderMain.tsx

@@ -1,20 +1,21 @@
 import { FC } from 'react';
+import { css } from '@linaria/core';
 import { Link } from '../Link/Link';
 import {
     TITLE_LOGO_IMAGE_URL,
     TITLE_LOGO_IMAGE_ALT,
     TITLE_LOGO_LINK_TITLE,
-} from '../../../constants';
-import * as style from './GlobalHeaderMain.css';
+} from '@/constants';
+import { colors } from '@/styles/color';
 
 export const GlobalHeaderMain: FC = () => (
-    <div className={style.wrapper}>
-        <div className={style.globalHeaderMain}>
+    <div className={wrapper}>
+        <div className={globalHeaderMain}>
             <Link href="/" title={TITLE_LOGO_LINK_TITLE}>
                 <img
                     src={TITLE_LOGO_IMAGE_URL}
                     alt={TITLE_LOGO_IMAGE_ALT}
-                    className={style.titleLogoImg}
+                    className={titleLogoImg}
                     width={438}
                     height={38}
                     decoding="async"
@@ -23,3 +24,17 @@ export const GlobalHeaderMain: FC = () => (
         </div>
     </div>
 );
+
+const wrapper = css`
+    background-color: ${colors.main};
+`;
+
+const globalHeaderMain = css`
+    display: flex;
+    justify-content: center;
+    padding: 1rem 20px;
+`;
+
+const titleLogoImg = css`
+    width: 100%;
+`;

src/components/common/Layout/Layout.tsx

@@ -2,7 +2,8 @@ import { FC, PropsWithChildren } from 'react';
 import { profile } from '@/config/profile';
 import { Tag, SeoMetadata } from '@/entities';
 import { GlobalHeader, Sidebar, Seo } from '@/components/common';
-import * as style from './Layout.css';
+import { css } from '@linaria/core';
+import { colors } from '@/styles/color';
 
 export type LayoutProps = PropsWithChildren<{
     tags: Tag[];
@@ -11,18 +12,56 @@ export type LayoutProps = PropsWithChildren<{
 
 export const Layout: FC<LayoutProps> = ({ children, tags, seoMetadata }) => {
     return (
-        <div>
+        <div className={globals}>
             <Seo
                 title={seoMetadata.title}
                 description={seoMetadata.description}
                 author={seoMetadata.author}
                 ogp={seoMetadata.ogp}
             />
             <GlobalHeader />
-            <div className={style.main} tabIndex={-1}>
-                <main className={style.content}>{children}</main>
+            <div className={main} tabIndex={-1}>
+                <main className={content}>{children}</main>
                 <Sidebar tags={tags} profile={profile} />
             </div>
         </div>
     );
 };
+
+export const main = css`
+    display: grid;
+    grid-template-columns: auto 240px;
+    grid-gap: 3rem;
+    margin: 0 auto;
+    max-width: 1152px;
+    padding: 2rem 20px;
+    @media (max-width: 850px) {
+        grid-template-columns: 1fr;
+    }
+`;
+
+export const content = css`
+    overflow: auto;
+`;
+
+const globals = css`
+    :global() {
+        body {
+            background-color: ${colors.background};
+            color: ${colors.textBlack};
+            font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
+                'Hiragino Sans', Meiryo, sans-serif;
+            margin: 0;
+        }
+        h1,
+        h2,
+        h3 {
+            margin: 0;
+        }
+
+        p,
+        ul {
+            line-height: 1.8;
+        }
+    }
+`;

src/components/common/Link/Link.tsx

@@ -1,6 +1,6 @@
 import { ComponentProps, FC, PropsWithChildren } from 'react';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
-import * as style from './Link.css';
+import { css } from '@linaria/core';
 
 type LinkProps = PropsWithChildren<{
     decoration?: boolean;
@@ -22,7 +22,7 @@ export const Link: FC<LinkProps> = ({
         <NextLink href={href} prefetch={prefetch} passHref legacyBehavior>
             <a
                 {...rest}
-                className={`${decoration ? '' : style.nonDecoration} ${
+                className={`${decoration ? '' : nonDecoration} ${
                     className ? className : ''
                 }`}
             >
@@ -31,3 +31,8 @@ export const Link: FC<LinkProps> = ({
         </NextLink>
     );
 };
+
+export const nonDecoration = css`
+    text-decoration: none;
+    color: inherit;
+`;

src/components/common/Sidebar/Sidebar.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react';
+import { css } from '@linaria/core';
 import { SidebarTags } from './SidebarTags';
 import { SidebarProfile } from './SidebarProfile';
 import { Tag } from '@/entities';
 import { Profile } from '@/config/profile';
-import * as style from './SideBar.css';
 
 type SidebarProps = {
     tags: Tag[];
@@ -12,7 +12,11 @@ type SidebarProps = {
 
 export const Sidebar: FC<SidebarProps> = ({ tags, profile }) => (
     <aside>
-        <SidebarProfile className={style.section} profile={profile} />
+        <SidebarProfile className={section} profile={profile} />
         <SidebarTags tags={tags} />
     </aside>
 );
+
+export const section = css`
+    margin-bottom: 2rem;
+`;