PostCSS با CSS Modules و React

معرفی سریع

ماژول‌های CSS به‌عنوان راهی برای نام‌گذاری کلاس‌ها و انیمیشن‌ها به صورت محلی برای کمک به جلوگیری از برخی از شلوغ شدن فضای پیش‌فرض گلوبال که CSS نرمال مبتنی بر آن است، در نظر گرفته شده‌اند.

PostCSS راهی برای تغییر سبک ها با استفاده از افزونه های جاوا اسکریپت ارائه می دهد.

آیا می توانیم کاری کنیم که با هم کار کنند؟ چرا ما می خواهیم؟ بیایید ابتدا به سوال دوم پاسخ دهیم.

چرا

PostCSS عمیق است و دارای یک اکوسیستم عمیق است و پلاگین postcss-preset-env برای من جالب است . امروزه با استفاده از این افزونه به جدیدترین ویژگی‌های CSS و پلی‌فیل‌های polyfills آن‌ها دسترسی پیدا می‌کنید. این نقش قبلاً توسط cssnext پر می شد، اما اخیراً منسوخ شده است ، بنابراین چه زمانی بهتر برای بررسی postcss-preset-env!

مشکل اولیه ای که من با استفاده از ماژول های CSS داشتم، سینتکس و ساختار "متغیرها"ی آن بود. در حالی که آنها قطعا وجود دارند ، من واقعاً در سینتکس آن را پیدا نمیکردم، و متغیرهای CSS در حال حاضر در spec هستند، پس چرا ما این چرخ خاص را دوباره اختراع می‌کنیم؟ فکر نمی‌کنم در این احساس تنها باشم، به نظر می‌رسد افراد دیگر می‌پرسند چگونه از ماژول‌های CSS با متغیرهای استاندارد CSS استفاده کنند، بنابراین ما اینجا هستیم.

این را با برخی از عملکردهای CSS آینده نسبتاً شیرین همراه کنید ، و ما دلیل کافی برای پیوند PostCSS با ماژول های CSS داریم.

باشه بریم سراغش امیدوارم آماده باشید تا دایرکتوری node_modules خود کمی رشد کند، ما باید مقداری نصب انجام دهیم!

ابتدا، ماژول های CSS را برای کار کردن در زمینه برنامه React خود قرار دهید.

ماژول های CSS

بیایید babel-plugin-react-css-modules (آیا نام بسته npm طولانی تری وجود داره؟) را نصب کنیم. این یک جزء زمان اجرا دارد، بنابراین در واقع به جای وابستگی های devDependencies شما به وابستگی های شما تعلق دارد . اینجوری نصبش کن:

npm install babel-plugin-react-css-modules --save

اطمینان حاصل کنید که babelrc. شما یا هر معادل دیگری که برای پیکربندی Babel استفاده می‌کنید شامل افزونه جدید باشد:

plugins: [‘react-css-modules’]

و اکنون باید Webpack را پیکربندی کنیم تا به آن بگوییم چگونه در فایل‌های CSS بارگذاری شود. برای این مورد به style-loader و css-loader نیاز داریم . اینها وابستگی یا Dependencies های معمولی هستند ، بنابراین مطمئن شوید که آنها را به همین شکل نصب کرده اید.

npm install css-loader style-loader --save-dev

اکنون به Webpack بگوییم که از این لودرها برای فایل های CSS استفاده کند. موارد زیر را به webpack.config.js خود اضافه کنید

{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
      },
    },
  ],
}

چه خبر از localIdentName ؟ سؤال خوبی بود! وقتی مشخصات ماژول‌های CSS را روشن می‌کنید، css-loader کلاس‌های css شما را مطابق این شناسه تغییر می‌دهد. این به این معنی است که شما می توانید دو کلاس دکمه در پایگاه کد خود داشته باشید و آنها با هم تداخل ندارند.

با این حال، این بدان معناست که وقتی یک نام کلاس را به مؤلفه React خود اضافه می کنید، باید بدانید که css-loader قرار است نام کلاس شما را به چه چیزی تبدیل کند، درست است؟ خوب اینجاست که babel-plugin-react-css-modules وارد می‌شود. این ماژول‌ها همان munging نام کلاس‌ها را مانند css-loader انجام می‌دهد، فقط باید مطمئن شویم که آنها برای استفاده از همان روش munging پیکربندی شده‌اند.

مقدار پیش‌فرض این گزینه در css-loader با babel-plugin-react-css-modules متفاوت است، بنابراین تعیین آن به عنوان [path]___[name]__[local]___[hash:base64:5] این مشکل را برطرف می‌کند.

عالی است، اکنون در کامپوننت React خود باید بتوانید فایل CSS را مستقیماً وارد کنید:

App.css

.app {
  border: 1px solid red;
}

App.jsx

import React from 'react';
import './App.css';
const App = () => (
  <div styleName=&quotapp&quot>
    Hello, world!
  </div>
);
export default App;

ویژگی styleName جایگزین babel-plugin-react-css-modules برای className است ، اما خیلی سریع به آن عادت می کنید.

با فرض اینکه همه چیز جواب داده باشد، نام کلاس هایی خواهید داشت که شبیه به سوپ کلمه هستند:

PostCSS

و حالا برای چیزهای سرگرم کننده. تعداد زیادی ماژول برای نصب، بنابراین اجازه دهید شروع کنیم:

npm install postcss postcss-import postcss-loader postcss-preset-env postcss-url --save-dev

ما باید webpack.config.js خود را تغییر دهیم تا مطمئن شویم که postcss-loader استفاده می شود:

{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
      },
    },
    { loader: 'postcss-loader' }
  ],
}

و اکنون به یک فایل postcss.config.js جدید نیاز داریم

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-url'),
    require('postcss-preset-env')({
      browsers: 'last 2 versions',
      stage: 0,
    }),
  ],
};

حالا ما می توانیم آن را امتحان کنیم! یک فایل color.css جدید بسازید

:root { 
  --errorRed: #e03030; 
}

آن بلوک سبک چگونه به نظر می رسد؟

خوب! شما قانون var() را برای مرورگرهایی که از آن پشتیبانی می کنند، یا بازگشتی برای مرورگرهایی که پشتیبانی نمی کنند دریافت می کنید.

جمع بندی

به‌دست آوردن ترکیب مناسبی از ماژول‌ها برای انجام این کار، چالش واقعی در این مورد بود، پیکربندی خودش نسبتاً آسان بود.

اگر این برای شما کار نمی کند، چیزی گم شده است، یا فکر می کنید من در این مورد راه اشتباهی را طی کرده ام، مایلم در نظرات از شما بشنوم.