DevTools-এ CSS পরিকাঠামোর আধুনিকীকরণ

কৃতি সাপ্রা

DevTools আর্কিটেকচার রিফ্রেশ: DevTools-এ CSS পরিকাঠামো আধুনিকীকরণ

এই পোস্টটি ব্লগ পোস্টগুলির একটি সিরিজের অংশ যা আমরা DevTools এর আর্কিটেকচারে যে পরিবর্তনগুলি করছি এবং এটি কীভাবে তৈরি করা হয়েছে তার বর্ণনা দেয়৷ আমরা ব্যাখ্যা করব কীভাবে CSS ঐতিহাসিকভাবে DevTools-এ কাজ করেছে এবং কীভাবে আমরা JavaScript ফাইলগুলিতে CSS লোড করার জন্য একটি ওয়েব স্ট্যান্ডার্ড সমাধানে স্থানান্তরিত করার প্রস্তুতির জন্য DevTools-এ আমাদের CSS আধুনিকীকরণ করেছি।

DevTools-এ CSS-এর আগের অবস্থা

DevTools দুটি ভিন্ন উপায়ে CSS প্রয়োগ করেছে: একটি DevTools-এর লিগ্যাসি অংশে ব্যবহৃত CSS ফাইলগুলির জন্য, একটি DevTools-এ ব্যবহৃত আধুনিক ওয়েব উপাদানগুলির জন্য৷

DevTools-এ CSS বাস্তবায়ন অনেক বছর আগে সংজ্ঞায়িত করা হয়েছিল এবং এখন সেকেলে। DevTools module.json প্যাটার্ন ব্যবহার করে আটকে আছে এবং এই ফাইলগুলি সরানোর জন্য একটি বিশাল প্রচেষ্টা করা হয়েছে৷ এই ফাইলগুলি অপসারণের জন্য শেষ ব্লকার হল resources বিভাগ, যা CSS ফাইলগুলিতে লোড করতে ব্যবহৃত হয়।

আমরা বিভিন্ন সম্ভাব্য সমাধান অন্বেষণে সময় ব্যয় করতে চেয়েছিলাম যা শেষ পর্যন্ত CSS মডিউল স্ক্রিপ্টে রূপান্তরিত হতে পারে। উদ্দেশ্য ছিল লিগ্যাসি সিস্টেমের কারণে সৃষ্ট প্রযুক্তিগত ঋণ অপসারণ করা কিন্তু সিএসএস মডিউল স্ক্রিপ্টে স্থানান্তর প্রক্রিয়াকে আরও সহজ করা।

DevTools-এ থাকা যেকোনও CSS ফাইলকে 'লিগেসি' হিসাবে বিবেচনা করা হত কারণ সেগুলিকে একটি module.json ফাইল ব্যবহার করে লোড করা হয়েছিল, যেটি সরানোর প্রক্রিয়ায় রয়েছে। সমস্ত সিএসএস ফাইলকে সিএসএস ফাইলের মতো একই ডিরেক্টরিতে একটি module.json ফাইলের resources অধীনে তালিকাভুক্ত করতে হয়েছিল।

একটি অবশিষ্ট module.json ফাইলের একটি উদাহরণ:

{
  "resources": [
    "serviceWorkersView.css",
    "serviceWorkerUpdateCycleView.css"
  ]
}

এই CSS ফাইলগুলি তখন তাদের বিষয়বস্তুর পথ থেকে ম্যাপিং হিসাবে Root.Runtime.cachedResources নামে একটি বিশ্বব্যাপী অবজেক্ট ম্যাপ তৈরি করবে। DevTools-এ শৈলী যোগ করার জন্য, আপনি যে ফাইলটি লোড করতে চান তার সঠিক পথ সহ registerRequiredCSS কল করতে হবে।

registerRequiredCSS কলের উদাহরণ:

constructor() {
  …
  this.registerRequiredCSS('ui/legacy/components/quick_open/filteredListWidget.css');
  …
}

