مقدمه ای بر PostCSS – SitePoint

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

ارزش و محدودیت های پیش پردازنده ها

اکثر توسعه دهندگان CSS با پیش پردازنده ها آشنا هستند. ابزارهایی از جمله Sass، Less و Stylus مفاهیمی مانند جزییات فایل، تودرتو، متغیرها و mixins را معرفی کردند. برخی از ویژگی‌ها به تدریج در CSS بومی ظاهر می‌شوند، اما یک پیش‌پردازنده هنوز برای مدیریت پایگاه‌های کد بزرگ و حفظ سبک و سازگاری کدنویسی مفید است.

شاید تصور زندگی بدون پیش پردازنده CSS دشوار باشد، اما نکات منفی نیز وجود دارد:

• پیش پردازنده ها قابل تمدید یا محدود نیستند. اکثر پیش پردازنده ها یک جعبه سیاه هستند که مجموعه خاصی از ویژگی های پشتیبانی شده را در اختیار شما قرار می دهند. ممکن است امکان نوشتن توابع سفارشی وجود داشته باشد، اما عملکردی فراتر از محدوده آن ابزار غیرممکن است – مانند قرار دادن یک SVG به عنوان تصویر پس زمینه.

  به طور مشابه، نمی‌توانید توسعه‌دهندگان را از استفاده از گزینه‌هایی که ترجیح می‌دهید اجتناب کنید، متوقف کنید @extend یا لانه سازی عمیق Linting می تواند کمک کند، اما پیش پردازنده را از کامپایل یک فایل معتبر باز نمی دارد.

• پیش پردازنده ها سینتکس خود را ارائه می کنند. کد پیش پردازنده ممکن است شبیه CSS باشد، اما هیچ مرورگری نمی تواند فایل را به صورت بومی تجزیه کند. نحو متفاوت است و اگر ابزار شما تغییر کند یا در دسترس نباشد، کد شما برای قابل استفاده کردن به به روز رسانی نیاز دارد.

فواید آن بیشتر از این خطرات است، اما یک جایگزین وجود دارد…

PostCSS چیست؟

PostCSS است یک پیش پردازنده نیست (اگرچه می تواند مانند آن رفتار کند). این یک ابزار Node.js است که CSS معتبر می گیرد و آن را تقویت می کند. حتی کسانی که از Sass، Less یا Stylus استفاده می کنند، اغلب یک مرحله PostCSS را بعد از کامپایل اولیه CSS اجرا می کنند. ممکن است با PostCSS مواجه شده باشید افزونه خودکار پیشوند که به طور خودکار پیش می آید -webkit، -moz، و -ms پیشوندهای فروشنده به ویژگی های CSS که به آنها نیاز دارند.

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

دور و بر 350 پلاگین موجود است، و اکثراً یک کار واحد مانند خط کشی @import اعلامیه ها، ساده کردن calc() کارکرد، رسیدگی به دارایی های تصویری، لینتینگ نحوی، کوچک کردن، و بیشتر. جستجوی کاربرپسندتر افزونه در PostCSS موجود است کاتالوگ افزونه ها.

مزایای PostCSS عبارتند از:

• شما با CSS استاندارد شروع می کنید. PostCSS به CSS چیست بابل به جاوا اسکریپت است. می‌تواند یک stylesheet استاندارد بگیرد که در مرورگرهای اخیر کار می‌کند و CSS را که در همه جا کار می‌کند خروجی می‌دهد – به عنوان مثال، ترجمه جدیدتر inset ویژگی بازگشت به top، bottom، left، و right خواص با گذشت زمان، با پشتیبانی بیشتر مرورگرها، می توانید این فرآیند را کنار بگذارید inset.

  مسلماً، برخی از پلاگین ها به شما اجازه می دهند که نحوی شبیه به پیش پردازنده را تجزیه کنید که CSS استاندارد نیست، اما مجبور نیستید از آنها استفاده کنید.

