diff --git a/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts b/packages/tailwindcss-language-service/src/util/pixelEquivalents.ts index ca5441bc..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,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, + })), ) }, }, diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index d3b45fd5..aee45d1d 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 `` 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