এটি CSS ফাইলের বিষয়বস্তু পুনরুদ্ধার করবে এবং appendStyle ফাংশন ব্যবহার করে পৃষ্ঠায় <style> উপাদান হিসেবে সন্নিবেশ করবে:

appendStyle ফাংশন যা একটি ইনলাইন শৈলী উপাদান ব্যবহার করে CSS যোগ করে:

const content = Root.Runtime.cachedResources.get(cssFile) || '';

if (!content) {
  console.error(cssFile + ' not preloaded. Check module.json');
}

const styleElement = document.createElement('style');
styleElement.textContent = content;
node.appendChild(styleElement);

আমরা যখন আধুনিক ওয়েব কম্পোনেন্ট (কাস্টম উপাদান ব্যবহার করে) প্রবর্তন করি, তখন আমরা প্রাথমিকভাবে কম্পোনেন্ট ফাইলে ইনলাইন <style> ট্যাগের মাধ্যমে CSS ব্যবহার করার সিদ্ধান্ত নিয়েছিলাম । এটি তার নিজস্ব চ্যালেঞ্জ উপস্থাপন করেছে:

  • সিনট্যাক্স হাইলাইট সমর্থনের অভাব। যে প্লাগইনগুলি ইনলাইন CSS-এর জন্য সিনট্যাক্স হাইলাইটিং প্রদান করে সেগুলি .css ফাইলগুলিতে লেখা CSS-এর জন্য সিনট্যাক্স হাইলাইটিং এবং স্বয়ংক্রিয়ভাবে সম্পূর্ণ বৈশিষ্ট্যগুলির মতো ভাল হতে পারে না।
  • ওভারহেড কর্মক্ষমতা তৈরি করুন. ইনলাইন CSS এর মানে হল যে লিন্টিংয়ের জন্য দুটি পাস থাকতে হবে: একটি CSS ফাইলের জন্য এবং একটি ইনলাইন CSS এর জন্য। এটি একটি পারফরম্যান্স ওভারহেড ছিল যা আমরা সরাতে পারতাম যদি সমস্ত CSS স্বতন্ত্র CSS ফাইলগুলিতে লেখা থাকে।
  • মিনিফিকেশনে চ্যালেঞ্জ। ইনলাইন সিএসএস সহজে ছোট করা যায় না, তাই সিএসএসের কোনোটিই ছোট করা হয়নি। একই ওয়েব কম্পোনেন্টের একাধিক দৃষ্টান্ত দ্বারা প্রবর্তিত ডুপ্লিকেটেড CSS দ্বারা DevTools-এর রিলিজ বিল্ডের ফাইলের আকারও বৃদ্ধি পেয়েছে।

আমার ইন্টার্নশিপ প্রকল্পের লক্ষ্য ছিল CSS অবকাঠামোর জন্য একটি সমাধান খুঁজে বের করা যা লিগ্যাসি অবকাঠামো এবং DevTools-এ ব্যবহৃত নতুন ওয়েব উপাদান উভয়ের সাথে কাজ করে।

সম্ভাব্য সমাধান গবেষণা

সমস্যা দুটি ভিন্ন অংশে বিভক্ত করা যেতে পারে:

  • সিএসএস ফাইলগুলির সাথে বিল্ড সিস্টেম কীভাবে কাজ করে তা বের করা।
  • DevTools দ্বারা CSS ফাইলগুলি কীভাবে আমদানি এবং ব্যবহার করা হয় তা খুঁজে বের করা।

আমরা প্রতিটি অংশের জন্য বিভিন্ন সম্ভাব্য সমাধানের দিকে নজর দিয়েছি এবং সেগুলি নীচে বর্ণিত হয়েছে।

সিএসএস ফাইল আমদানি করা হচ্ছে