• از افزونه ها و ویژگی های مورد نیاز خود استفاده کنید. PostCSS قابل تنظیم است و می توانید افزونه های مورد نیاز خود را بکار ببرید. مثلا می توانید حمایت کنید جزئی و لانه سازی اما به متغیرها، حلقه‌ها، میکس‌ها، نقشه‌ها و سایر ویژگی‌های موجود در Sass اجازه نمی‌دهد.

• یک پیکربندی سفارشی برای هر پروژه ارائه دهید. یک پیکربندی پروژه فردی می‌تواند مجموعه افزونه‌های مورد استفاده در جاهای دیگر را افزایش یا کاهش دهد. گزینه ها بسیار متنوع تر از هر پیش پردازنده است.

• پلاگین های PostCSS خود را بنویسید. طیف گسترده ای از پلاگین ها برای گسترش نحو، تجزیه ویژگی های آینده، افزودن بک گراند، بهینه سازی کد، پردازش رنگ ها، تصاویر، فونت ها و حتی نوشتن CSS به زبان های دیگر در دسترس هستند. اسپانیایی و روسی.

  در صورت بعید که نمی توانید آنچه را که نیاز دارید پیدا کنید، می توانید خودت بنویس افزونه PostCSS در جاوا اسکریپت.

• احتمالاً در حال حاضر از PostCSS استفاده می کنید. اگر قبلاً از یک افزونه PostCSS مانند AutoPrefixer استفاده می کنید، ممکن است بتوانید وابستگی های پیش پردازنده خود را حذف کنید. PostCSS لزوماً سریعتر یا سبک تر از استفاده از یک پیش پردازنده نیست، اما می تواند تمام پردازش های CSS را در یک مرحله انجام دهد.

نصب PostCSS

PostCSS نیاز دارد Node.js، اما این آموزش نحوه نصب و اجرای PostCSS را از هر پوشه ای نشان می دهد – حتی آنهایی که پروژه های Node.js نیستند. شما همچنین می توانید از PostCSS استفاده کنید webpack، Parcel، Gulp.js و ابزارهای دیگر، اما ما به خط فرمان پایبند خواهیم بود.

با اجرای موارد زیر PostCSS را به صورت سراسری بر روی سیستم خود نصب کنید:

npm install -g postcss-cli

با وارد کردن این مورد مطمئن شوید که کار می کند:

postcss --help

نصب اولین پلاگین PostCSS

برای انجام هر کاری عملی به حداقل یک افزونه نیاز دارید. PostCSS وارد كردن پلاگین گزینه خوبی است که همه را درون خط قرار می دهد @import CSS شما را در یک فایل ادغام می کند. آن را به صورت سراسری نصب کنید مانند:

npm install -g postcss-import

برای تست این افزونه، یک پوشه پروژه جدید مانند cssproject، سپس یک را ایجاد کنید src زیر پوشه برای فایل های منبع شما ایجاد یک main.css فایل برای بارگیری تمام جزئی ها:

@import '_reset';
@import '_elements';

سپس یک را ایجاد کنید _reset.css فایل در همان پوشه:

* {
  padding: 0;
  margin: 0;
}

این را با یک دنبال کنید _elements.css فایل:

body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

PostCSS را از پوشه ریشه پروژه با ارسال فایل CSS ورودی، لیستی از افزونه ها اجرا کنید. --use، و یک --output نام فایل:

postcss ./src/main.css --use postcss-import --output ./styles.css

