From f33704b2b11b7bc22457a52944759b9f3f8989f5 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 11 Feb 2025 14:24:42 -0500
Subject: [PATCH 1/4] Hide pixel equivalents in media queries when
 `rootFontSize` is not 16px

---
 .../src/util/pixelEquivalents.ts                            | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts b/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts
index ca5441bc..a45cf1cc 100644
--- a/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts
+++ b/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts
@@ -66,6 +66,12 @@ function getPixelEquivalentsForMediaQuery(params: string, rootFontSize: number):
 }
 
 export function addPixelEquivalentsToMediaQuery(query: string, rootFontSize: number): string {
+  // Media queries in browsers are not affected by the font size on the `html` element but the
+  // initial value of font-size as provided by the browser. This is defaults to 16px universally
+  // so we'll show them *if* the root font size is 16px otherwise we'd be showing potentially
+  // incorrect values.
+  if (rootFontSize !== 16) return query
+
   return query.replace(/(?<=^\s*@media\s*).*?$/, (params) => {
     let comments = getPixelEquivalentsForMediaQuery(params, rootFontSize)
     return applyComments(params, comments)

From 0b2e549661a4e16a7d720c71347dfab6925658ac Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 11 Feb 2025 14:31:38 -0500
Subject: [PATCH 2/4] Update changelog

---
 packages/vscode-tailwindcss/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index d3b45fd5..cfd7bf04 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Fix parsing of `@custom-variant` shorthand in Tailwind CSS language mode ([#1183](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1183))
 - Make sure custom regexes apply in Vue `<script>` blocks  ([#1177](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1177))
 - Fix suggestion of utilities with slashes in them in v4 ([#1182](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1182))
+- Hide pixel equivalents in media queries when rootFontSize is not 16px ([#1190](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1190))
 
 ## 0.14.3
 

From 8c178a44e3789dbb20ccf9792ca28cc744bd548d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 11 Feb 2025 15:20:21 -0500
Subject: [PATCH 3/4] wip

---
 .../src/util/pixelEquivalents.ts              | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts b/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts
index a45cf1cc..4fa2e3c9 100644
--- a/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts
+++ b/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts
@@ -40,7 +40,12 @@ export function addPixelEquivalentsToValue(
   return value
 }
 
-function getPixelEquivalentsForMediaQuery(params: string, rootFontSize: number): Comment[] {
+function getPixelEquivalentsForMediaQuery(params: string): Comment[] {
+  // Media queries in browsers are not affected by the font size on the `html` element but the
+  // initial value of font-size as provided by the browser. This is defaults to 16px universally
+  // so we'll always assume a value of 16px for media queries for correctness.
+  let rootFontSize = 16
+
   let comments: Comment[] = []
 
   try {
@@ -65,15 +70,9 @@ function getPixelEquivalentsForMediaQuery(params: string, rootFontSize: number):
   return comments
 }
 
-export function addPixelEquivalentsToMediaQuery(query: string, rootFontSize: number): string {
-  // Media queries in browsers are not affected by the font size on the `html` element but the
-  // initial value of font-size as provided by the browser. This is defaults to 16px universally
-  // so we'll show them *if* the root font size is 16px otherwise we'd be showing potentially
-  // incorrect values.
-  if (rootFontSize !== 16) return query
-
+export function addPixelEquivalentsToMediaQuery(query: string): string {
   return query.replace(/(?<=^\s*@media\s*).*?$/, (params) => {
-    let comments = getPixelEquivalentsForMediaQuery(params, rootFontSize)
+    let comments = getPixelEquivalentsForMediaQuery(params)
     return applyComments(params, comments)
   })
 }
@@ -94,12 +93,10 @@ export function equivalentPixelValues({
         }
 
         comments.push(
-          ...getPixelEquivalentsForMediaQuery(atRule.params, rootFontSize).map(
-            ({ index, value }) => ({
-              index: index + atRule.source.start.offset + `@media${atRule.raws.afterName}`.length,
-              value,
-            }),
-          ),
+          ...getPixelEquivalentsForMediaQuery(atRule.params).map(({ index, value }) => ({
+            index: index + atRule.source.start.offset + `@media${atRule.raws.afterName}`.length,
+            value,
+          })),
         )
       },
     },

From 8c3552c1b9bf4127c72e77f9e8aa7214f783a0db Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 11 Feb 2025 15:21:55 -0500
Subject: [PATCH 4/4] Update changelog

---
 packages/vscode-tailwindcss/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index cfd7bf04..aee45d1d 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -9,7 +9,7 @@
 - Fix parsing of `@custom-variant` shorthand in Tailwind CSS language mode ([#1183](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1183))
 - Make sure custom regexes apply in Vue `<script>` blocks  ([#1177](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1177))
 - Fix suggestion of utilities with slashes in them in v4 ([#1182](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1182))
-- Hide pixel equivalents in media queries when rootFontSize is not 16px ([#1190](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1190))
+- Assume 16px font size for `1rem` in media queries ([#1190](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1190))
 
 ## 0.14.3