TypeScript ফাইলগুলিতে CSS আমদানি এবং ব্যবহার করার লক্ষ্য হল যতটা সম্ভব ওয়েব স্ট্যান্ডার্ডের কাছাকাছি থাকা, DevTools জুড়ে ধারাবাহিকতা প্রয়োগ করা এবং আমাদের HTML-এ ডুপ্লিকেটেড CSS এড়ানো । আমরা এমন একটি সমাধান বাছাই করতে সক্ষম হতে চেয়েছিলাম যা আমাদের পরিবর্তনগুলিকে নতুন ওয়েব প্ল্যাটফর্ম স্ট্যান্ডার্ডে স্থানান্তরিত করা সম্ভব করে, যেমন CSS মডিউল স্ক্রিপ্ট৷

এই কারণে @ আমদানি বিবৃতি এবং ট্যাগগুলি DevTools-এর জন্য উপযুক্ত বলে মনে হচ্ছে না। তারা বাকি DevTools জুড়ে আমদানির সাথে অভিন্ন হবে না এবং এর ফলে একটি ফ্ল্যাশ অফ আনস্টাইলড কন্টেন্ট (FOUC) হবে। CSS মডিউল স্ক্রিপ্টে স্থানান্তর করা কঠিন হবে কারণ আমদানিগুলিকে স্পষ্টভাবে যোগ করতে হবে এবং <link> ট্যাগের চেয়ে ভিন্নভাবে মোকাবেলা করতে হবে।

const output = LitHtml.html`
<style> @import "css/styles.css"; </style>
<button> Hello world </button>`

const output = LitHtml.html`
<link rel="stylesheet" href="styles.css">
<button> Hello World </button>`

@import বা <link> ব্যবহার করে সম্ভাব্য সমাধান।

পরিবর্তে আমরা একটি CSSStyleSheet অবজেক্ট হিসাবে CSS ফাইলটি আমদানি করার একটি উপায় বেছে নিয়েছি যাতে আমরা এটির adoptedStyleSheets সম্পত্তি ব্যবহার করে শ্যাডো ডমে (DevTools এখন কয়েক বছর ধরে শ্যাডো ডম ব্যবহার করে) যোগ করতে পারি।

বান্ডলার বিকল্প

CSS ফাইলগুলিকে CSSStyleSheet অবজেক্টে রূপান্তর করার জন্য আমাদের একটি উপায় প্রয়োজন যাতে আমরা এটিকে টাইপস্ক্রিপ্ট ফাইলে সহজেই ব্যবহার করতে পারি। আমরা রোলআপ এবং ওয়েবপ্যাক উভয়কেই আমাদের জন্য এই রূপান্তর করার সম্ভাব্য বান্ডলার হিসাবে বিবেচনা করেছি। DevTools ইতিমধ্যেই এর প্রোডাকশন বিল্ডে রোলআপ ব্যবহার করে, কিন্তু আমাদের বর্তমান বিল্ড সিস্টেমের সাথে কাজ করার সময় প্রোডাকশন বিল্ডে যেকোন একটি বান্ডলার যোগ করলে সম্ভাব্য পারফরম্যান্স সমস্যা হতে পারে। Chromium-এর GN বিল্ড সিস্টেমের সাথে আমাদের একীকরণ বান্ডলিংকে আরও কঠিন করে তোলে এবং তাই বান্ডলাররা বর্তমান Chromium বিল্ড সিস্টেমের সাথে ভালভাবে একত্রিত হওয়ার প্রবণতা রাখে না।

পরিবর্তে, আমরা পরিবর্তে আমাদের জন্য এই রূপান্তরটি করতে বর্তমান GN বিল্ড সিস্টেম ব্যবহার করার বিকল্পটি অন্বেষণ করেছি।

DevTools-এ CSS ব্যবহারের নতুন পরিকাঠামো

নতুন সমাধানের মধ্যে একটি নির্দিষ্ট adoptedStyleSheets DOM-এ শৈলী যোগ করার জন্য CSSStyleSheet অবজেক্ট তৈরি করার জন্য GN বিল্ড সিস্টেম ব্যবহার করার সময় document বা ShadowRoot দ্বারা গ্রহণ করা যেতে পারে।

