‏افزونهٔ CSSTree برای فهمیدن سینتکس Tailwind

پکیج tailwind-csstree که Nicholas Zakas نوشته، سینتکس سفارشی Tailwind رو به فرمت CSSTree میاره. مشکلی که حل می‌کنه اینه: ابزارهایی که CSS رو پارس می‌کنن سر سینتکس خاص تیلویند گیر می‌کنن، و این پکیج تعریف اون سینتکس رو بهشون می‌ده.

پکیج دو شیء صادر می‌کنه: tailwind3 برای سینتکس Tailwind 3 و tailwind4 برای Tailwind 4. کافیه همون نسخه‌ای که لازم داری رو ایمپورت کنی.

کاربرد اصلیش با افزونهٔ CSS لینتر ESLinte: توی فایل eslint.config.js از طریق languageOptions.customSyntax نسخهٔ تیلویند رو می‌دی تا لینتر CSS رو درست بفهمه. سازنده تذکر داده که هنوز همهٔ قواعد این افزونه با سینتکس تیلویند کار نمی‌کنن و داره روش کار می‌کنه.

می‌شه مستقیم هم با CSSTree استفاده‌اش کرد؛ با fork یه پارسر می‌سازی که سینتکس تیلویند رو می‌شناسه:

import { fork } from "@eslint/css-tree";
import { tailwind4 } from "tailwind-csstree";

const { parse } = fork(tailwind4);
const result = parse("@config 'tailwind.config.js'");

بعد از اون می‌تونی درخت سینتکس رو بگیری و پردازشش کنی. پروژه زیر لایسنس Apache 2.0 منتشر شده.

نکات کلیدی:

• tailwind-csstree سینتکس سفارشی Tailwind رو به فرمت CSSTree میاره
• دو شیء tailwind3 و tailwind4 برای دو نسخهٔ تیلویند
• کاربرد اصلی: تنظیم customSyntax توی افزونهٔ CSS لینتر ESLint
• استفادهٔ مستقیم با CSSTree از طریق fork
• هنوز همهٔ قواعد افزونهٔ ESLint با سینتکس تیلویند کار نمی‌کنن