အခမဲ့ CSS ချုံ့/လှပဆင်စက်

မည်သို့ အလုပ်လုပ်သည်

ဤကိရိယာသည် JavaScript ဖြင့် အစအဆုံး တည်ဆောက်ထားသော zero-dependency CSS tokenizer တစ်ခုကို သုံးပါသည် — ပြင်ပ library၊ server call မပါဝင်ပါ။ Tokenizer သည် ပြောင်းလဲမှု မလုပ်မီ character တစ်ခုစီကို code၊ comment၊ quoted string သို့မဟုတ် url() တန်ဖိုးအဖြစ် ခွဲခြားသည်၊ ၎င်းသည် whitespace rule များက string content၊ data URI သို့မဟုတ် calc() expression များကို ဖျက်ဆီးခြင်းကို ကာကွယ်ထားသည်။

1. 1
   Tokenization ဆင့်

   Input CSS ကို character-by-character scan လုပ်ပြီး type တပ်ထားသော token များအဖြစ် ခွဲသည် — raw code segment များ၊ /* ... */ comment များ၊ quoted string များ (escape sequence များ ထိန်းထားသည်) နှင့် url(...) block များ။ ၎င်းသည် နောက်ဆင့်ရှိ ပြောင်းလဲမှုများသည် string literal သို့မဟုတ် data URI ၏ content ကို ဘယ်တော့မှ မထိတွေ့ဘဲ CSS syntax စစ်စစ်ကိုသာ ထိတွေ့ကြောင်း သေချာစေသည်။
2. 2
   Minification (သို့) beautification

   Minify mode တွင် ရိုးရိုး comment များကို ဖယ်ရှားသည် (/*! license */ comment များကို ထားရှိသည်)၊ code token များအတွင်း whitespace run များကို space တစ်ခုတည်းအဖြစ် ချုံ့သည်၊ { } : ; , > ~ ပတ်ဝန်းကျင်ရှိ ပုဒ်ဖြတ်ပုဒ်ရပ်နှင့် ကပ်သော whitespace ကို ဖယ်ရှားသည်။ calc() expression များ ပျက်စီးခြင်းကို ရှောင်ရှားရန် + နှင့် - ပတ်ဝန်းကျင်ရှိ space များကို တမင် မထိတွေ့ဘဲ ထားသည်။ Beautify mode တွင် code ကို ဦးစွာ ရှင်းလင်းသော baseline သို့ minify လုပ်ပြီးမှ space နှစ်ခုအကွာနှင့် declaration-colon ရှာဖွေမှု — property: value colon ကို a:hover ကဲ့သို့ selector colon များနှင့် ခွဲခြားရန် — ဖြင့် ပြန်လည် tokenize လုပ်ပြီး ပြန်လည် indent လုပ်သည်။
3. 3
   Gzip size ခန့်မှန်းချက်

   Output ကို ထုတ်ပြီးနောက် browser ၏ native CompressionStream API ကို သုံး၍ ရလဒ်ကို gzip ဖြင့် ချုံ့ပြီး ရလဒ် byte count ကို တိုင်းတာသည်။ ၎င်းသည် gzip compression ပါသော web server တစ်ခုက network ပေါ်တွင် ပို့မည့် အရွယ်အစားနှင့် ကိုက်ညီသော လက်တွေ့ဆန်သော transfer-size ခန့်မှန်းချက်ကို ပေးသည်။
4. 4
   ကူးယူရန် သို့မဟုတ် ဒေါင်းလုဒ်ဆွဲရန်

   လုပ်ဆောင်ပြီးသော CSS ကို Clipboard API မှတစ်ဆင့် clipboard သို့ ရေးသည် (သို့) MIME type text/css ပါသော Blob ကို သုံး၍ styles.min.css (minify mode) သို့မဟုတ် styles.css (beautify mode) အဖြစ် ဒေါင်းလုဒ်ဆွဲနိုင်သည်။ Size လျှော့ချမှု ရာခိုင်နှုန်းကို သင်ရိုက်နေစဉ် တိုက်ရိုက် ပြသည်။

ဆက်နွှယ်သော ကိရိယာများ