Always use 1rem = 16px for pixel equivalents in media queries (#1190)

Fixes #1189

From [the CSS spec](https://drafts.csswg.org/mediaqueries/#units):

> Relative length units in media queries are based on the initial value,
which means that units are never based on results of declarations. For
example, in HTML, the em unit is relative to the initial value of
font-size, defined by the user agent or the user’s preferences, not any
styling on the page.

We should hide these because `1rem` everywhere else will be one value
but `1rem` in a media query might still be 16px (it's not changeable by
websites — only browsers / users)

Author: thecrypticace

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,9 +70,9 @@ function getPixelEquivalentsForMediaQuery(params: string, rootFontSize: number):
   return comments
 }
 
-export function addPixelEquivalentsToMediaQuery(query: string, rootFontSize: number): string {
+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)
   })
 }
@@ -88,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,
+          })),
         )
       },
     },

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))
+- Assume 16px font size for `1rem` in media queries ([#1190](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1190))
 
 ## 0.14.3