Stylify CSS로 더 빠르게 Next.js 웹사이트 스타일 지정

Stylify을 사용하여 Next.js 웹 사이트의 스타일을 더 빠르고 효율적이며 직관적으로 만드십시오. 선택자와 구문을 연구하지 마십시오. 순수한 CSS 구문을 사용하고 프로덕션을 위한 고급 최적화를 통해 자동으로 생성된 CSS를 가져옵니다.

더 쉽게 시작하려면 Stylify Stackblitz playground 🎮을(를) 확인하세요.

소개

Stylify은 작성하는 내용에 따라 동적으로 CSS를 생성합니다. 구문은 cssproperty:value 와 유사합니다. 정의된 유틸리티는 구성 요소 선택기와 결합되며 프로덕션에서는 .color\:red,.button {color:red} ~ _zx, _ga{color:red} 와 같이 최소한으로 축소됩니다.

Stylify를 사용하면 매우 작은 번들을 얻을 수 있고 추가 레이지 로드된 CSS 청크를 생성하고 HTML 및 선택기를 작성하여 페이지 스타일을 지정할 수 있습니다 🤟.

Next.js 설정

Next.js를 설정하는 가장 쉬운 방법은 cli를 사용하는 것입니다.

달리다 yarn create next-app

프로젝트 이름 선택

이렇게 하면 기본 Next.js 애플리케이션 스켈레톤을 얻을 수 있습니다.

Stylify 통합

NPM 또는 Yarn을 사용하여 @stylify/unplugin 패키지를 설치합니다.

yarn add @stylify/unplugin
npm i @stylify/unplugin

next.config.js를 열고 다음 콘텐츠를 복사합니다.

const { webpackPlugin } = require('@stylify/unplugin');

const stylifyPlugin = (dev) => webpackPlugin({
    dev: dev,
    transformIncludeFilter: (id) => id.endsWith('js'),
    bundles: [{
        outputFile: './styles/stylify.css',
        // Generate CSS from all js files
        files: ['./pages/**/*.js'],
    }],
    extend: {
        bundler: {
            compiler: {
                selectorsAreas: [
                    // For selecting className="selector"
                    '(?:^|\\s+)className="([^"]+)"',
                    '(?:^|\\s+)className=\'([^\']+)\'',
                    '(?:^|\\s+)className=\\{`((?:.|\n)+)`\\}'
                ]
            }
        }
    }
});

module.exports = {
  reactStrictMode: true,
  webpack: (config, { dev }) => {
    // Add Stylify Webpack plugin
    config.plugins.push(stylifyPlugin(dev));
    return config;
  }
}

마지막 단계에서 pages/_app.js를 열고 stylify.css에 경로를 추가합니다.

// ...
import '../styles/stylify.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

웹사이트 스타일링

아래 코드를 pages/index.js에 복사하고 yarn dev를 실행하면 스타일이 지정된 Hello World! 텍스트를 얻게 됩니다.

export default function Home() {
  return <div className="color:blue">Hello World!</div>;
}

Stylify는 js 파일의 변경 사항을 감시하고 css를 styles/stylify.css로 생성합니다.font-size:24px와 같은 선택기를 추가하면 CSS가 자동으로 업데이트됩니다 🎉.

Stackblitz.com 💡에서 직접 Stylify를 사용해 보십시오.

구성품

유틸리티 선택기로 부풀어 오른 템플릿은 읽기 어렵습니다. Stylify를 사용하면 content options (대괄호 없는 javascript 객체 예상) 또는 compiler config 을 통해 사용되는 파일에서 구성 요소를 직접 정의할 수 있습니다.

/*
@stylify-components
  container: 'max-width:800px margin:0__auto'
/@stylify-components
*/
export default function Home() {
  return (
    <div className="container">
      <div className="color:blue">Hello World!</div>
    </div>
  )
}

변수

선택기에서 하드코딩된 값을 피하는 것이 좋습니다. Variables은 구성 요소와 동일한 방식으로 정의할 수 있습니다.

/*
@stylify-variables
  blue: 'steelblue',
  containerWidth: '800px'
/@stylify-variables

@stylify-components
  container: 'max-width:$containerWidth margin:0__auto'
/@stylify-components
*/
export default function Home() {
  return (
    <div className="container">
      <div className="color:$blue">Hello World!</div>
    </div>
  )
}

프로덕션 빌드

yarn build + yarn start 를 사용하여 프로덕션 빌드를 실행하면 jsx 마크업이 다음과 같이 엉망이 됩니다.

export default function Home() {
  return (
    <div className="_7tcrv">
      <div className="_ro073">Hello World!</div>
    </div>
  )
}

CSS도 단축됩니다.

:root {
    --blue: #4682b4;
    --containerWidth: 800px
}
._ro073 {color: #4682b4}
._7tcrv,._bcda8 { max-width: 800px }
._7tcrv,._m0vnad { margin: 0 auto }

필요한 모든 구성

위의 예에는 Stylify가 할 수 있는 모든 것이 포함되어 있지 않습니다.

템플릿

에서 nested files을 매핑할 수 있습니다.

스타일 global selectors

정의하다 custom screens

여백 왼쪽

에 대해 ml:20px와 같은 own macros 추가

기타

자세한 내용은 checkout the docs로 문의하십시오 💎.

당신이 무슨 생각을하는지 제게 알려주세요!

나는 어떤 피드백에도 기뻐할 것입니다! Stylify은 여전히 ​​새로운 라이브러리이며 개선할 여지가 많습니다 🙂.


연락을 유지하다:
👉
👉
👉 stylifycss.com
👉
👉 medium.com/@8machy