இலவச CSS பியூட்டிஃபையர்

இது எவ்வாறு செயல்படுகிறது

இந்தக் கருவி பக்கத்திலேயே உருவாக்கப்பட்ட கையால் எழுதிய recursive parser மூலம் CSS ஐ வடிவமைக்கிறது — மூன்றாம் தரப்பு நூலகம் இல்லை, சர்வர் அழைப்பு இல்லை. parser உங்கள் CSS ஐ எழுத்து எழுத்தாகப் படித்து, எளிய regex அணுகுமுறைகளைக் குழப்பும் quoted strings, url() மதிப்புகள், nested at-rules, comments ஆகியவற்றைச் சரியாகக் கையாள்கிறது.

1. 1
   எழுத்து-நிலை tokenization

   walkCss function மூல உள்ளீட்டை ஒரு நேரத்தில் ஒரு எழுத்தாக ஸ்கேன் செய்து, quote நிலையையும் அடைப்புக்குறி ஆழத்தையும் கண்காணிக்கிறது; எனவே url(), string மதிப்புகள் அல்லது comments உள்ளே உள்ள அரைப்புள்ளிகளோ braces ஓ ஒருபோதும் கட்டமைப்புப் பிரிப்பான்களாகத் தவறாகக் கருதப்படுவதில்லை.
2. 2
   Block மற்றும் declaration பிரிப்பு

   scanner மேல்நிலை திறக்கும் brace ஐக் கண்டால், prelude ஐ (selector அல்லது at-rule keyword) பிரித்தெடுத்து block உடலை recursive ஆகச் செயலாக்குகிறது — அதில் ஆழமான recursion நிலையில் கையாளப்படும் nested rules (@media, @supports, native CSS nesting) இருக்கலாம்.
3. 3
   Property வரிசைப்படுத்தல் மற்றும் உள்தள்ளல்

   ஒவ்வொரு block இல் உள்ள declarations ஒரு தொகுப்பாகச் சேகரிக்கப்பட்டு, விருப்பப்படி property பெயரால் அகர வரிசையில் வரிசைப்படுத்தப்பட்டு, தேர்ந்தெடுத்த உள்தள்ளல் அகலத்துடன் (2 அல்லது 4 இடைவெளிகள்) எழுதப்படுகின்றன. Minify பயன்முறை வெற்றிடங்களை முழுவதும் தவிர்த்து comments ஐ நீக்குகிறது.
4. 4
   உடனடி உலாவி வெளியீடு

   useMemo hook வழியாக நீங்கள் தட்டச்சு செய்யும்போதே முடிவுகள் தோன்றும் — எதுவும் எங்கும் அனுப்பப்படுவதில்லை. வடிவமைத்த அல்லது minify செய்த CSS ஐக் கிளிப்போர்டுக்கு நகலெடுக்கலாம் அல்லது .css கோப்பாகப் பதிவிறக்கலாம்; அசலுடன் ஒப்பிட்ட அளவு வேறுபாட்டைப் பலகம் காட்டும்.

தொடர்புடைய கருவிகள்