اگر هیچ خطایی ندارید، کد زیر به یک کد جدید خروجی می شود styles.css فایل در ریشه پروژه:

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
}
label {
  user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...

توجه داشته باشید که PostCSS می تواند فایل های CSS را در هر جایی خروجی دهد، اما پوشه خروجی باید وجود داشته باشد. ساختار پوشه را برای شما ایجاد نمی کند.

فعال و غیرفعال کردن نقشه های منبع

یک نقشه منبع درون خطی به طور پیش فرض خروجی است. هنگامی که فایل CSS کامپایل شده در یک صفحه HTML استفاده می شود، بررسی آن در ابزارهای توسعه دهنده مرورگر، فایل اصلی را نشان می دهد. src فایل و خط به عنوان مثال، مشاهده <body> سبک ها برجسته خواهند شد src/_elements.css خط 2 به جای styles.css خط 8.

می توانید با افزودن a یک نقشه منبع خارجی ایجاد کنید --map (یا -m) به postcss فرمان مزیت کمی به جز اینکه فایل CSS تمیزتر است و مرورگر نیازی به بارگیری نقشه منبع ندارد مگر اینکه ابزارهای توسعه دهنده باز باشند.

شما می توانید نقشه منبع را با --no-map. همیشه از این گزینه هنگام خروجی فایل های CSS برای استقرار تولید استفاده کنید.

افزونه AutoPrefixer را نصب و استفاده کنید

را پیشوند خودکار پلاگین اغلب اولین برخورد یک توسعه دهنده با PostCSS است. پیشوندهای فروشنده را با توجه به استفاده از مرورگر و قوانین تعریف شده در آن اضافه می کند caniuse.com. پیشوندهای فروشنده کمتر در مرورگرهای مدرن استفاده می‌شوند که عملکرد آزمایشی را پشت پرچم‌ها پنهان می‌کنند. با این حال هنوز خواصی مانند user-select که نیاز دارند -webkit-، -moz-، و -ms- پیشوندها

افزونه را به صورت سراسری با این نصب کنید:

npm install -g autoprefixer

سپس آن را به عنوان دیگری ارجاع دهید --use گزینه روی شما postcss دستور:

postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

را بررسی کنید label اعلامیه از خط 11 از styles.css برای مشاهده ویژگی های پیشوند فروشنده:

label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

AutoPrefixer از فهرست مرورگر ماژول برای تعیین اینکه کدام پیشوند مرورگر اضافه شود. پیش فرض این است:

• > 0.5%: مرورگری با حداقل 0.5 درصد سهم بازار
• last 2 versions: دو نسخه آخر این مرورگرها
• Firefox ESR: از جمله نسخه های پشتیبانی توسعه یافته فایرفاکس
• not dead: هر مرورگری که متوقف نشده است

شما می توانید این پیش فرض ها را با ایجاد یک تغییر دهید .browserslistrc فایل. مثلا:

> 2%

یا می توانید a اضافه کنید "browserslist" آرایه به package.json در پروژه Node.js مثلا:

"browserslist": [
   "> 2%"
]

هدف قرار دادن مرورگرهایی با سهم بازار 2٪ یا بیشتر فقط نیاز به یک -webkit- پیشوند در سافاری:

label {
  -webkit-user-select: none;
          user-select: none;
}

CSS را با cssnano کوچک کنید

cssnano CSS را با حذف فضای خالی، نظرات و سایر کاراکترهای غیر ضروری کوچک می کند. نتایج متفاوت خواهد بود، اما شما می توانید انتظار کاهش 30 درصدی فایل را داشته باشید که می توانید برای عملکرد بهتر صفحه وب، آن را در سرورهای تولیدی مستقر کنید.

cssnano را به صورت جهانی نصب کنید:

npm install -g cssnano

سپس آن را به خود اضافه کنید postcss فرمان ما نیز شامل خواهیم شد --no-map برای غیرفعال کردن نقشه منبع:

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css

با این کار فایل CSS به 97 کاراکتر کاهش می یابد:

*{margin:0;padding:0}body{font-family:sans-serif}label{-webkit-user-select:none;user-select:none}

زمانی که فایل‌های منبع تغییر می‌کنند، به‌طور خودکار ساخته شوند

PostCSS --watch هنگامی که هر یک از فایل های منبع تغییر می کند، گزینه به طور خودکار فایل CSS شما را می سازد. همچنین ممکن است بخواهید آن را اضافه کنید --verbose سوئیچ که هنگام وقوع یک ساخت گزارش می دهد:

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css --watch --verbose

ترمینال شما نشان داده خواهد شد Waiting for file changes. یک تغییر در هر فایل و styles.css بازسازی می شود. PostCSS همچنین مشکلاتی مانند خطاهای نحوی را گزارش خواهد کرد.

برای اتمام، فشار دهید Ctrl | Cmd + سی در ترمینال

یک فایل پیکربندی PostCSS ایجاد کنید

را postcss با اضافه کردن افزونه ها و گزینه های بیشتر، دستور طولانی و دست و پا گیر می شود. شما می توانید یک فایل پیکربندی جاوا اسکریپت ایجاد کنید که تمام گزینه ها را تعریف می کند و می تواند به طور منطقی تعیین کند که آیا در محیط توسعه یا تولید اجرا می شود.

یک فایل پیکربندی به نام ایجاد کنید postcss.config.cjs در ریشه پوشه پروژه شما. Aso به موارد زیر توجه کنید:

• می توانید فایل را در پوشه دیگری قرار دهید، اما باید آن را مشخص کنید --config <dir> هنگام دویدن postcss
• شما می توانید استفاده کنید postcss.config.js به عنوان نام فایل، اما PostCSS ممکن است در پروژه های Node.js که دارای شکست هستند "type": "module" تنظیم package.json

کد زیر را به آن اضافه کنید postcss.config.cjs:

module.exports = (cfg) => {

  const devMode = (cfg.env === 'development');

  return {

    map: devMode ? 'inline' : null,
    plugins: [
      require('postcss-import')(),
      require('autoprefixer')(),
      devMode ? null : require('cssnano')()
    ]

  };

};

PostCSS یک را پاس می کند cfg شی که شامل گزینه های خط فرمان است. مثلا:

{
  cwd: '/home/yourname/cssproject',
  env: undefined,
  options: {
    map: { inline: true },
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/yourname/cssproject/src',
    basename: 'main.css',
    extname: '.css'
  }
}

ماژول باید یک شی با ویژگی های اختیاری را برگرداند:

• map: تنظیم نقشه منبع
• parser: آیا از تجزیه کننده نحو غیر CSS (مانند scss افزونه)
• plugins: آرایه ای از افزونه ها و تنظیمات برای پردازش به ترتیب مشخص شده

کد بالا تشخیص می دهد که آیا postcss فرمان یک --env گزینه. این یک میانبر برای تنظیم است NODE_ENV متغیر محیطی. برای کامپایل CSS در حالت توسعه، اجرا کنید postcss با --env development و به صورت اختیاری تنظیم کنید --watch --verbose. این یک نقشه منبع درون خطی ایجاد می کند و خروجی را کوچک نمی کند:

postcss ./src/main.css --output ./styles.css --env development --watch --verbose

برای اجرا در حالت تولید و کامپایل CSS کوچک بدون نقشه منبع، از این استفاده کنید:

postcss ./src/main.css --output ./styles.css

در حالت ایده‌آل، می‌توانید اینها را به عنوان ترمینال یا اجرا کنید npm اسکریپت برای کاهش بیشتر تلاش تایپ کردن.

پیشرفت PostCSS

شما اکنون اصول اولیه PostCSS را می دانید. افزایش عملکرد به اضافه کردن و پیکربندی افزونه های بیشتر بستگی دارد. کمی زمان سرمایه گذاری کنید و به زودی گردش کاری خواهید داشت که می توانید آن را برای هر پروژه وب تطبیق دهید.

آموزش نحوه استفاده از PostCSS به عنوان جایگزین قابل تنظیم برای Sass نمونه های پیکربندی و گزینه های افزونه بیشتری را ارائه می دهد.

لینک های بیشتر: