বিনামূল্যে CSS বিউটিফায়ার

কিভাবে কাজ করে

এই টুল পেজে সরাসরি তৈরি একটি হাতে লেখা রিকার্সিভ পার্সার দিয়ে CSS ফরম্যাট করে — কোনো তৃতীয় পক্ষের লাইব্রেরি বা সার্ভার কল নেই। পার্সারটি আপনার CSS অক্ষর ধরে ধরে পড়ে, উদ্ধৃত স্ট্রিং, url() মান, নেস্টেড at-rule এবং কমেন্ট ঠিকভাবে সামলায়, যা সাধারণ regex-ভিত্তিক পদ্ধতিকে বিভ্রান্ত করত।

1. 1
   অক্ষর-স্তরের টোকেনাইজেশন

   walkCss ফাংশন কাঁচা ইনপুট একবারে এক অক্ষর করে স্ক্যান করে, উদ্ধৃতির অবস্থা ও বন্ধনীর গভীরতা মনে রেখে, যাতে url(), স্ট্রিং মান বা কমেন্টের ভেতরের সেমিকোলন বা ব্রেস কখনো কাঠামোগত বিভাজক ভেবে ভুল না হয়।
2. 2
   ব্লক ও ঘোষণা আলাদা করা

   স্ক্যানার শীর্ষ-স্তরের একটি খোলা ব্রেস পেলে সে prelude (selector বা at-rule কীওয়ার্ড) বের করে এবং ব্লকের ভেতরের অংশ রিকার্সিভভাবে প্রক্রিয়া করে — যাতে নিজেই নেস্টেড নিয়ম (@media, @supports, নেটিভ CSS nesting) থাকতে পারে, যা আরও গভীর রিকার্শনে সামলানো হয়।
3. 3
   প্রপার্টি সাজানো ও ইনডেন্টেশন

   প্রতিটি ব্লকের ঘোষণাগুলো একসাথে জড়ো হয়, তারপর ঐচ্ছিকভাবে প্রপার্টির নাম অনুযায়ী বর্ণানুক্রমে সাজিয়ে বেছে নেওয়া ইনডেন্ট প্রস্থে (2 বা 4 স্পেস) লেখা হয়। Minify মোড হোয়াইটস্পেস পুরোপুরি বাদ দেয় এবং কমেন্ট সরিয়ে দেয়।
4. 4
   ব্রাউজারেই তাৎক্ষণিক আউটপুট

   টাইপ করার সময় useMemo হুক দিয়ে ফলাফল দেখা যায় — কিছুই কোথাও পাঠানো হয় না। ফরম্যাট বা minify করা CSS ক্লিপবোর্ডে কপি বা .css ফাইল হিসেবে ডাউনলোড করা যায়, আর প্যানেলে মূলের তুলনায় আকারের পার্থক্য দেখায়।

সম্পর্কিত টুলস