From 627206cbeab5455a0c2a9442ea3a7597394c2998 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Sat, 6 Dec 2025 21:37:20 +0530 Subject: [PATCH 1/2] Started modern css tools --- .../modern-css-tools/preprocessors/less.mdx | 200 +++++++++++++++++- .../modern-css-tools/preprocessors/sass.mdx | 196 ++++++++++++++++- 2 files changed, 394 insertions(+), 2 deletions(-) diff --git a/docs/css/modern-css-tools/preprocessors/less.mdx b/docs/css/modern-css-tools/preprocessors/less.mdx index e345ed2..5254d6c 100644 --- a/docs/css/modern-css-tools/preprocessors/less.mdx +++ b/docs/css/modern-css-tools/preprocessors/less.mdx @@ -1 +1,199 @@ - \ No newline at end of file +--- +title: "Less (Leaner Style Sheets)" +description: "Explore Less, a dynamic stylesheet language that extends CSS with features like variables, nesting, mixins, and operations, offering an efficient way to manage large CSS projects." +keywords: [Less CSS, CSS preprocessor, variables, mixins, nesting, functions, CSS language extension] +tags: [Less CSS, CSS preprocessor, variables, mixins, nesting, functions, CSS language extension] +sidebar_label: Less +--- + +**Less (Leaner Style Sheets)** is a powerful dynamic stylesheet language that serves as a robust **CSS preprocessor**. Developed earlier than Sass's widespread adoption of the SCSS syntax, Less is distinct because it is written in JavaScript and can be compiled in two ways: + +1. **Client-side:** Via a JavaScript file included in the browser (convenient for development). +2. **Server-side/Build Tool:** Compiled into pure CSS using Node.js or task runners (standard for production). + +Less shares many core concepts with Sass (variables, mixins, nesting) but often uses slightly different syntax and features, making it a strong alternative, especially in environments where JavaScript integration is preferred. + + +
+ +## 1. Core Features of Less + +Less aims to improve CSS efficiency and maintainability by introducing programming features into the styling layer. + +### A. Variables (`@`) + +In Less, variables are declared using the **`@`** symbol. They allow you to define common values for colors, dimensions, and other properties, ensuring consistency across your stylesheet. + +```less title="styles.less" +// Define variables using @ +@base-color: #3b82f6; // Blue +@link-color: darken(@base-color, 10%); +@spacing-large: 20px; + +.header { + background-color: @base-color; + padding: @spacing-large; +} + +.nav-link { + color: @link-color; +} +``` + +### B. Nesting and Parent Selector (`&`) + +Less supports nesting selectors to reflect the HTML structure, which helps organize CSS and reduces the repetition of parent selectors. + +The **`&`** parent selector is crucial for referring back to the parent selector, often used for pseudo-classes or modifying classes (similar to BEM modifiers). + +```less title="styles.less" +.card-module { + background: white; + border-radius: 4px; + padding: 15px; + + h3 { // Nested element + color: @base-color; + margin-bottom: 10px; + } + + // Using the parent selector for pseudo-class (hover) + &:hover { + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + } +} +``` + + +
+ +### C. Mixins + +Mixins allow you to embed all the properties of one class into another. Unlike Sass's `@include`, Less allows you to use any defined class name as a mixin. + +Mixins can also accept parameters, making them highly flexible for reusing style logic. + +#### Basic Mixin Example + +```less title="styles.less" +// Define a class that will act as a mixin +.clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +.container { + .clearfix(); // Include all properties from .clearfix + max-width: 1200px; +} +``` + +#### Parametric Mixin Example + +```less title="styles.less" +// Mixin with arguments and default values +.border-radius(@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +.button { + // Call the mixin, overriding the default 5px radius + .border-radius(10px); + border: 1px solid gray; +} +``` + +### D. Operations (Math) + +Less allows you to perform mathematical operations (`+`, `-`, `*`, `/`) directly on numerical values, including units. This is particularly useful for calculating responsive grid widths, spacing, or component dimensions based on a single variable. + +```less title="styles.less" +@columns: 12; +@gutter: 1.5%; +@base-font-size: 16px; + +.col-4 { + // Calculate width dynamically + width: (4 / @columns * 100%) - @gutter; +} + +.text-small { + // Calculate font size relative to the base + font-size: @base-font-size * 0.85; +} +``` + + +
+ +## 2. Advanced Less Features + +### A. Functions + +Less includes a variety of built-in functions, especially for manipulating colors. These functions allow for dynamic adjustments to your palette, ensuring color harmony. + +| Function | Purpose | Example | +| :--- | :--- | :--- | +| `lighten()` | Makes a color lighter. | `lighten(@base-color, 10%)` | +| `darken()` | Makes a color darker. | `darken(@base-color, 20%)` | +| `saturate()` | Makes a color more vivid. | `saturate(@base-color, 15%)` | +| `fade()` | Changes the opacity of a color. | `fade(@base-color, 50%)` | + +### B. Namespaces and Accessors + +Less provides a way to logically group styles or variables under a **namespace**, similar to a module. This prevents conflicts and makes code organized. + +```less title="styles.less" +// 1. Define the namespace as a set of rules +#themes { + .dark-mode() { + background: #333; + color: white; + } +} + +.app-container { + // 2. Access the mixin inside the namespace + #themes > .dark-mode(); +} +``` + +### C. Importation (`@import`) + +Like Sass, Less supports the `@import` directive to break stylesheets into smaller, more manageable files. By default, Less treats imported files as Less files and merges them before compilation. + +```less title="styles.less" +// Imports and processes the content of _variables.less +@import "variables.less"; +// Imports and processes the content of _buttons.less +@import "components/buttons"; +``` + + +
+ +## Try It Yourself: CodePen Example + +Now that you've seen the core features of Less, try modifying and experimenting with the code in this CodePen example to see how Less can streamline your CSS development process. + + + +## 3. Resources for Further Learning + +To effectively use Less in your projects, the official documentation is the primary resource. + +### Official Documentation + +The Less official site offers comprehensive guides, installation instructions (for Node.js), and detailed examples of all its features. + + * **Less Official Website:** [http://lesscss.org/](http://lesscss.org/) + * **Functions Documentation:** Explore all the built-in color manipulation and mathematical functions. [http://lesscss.org/functions/](http://lesscss.org/functions/) + * **Mixins Documentation:** Essential guide for mastering parametric mixins. [http://lesscss.org/features/\#mixins-feature](https://www.google.com/search?q=http://lesscss.org/features/%23mixins-feature) diff --git a/docs/css/modern-css-tools/preprocessors/sass.mdx b/docs/css/modern-css-tools/preprocessors/sass.mdx index e345ed2..8bfb6b5 100644 --- a/docs/css/modern-css-tools/preprocessors/sass.mdx +++ b/docs/css/modern-css-tools/preprocessors/sass.mdx @@ -1 +1,195 @@ - \ No newline at end of file +--- +title: "Sass (Syntactically Awesome Stylesheets)" +description: "Master Sass, the most popular CSS preprocessor, to write powerful, dynamic, and maintainable stylesheets using features like variables, nesting, mixins, and modular architecture." +keywords: [Sass, SCSS, CSS preprocessor, variables, mixins, nesting, partials, extends, modular CSS] +tags: [Sass, SCSS, CSS preprocessor, variables, mixins, nesting, partials, extends, modular CSS] +sidebar_label: Sass +--- + +**Sass (Syntactically Awesome Stylesheets)** is the most mature and widely used **CSS preprocessor**. A preprocessor is a scripting language that extends the default capabilities of CSS, allowing you to use programming concepts like variables, nesting, and logic. + +Sass code, written in either the newer **SCSS** syntax (Sassy CSS, which is backward-compatible with CSS) or the older indented syntax, must be compiled down into standard, browser-readable CSS before deployment. + + +
+ +## 1. Why Use Sass? The Benefits + +The primary goal of using a preprocessor is to make large CSS codebases more maintainable, scalable, and efficient. + +### A. DRY (Don't Repeat Yourself) + +By using variables and mixins, you eliminate repetitive code blocks, such as copy-pasting color codes or vendor prefixes. + +### B. Modularity and Architecture + +Sass allows you to break your monolithic stylesheet into dozens of small, focused files (partials). This makes your codebase easier to navigate and manage large projects. + +### C. Logic and Functions + +You can perform mathematical operations directly within your stylesheet (e.g., `width: 100% / 3 - 2rem`), and use conditional logic (`@if`, `@else`) for dynamic styling. + +## 2. Key Features of Sass + +### A. Variables (`$`) + +Variables allow you to store values (colors, fonts, sizing) and reuse them throughout your project. This is crucial for theme management and ensuring consistency. + +```scss title="styles.scss" +// Define variables using the $ symbol +$primary-color: #1e3a8a; +$font-stack: "Inter", sans-serif; +$gutter: 1rem; + +.header { + background-color: $primary-color; + padding: $gutter; + font-family: $font-stack; +} + +.button { + border-color: $primary-color; + padding: $gutter / 2; +} +``` + + +
+ +### B. Nesting + +Nesting allows you to scope your CSS selectors inside their parent elements, visually mirroring the HTML structure. + +While convenient, **nesting should be limited to 2-3 levels deep** to maintain low specificity and prevent over-qualified selectors. + +```scss title="styles.scss" +.navbar { + background-color: #333; + padding: 10px; + + // Nesting the link selector inside the navbar + a { + color: white; + text-decoration: none; + + // Using the parent selector (&) for pseudo-classes + &:hover { + color: lightblue; + } + } +} +``` + +### C. Partials and Modularity (`@use`) + +Partials are separate SCSS files, named with an underscore prefix (e.g., `_variables.scss`, `_buttons.scss`), that are not compiled into separate CSS files. They are imported into a main file using the `@use` rule. + +`@use` is the modern standard, providing namespace control to prevent global variable conflicts. + +```scss title="styles.scss" +/* _variables.scss */ +$font-size: 16px; + +/* _buttons.scss */ +@use 'variables' as v; // Namespaces variables from _variables.scss + +.button { + font-size: v.$font-size; + padding: 0.5rem 1rem; +} + +/* main.scss */ +@use 'variables'; +@use 'buttons'; + +.app-container { + font-size: variables.$font-size; +} +``` + +**Compilation Result (main.css):** The output is a single, clean CSS file containing only the used styles. + + +
+ +### D. Mixins (`@mixin` and `@include`) + +Mixins are blocks of styles that can be reused throughout the stylesheet. They are ideal for vendor prefixes, complex responsive rules, or any repetitive set of declarations. They can also accept arguments. + +```scss title="styles.scss" +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +@mixin button-size($padding, $radius) { + padding: $padding; + border-radius: $radius; +} + +.card-footer { + @include flex-center; /* Include the entire block of styles */ +} + +.cta-button { + // Pass arguments to the mixin + @include button-size(1rem 1.5rem, 4px); +} +``` + +### E. Extends and Placeholder Selectors (`%`) + +The `@extend` rule lets one selector inherit the styles of another. When used with **placeholder selectors** (`%`), it prevents the base style from being compiled unless it is explicitly extended. This keeps the final CSS output clean. + +```scss title="styles.scss" +// Placeholder selector: will not compile to CSS unless used with @extend +%message-base { + border: 1px solid; + padding: 1rem; + margin-bottom: 1rem; +} + +.success-message { + @extend %message-base; + border-color: green; + background-color: #e6ffe6; +} + +.error-message { + @extend %message-base; + border-color: red; + background-color: #ffe6e6; +} +``` + + +
+ +## Try It Yourself: CodePen Example + +Now that you've seen the core features of Sass, try modifying and experimenting with the code in this CodePen example to see how Sass can streamline your CSS development process. + + + +## 3. Resources for Further Learning + +To master Sass and its architectural patterns, consult the official documentation and community guides. + +### Official Documentation + +The official site offers the most accurate and up-to-date syntax guides and feature explanations for both SCSS and the older indented syntax. + + * **Sass Official Website:** [https://sass-lang.com/](https://sass-lang.com/) + * **Sass Documentation (The `@use` rule):** Essential reading for modern modularity. [https://sass-lang.com/documentation/at-rules/use](https://sass-lang.com/documentation/at-rules/use) + * **Dart Sass:** The modern compiler implementation. [https://sass-lang.com/dart-sass](https://sass-lang.com/dart-sass) + +### Architectural Patterns + +For applying Sass in large applications, study these common methodologies: + + * **7-1 Pattern:** A popular folder structure for organizing large SCSS projects (7 folders, 1 main file). + * **BEM with Sass:** Learn how to combine the BEM naming convention with Sass features like nesting and mixins. \ No newline at end of file From ffb824c6d9a656c3f9e6e04c5c454de9d7052054 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Sun, 7 Dec 2025 22:12:59 +0530 Subject: [PATCH 2/2] done css framework docs --- .../css/modern-css-tools/browser-devtools.mdx | 134 ++++++++++++- docs/css/modern-css-tools/css-in-js.mdx | 157 ++++++++++++++- docs/css/modern-css-tools/postcss.mdx | 147 +++++++++++++- .../modern-css-tools/preprocessors/stylus.mdx | 184 +++++++++++++++++- docusaurus.config.js | 6 + 5 files changed, 624 insertions(+), 4 deletions(-) diff --git a/docs/css/modern-css-tools/browser-devtools.mdx b/docs/css/modern-css-tools/browser-devtools.mdx index e345ed2..97c470d 100644 --- a/docs/css/modern-css-tools/browser-devtools.mdx +++ b/docs/css/modern-css-tools/browser-devtools.mdx @@ -1 +1,133 @@ - \ No newline at end of file +--- +title: "Browser Developer Tools for CSS" +description: "Master the art of debugging and styling CSS with powerful browser developer tools. Learn to inspect elements, modify styles, simulate responsive designs, and more." +tags: [CSS, Developer Tools, Browser, Debugging, Front-end] +--- + +Browser Developer Tools are an indispensable set of utilities built directly into web browsers. For front-end developers, especially when working with CSS, these tools are your best friend for debugging, inspecting, and live-editing styles. This tutorial will guide you through the essential features of browser DevTools, primarily focusing on their application to CSS. + + +
+ +## Opening Developer Tools + +Most browsers offer multiple ways to open Developer Tools: + +1. **Right-click an element** on a webpage and select "Inspect" (or "Inspect Element"). This will open the DevTools and automatically select the element you clicked in the Elements panel. +2. **Keyboard Shortcut:** + * **Chrome/Edge/Brave:** `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (macOS) + * **Firefox:** `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (macOS) + * **Safari:** `Cmd+Option+C` (macOS) - Ensure "Show Develop menu in menu bar" is enabled in Safari Preferences > Advanced. +3. **Browser Menu:** Look for "More Tools" > "Developer Tools" in Chrome/Edge, or "Web Developer" > "Toggle Tools" in Firefox. + +Once opened, you'll typically see a panel docked to the side or bottom of your browser window. + +## The Elements Panel: Your CSS Command Center + +The Elements panel is where you'll spend most of your time working with CSS. It displays the HTML structure of the page and, crucially, the computed styles for each selected element. + +![Browser DevTools Elements Panel](https://developer.chrome.com/static/docs/devtools/css/reference/image/an-example-a-selected-el-73f5c083a4f5_856.png) + +### 1. Inspecting Elements + +When you select an element in the HTML tree of the Elements panel, the right-hand sidebar will update to show its styles. + +* **Styles Tab:** This is the most frequently used tab. It lists all the CSS rules applied to the selected element, ordered by specificity and source. You can see which rules are active, which are overridden (crossed out), and where they come from (e.g., `style.css:25`). + ![Styles Tab](https://developer.chrome.com/static/docs/devtools/css/reference/image/various-links-highlighted-4c3e7fc090e71_856.png) + +### 2. Live Editing CSS + +One of the most powerful features is the ability to live-edit styles directly in the browser. + +* **Modify Existing Properties:** Click on any property value (e.g., `font-size: 16px;`) and type a new value. The changes are immediately reflected on the page. +* **Add New Properties:** Click on an empty line within a CSS rule block to add a new property-value pair. +* **Toggle Properties:** Next to each declaration, there's a checkbox. Unchecking it temporarily disables that specific CSS property, which is excellent for isolating issues. +* **Add New CSS Rules:** At the top of the Styles tab, you can often find a `+` button or an area to add a new CSS rule for the selected element. This is useful for testing entirely new styles. + + + +### 3. Understanding the Box Model + +The "Computed" tab (often next to "Styles") displays the resolved values for all CSS properties. More importantly, it features an interactive **Box Model** diagram. + +![Box Model](https://developer.chrome.com/static/docs/devtools/css/reference/image/the-computed-tab-577802944e549.svg) + +This diagram visually represents the margin, border, padding, and content area of the selected element. Hovering over parts of the diagram will highlight the corresponding area on the actual webpage, making it incredibly useful for debugging spacing issues. + + +
+ +## Other Important Panels for CSS + +### 1. Device Mode / Responsive Design Mode + +![Device Mode](https://developer.chrome.com/static/docs/devtools/device-mode/image/device-mode-toggle_856.png) + +This mode (usually toggled by an icon that looks like a mobile phone and tablet) allows you to simulate different screen sizes, resolutions, and even device pixel ratios. It's crucial for testing and developing responsive designs without needing multiple physical devices. You can drag the edges of the viewport or select predefined device presets. + +![Responsive Design Mode](https://developer.chrome.com/static/docs/devtools/device-mode/image/the-device-toolbar-ffe4a87bfd6fc_856.png) + +### 2. Sources Panel + +While primarily for JavaScript debugging, the Sources panel allows you to view and modify your actual CSS files. You can set breakpoints within your CSS (e.g., on a style declaration inside a `@media` query) to see when and how styles are applied. Any changes made here are also live, but remember they are temporary until you save them to your actual project files. + +### 3. Console Panel + +Though mostly for JavaScript, the Console can sometimes show CSS-related errors or warnings, especially if you have issues with `@import` rules or invalid syntax that the browser can't parse. + +## Advanced CSS Debugging Techniques + +### Forced States (Hover, Focus, Active, Visited) + +In the Styles tab, you'll often find an option (e.g., `:hov` in Chrome, or a "Toggle Element State" icon) that allows you to force an element into a `:hover`, `:focus`, `:active`, or `:visited` state. This is incredibly useful for styling and debugging interactive elements without constantly moving your mouse or tabbing. + +![Forced States](https://developer.chrome.com/static/blog/new-in-devtools-123/image/focused-page_856.png) + +### CSS Grid and Flexbox Inspectors + +Modern browser DevTools come with excellent visual inspectors for CSS Grid and Flexbox layouts. When an element has `display: grid` or `display: flex` applied, a special icon appears next to it in the Elements panel. Clicking this icon overlays visual guides on the page, showing grid lines, track sizes, and flex item distribution. + + + + ![Grid Inspectors](https://developer.chrome.com/static/docs/devtools/css/grid/image/discover-grid-ae97f2f0f76fa_856.png) + + + ![Flex Inspectors](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/hover-a-flexbox-element-97868d0b93e3e_856.png) + + + + +
+ + +## Visualizing the DevTools Workflow + +Here's a Mermaid graph illustrating a common CSS debugging workflow using browser DevTools: + +```mermaid +graph TD + A[Start: Encounter CSS Issue] --> B{Open DevTools}; + B -- Right-Click Element --> C[Elements Panel: Inspect Element]; + B -- Keyboard Shortcut --> C; + C --> D[Styles Tab: Review Applied CSS]; + D -- Styles Overridden? --> E{Why? Specificity? Source Order?}; + E -- Yes --> F[Adjust Specificity / Order in Editor]; + E -- No --> G[Live Edit CSS in DevTools]; + G -- Test Changes --> H{Looks Good?}; + H -- Yes --> I[Copy Changes to Source File]; + H -- No --> J[Try Different CSS Properties / Values]; + J --> G; + D -- Spacing Issue? --> K[Computed Tab: Box Model]; + K -- Inspect Margins/Padding/Border --> G; + D -- Responsiveness Issue? --> L[Device Mode]; + L -- Simulate Devices --> G; + F --> A; + I --> M[End: Issue Resolved]; +``` + +## Conclusion + +Browser Developer Tools are an incredibly powerful and essential suite of tools for anyone working with CSS. Mastering them will significantly speed up your debugging process, help you understand how styles are applied, and empower you to build more robust and responsive web designs. Practice regularly with these tools, and they will become an invaluable part of your development workflow. \ No newline at end of file diff --git a/docs/css/modern-css-tools/css-in-js.mdx b/docs/css/modern-css-tools/css-in-js.mdx index e345ed2..98695d8 100644 --- a/docs/css/modern-css-tools/css-in-js.mdx +++ b/docs/css/modern-css-tools/css-in-js.mdx @@ -1 +1,156 @@ - \ No newline at end of file +--- +title: "CSS-in-JS (Component-Based Styling)" +description: "Explore CSS-in-JS, a paradigm that integrates CSS directly into JavaScript components, offering localized scoping, dynamic styling, and enhanced component portability in modern frameworks like React and Vue." +keywords: [CSS-in-JS, component styling, styled-components, Emotion, JSS, component portability, scoped CSS, dynamic styling] +tags: [CSS-in-JS, component styling, styled-components, Emotion, JSS, component portability, scoped CSS, dynamic styling] +sidebar_label: CSS-in-JS +--- + +**CSS-in-JS** is a modern styling paradigm where CSS is authored and managed directly within JavaScript files, typically alongside the component logic. This approach emerged to solve challenges inherent in large, component-based applications, such as global CSS conflicts, managing dependencies, and enabling truly dynamic, state-driven styling. + +The primary benefit is **local and automatic scoping**: every component gets a unique set of styles, eliminating global conflicts and making components entirely self-contained and portable. + + +
+ +## 1. Why CSS-in-JS? The Problems it Solves + +Traditional CSS, even with preprocessors, often relies on naming conventions (like BEM) to prevent conflicts. CSS-in-JS handles scoping automatically. + +### A. Automatic Vendor Prefixing + +Most CSS-in-JS libraries automatically handle vendor prefixes (like PostCSS Autoprefixer) without any separate configuration. + +### B. Scoped Styling (No Conflicts) + +The library generates a unique, hashed class name for every style block, applying it only to the intended component. This eliminates the risk of global styles accidentally overwriting component styles. + +### C. Dynamic, State-Driven Styling + +Because the styles are defined in JavaScript, they can easily access component props and state. This allows for complex, instant visual changes without needing to toggle dozens of utility classes. + +### D. Component Portability + +Styles are bundled directly with the component file. When you move a component to a new project or environment, its styles travel with it, making it truly modular. + +## 2. Popular CSS-in-JS Libraries + +Several libraries implement the CSS-in-JS philosophy, with **Styled Components** and **Emotion** being the most widely used. + +### A. Styled Components + +Styled Components uses **Tagged Template Literals** (the backtick syntax in JavaScript) to allow developers to write actual CSS syntax within their JavaScript files. It is known for its elegant API and focus on creating reusable React components with styles attached. + +#### Example: Styled Components + +```javascript title="Header.js" +import styled from 'styled-components'; + +// 1. Define a styled component (a button, in this case) +const PrimaryButton = styled.button` + /* Standard CSS syntax used here */ + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + background-color: ${props => (props.primary ? '#1e3a8a' : '#ccc')}; + + &:hover { + opacity: 0.9; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } +`; + +// 2. Use it in the render method like a normal component +function Header() { + return ( +
+ Submit + Cancel +
+ ); +} +``` + + +
+ +### B. Emotion + +Emotion is highly flexible and can be used with both the Tagged Template Literal approach (similar to Styled Components) and an **Object Style** approach. It is known for its high performance and smaller footprint. + +#### Example: Emotion (Object Styles) + +```javascript title="Header.js" +/** @jsxImportSource @emotion/react */ +import { css } from '@emotion/react'; + +const primaryStyle = css({ + backgroundColor: '#1e3a8a', + color: 'white', + padding: '10px 20px', + borderRadius: '5px', +}); + +// Use the css object directly in the JSX 'css' prop +function Header() { + return ( + + ); +} +``` + +## 3. How CSS-in-JS Works + +When a component is rendered, CSS-in-JS libraries follow these steps: + +1. **Style Extraction:** The CSS defined inside the JavaScript component is extracted. +2. **Unique Hashing:** The library hashes the CSS content to generate a unique class name (e.g., `sc-1a2b3c`). +3. **Injection:** The actual CSS rules are injected into a `