From 49294fa7a3c5a5cb78b4fe51b5db9dd2b4473078 Mon Sep 17 00:00:00 2001
From: Nitin Kumar <nitin.kumar@razorpay.com>
Date: Sun, 3 Nov 2024 16:35:27 +0530
Subject: [PATCH] docs(api): add webpackIgnore usage with CSS

---
 src/content/api/module-methods.mdx | 38 ++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/content/api/module-methods.mdx b/src/content/api/module-methods.mdx
index b1ddde99345a..dd7942f51343 100644
--- a/src/content/api/module-methods.mdx
+++ b/src/content/api/module-methods.mdx
@@ -133,22 +133,52 @@ import(
   /* webpackPreload: true */
   `./locale/${language}`
 );
-```
 
-```js
 import(/* webpackIgnore: true */ 'ignored-module.js');
-
-new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
 ```
 
 ##### webpackIgnore
 
+**JavaScript Usage**
+
 Disables dynamic import parsing when set to `true`.
 
 When using `import.meta.url`, it does not remain as-is; instead, it gets replaced based on the `baseURI`. For modules, it is replaced with `new URL("./", import.meta.url)`, and for other cases, it defaults to `document.baseURI`. This ensures that relative URLs work correctly, aligning with the base URL context.
 
+```js
+import(/* webpackIgnore: true */ 'ignored-module.js');
+
+new URL(/* webpackIgnore: true */ 'file1.css', import.meta.url);
+```
+
 W> Note that setting `webpackIgnore` to `true` opts out of code splitting.
 
+**CSS Usage**
+
+The `webpackIgnore` comment can control whether webpack processes a specific import or URL reference.
+It works in certain cases out of the box but **doesn’t support all cases** by default due to performance reasons.
+
+We support `webpackIgnore` in the following cases:
+
+```css
+@import /* webpackIgnore: false */ url(./basic.css);
+
+.class {
+  color: red;
+  background: /* webpackIgnore: true */ url('./url/img.png');
+}
+
+.class {
+  background-image: image-set(
+    /*webpackIgnore:  true*/ url(./url/img1x.png) 1x,
+    url(./url/img2x.png) 2x,
+    url(./url/img3x.png) 3x
+  );
+}
+```
+
+T> For other CSS scenarios, [`css-loader` fully supports `webpackIgnore`](/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment), allowing more flexibility if needed.
+
 ##### webpackChunkName
 
 A name for the new chunk. Since webpack 2.6.0, the placeholders `[index]` and `[request]` are supported within the given string to an incremented number or the actual resolved filename respectively. Adding this comment will cause our separate chunk to be named [my-chunk-name].js instead of [id].js.