// CustomButton.ts

// Import the CSS style sheet contents from a JS file generated from CSS
import customButtonStyles from './customButton.css.js';
import otherStyles from './otherStyles.css.js';

export class CustomButton extends HTMLElement{
  …
  connectedCallback(): void {
    // Add the styles to the shadow root scope
    this.shadow.adoptedStyleSheets = [customButtonStyles, otherStyles];
  }
}

adoptedStyleSheets ব্যবহার করার একাধিক সুবিধা রয়েছে যার মধ্যে রয়েছে:

  • এটি একটি আধুনিক ওয়েব স্ট্যান্ডার্ড হয়ে উঠতে চলেছে৷
  • ডুপ্লিকেট CSS প্রতিরোধ করে
  • শৈলী শুধুমাত্র একটি ছায়া DOM-এ প্রযোজ্য এবং এটি CSS ফাইলে সদৃশ শ্রেণীর নাম বা আইডি নির্বাচকদের দ্বারা সৃষ্ট যেকোন সমস্যা এড়ায়
  • ভবিষ্যতের ওয়েব স্ট্যান্ডার্ডে স্থানান্তর করা সহজ যেমন সিএসএস মডিউল স্ক্রিপ্ট এবং ইম্পোর্ট অ্যাসারশন

সমাধানের একমাত্র সতর্কতা হল যে import বিবৃতিগুলির জন্য .css.js ফাইল আমদানি করা প্রয়োজন। বিল্ডিংয়ের সময় GN-কে একটি CSS ফাইল তৈরি করতে দেওয়ার জন্য, আমরা generate_css_js_files.js স্ক্রিপ্ট লিখেছিলাম। বিল্ড সিস্টেম এখন প্রতিটি CSS ফাইল প্রক্রিয়া করে এবং এটিকে একটি জাভাস্ক্রিপ্ট ফাইলে রূপান্তরিত করে যা ডিফল্টভাবে একটি CSSStyleSheet অবজেক্ট রপ্তানি করে। এটি দুর্দান্ত কারণ আমরা CSS ফাইল আমদানি করতে পারি এবং সহজেই এটি গ্রহণ করতে পারি। তদ্ব্যতীত, আমরা এখন ফাইলের আকার সংরক্ষণ করে সহজেই উত্পাদন বিল্ডকে ছোট করতে পারি:

const styles = new CSSStyleSheet();
styles.replaceSync(
  // In production, we also minify our CSS styles
  /`${isDebug ? output : cleanCSS.minify(output).styles}
  /*# sourceURL=${fileName} */`/
);

export default styles;

স্ক্রিপ্ট থেকে iconButton.css.js তৈরি করা উদাহরণ।

ESLint নিয়ম ব্যবহার করে উত্তরাধিকার কোড স্থানান্তর করা

যদিও ওয়েব উপাদানগুলি সহজেই ম্যানুয়ালি স্থানান্তরিত হতে পারে, তবে registerRequiredCSS এর উত্তরাধিকার ব্যবহার স্থানান্তর করার প্রক্রিয়াটি আরও জড়িত ছিল। লিগ্যাসি শৈলী নিবন্ধিত দুটি প্রধান ফাংশন ছিল registerRequiredCSS এবং createShadowRootWithCoreStyles । আমরা সিদ্ধান্ত নিয়েছি যে যেহেতু এই কলগুলি স্থানান্তর করার পদক্ষেপগুলি মোটামুটি যান্ত্রিক ছিল, তাই আমরা ESLint নিয়মগুলি ব্যবহার করে সংশোধনগুলি প্রয়োগ করতে এবং স্বয়ংক্রিয়ভাবে উত্তরাধিকার কোড স্থানান্তর করতে পারি৷ DevTools ইতিমধ্যেই DevTools কোডবেসের জন্য নির্দিষ্ট কিছু কাস্টম নিয়ম ব্যবহার করে। এটি সহায়ক ছিল কারণ ESLint ইতিমধ্যেই কোডটিকে একটি অ্যাবস্ট্রাক্ট সিনট্যাক্স ট্রি (abbr. AST) এ পার্স করে এবং আমরা নির্দিষ্ট কল নোডগুলিকে জিজ্ঞাসা করতে পারি যেগুলি CSS নিবন্ধনের জন্য কল ছিল।

মাইগ্রেশন ESLint বিধিগুলি লেখার সময় আমরা যে সবচেয়ে বড় সমস্যাটির মুখোমুখি হয়েছিলাম তা হল এজ কেস ক্যাপচার করা। আমরা নিশ্চিত করতে চেয়েছিলাম যে কোন প্রান্তের কেসগুলি ক্যাপচার করা উপযুক্ত এবং কোনটি ম্যানুয়ালি স্থানান্তর করা উচিত তা জানার মধ্যে আমরা সঠিক ভারসাম্য পেয়েছি৷ আমরা নিশ্চিত করতে চাই যে আমরা একজন ব্যবহারকারীকে বলতে পারি যখন একটি আমদানি করা .css.js ফাইল বিল্ড সিস্টেম দ্বারা স্বয়ংক্রিয়ভাবে তৈরি হচ্ছে না কারণ এটি রানটাইমে ত্রুটি খুঁজে পাওয়া যায় নি এমন কোনো ফাইলকে প্রতিরোধ করে।

মাইগ্রেশনের জন্য ESLint নিয়ম ব্যবহার করার একটি অসুবিধা হল যে আমরা সিস্টেমে প্রয়োজনীয় GN বিল্ড ফাইল পরিবর্তন করতে পারিনি। এই পরিবর্তনগুলি প্রতিটি ডিরেক্টরিতে ব্যবহারকারীর দ্বারা ম্যানুয়ালি করা উচিত ছিল। যদিও এটির জন্য আরও কাজের প্রয়োজন ছিল, এটি নিশ্চিত করার একটি ভাল উপায় যে আমদানি করা প্রতিটি .css.js ফাইল আসলে বিল্ড সিস্টেম দ্বারা তৈরি করা হয়েছে৷

সামগ্রিকভাবে, এই মাইগ্রেশনের জন্য ESLint নিয়মগুলি ব্যবহার করা সত্যিই সহায়ক ছিল কারণ আমরা নতুন পরিকাঠামোতে লিগ্যাসি কোড দ্রুত স্থানান্তর করতে সক্ষম হয়েছিলাম এবং AST সহজেই উপলব্ধ থাকার অর্থ হল আমরা নিয়মের একাধিক প্রান্তের ক্ষেত্রেও পরিচালনা করতে পারি এবং ESLint এর ফিক্সার ব্যবহার করে নির্ভরযোগ্যভাবে স্বয়ংক্রিয়ভাবে সেগুলি ঠিক করতে পারি। এপিআই

এরপর কী?

এখনও অবধি, Chromium DevTools-এর সমস্ত ওয়েব উপাদানগুলি ইনলাইন শৈলী ব্যবহার করার পরিবর্তে নতুন CSS পরিকাঠামো ব্যবহার করার জন্য স্থানান্তরিত হয়েছে৷ registerRequiredCSS এর বেশিরভাগ উত্তরাধিকার ব্যবহারও নতুন সিস্টেম ব্যবহার করার জন্য স্থানান্তরিত হয়েছে। যা বাকি আছে তা হল যতটা সম্ভব module.json ফাইল মুছে ফেলা এবং তারপর ভবিষ্যতে CSS মডিউল স্ক্রিপ্ট বাস্তবায়নের জন্য এই বর্তমান অবকাঠামো স্থানান্তর করা!

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এই পূর্বরূপ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করে এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পায়!

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

পোস্টের নতুন বৈশিষ্ট্য এবং পরিবর্তনগুলি বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

  • crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
  • আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুনআরও > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ।
  • @ChromeDevTools- এ টুইট করুন।
  • আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