fix(preset-mini): calc breakpoints boundary value (#3003)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Aug 19, 2023 · cfcbe71 · cfcbe71
1 parent abacd5b
commit cfcbe71
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/packages/preset-mini/src/_variants/breakpoints.ts b/packages/preset-mini/src/_variants/breakpoints.ts
@@ -4,8 +4,11 @@ import { resolveBreakpoints } from '../utils'
 export function calcMaxWidthBySize(size: string) {
   const value = size.match(/^-?[0-9]+\.?[0-9]*/)?.[0] || ''
   const unit = size.slice(value.length)
-  const maxWidth = (Number.parseFloat(value) - 0.1)
-  return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`
+  if (unit === 'px') {
+    const maxWidth = (Number.parseFloat(value) - 0.1)
+    return Number.isNaN(maxWidth) ? size : `${maxWidth}${unit}`
+  }
+  return `calc(${size} - 0.1px)`
 }
 
 export function variantBreakpoints(): VariantObject {

diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -268,4 +268,42 @@ describe('preset-mini', () => {
 
     await expect(css).toMatchFileSnapshot('./assets/output/preset-mini-group-data.css')
   })
+
+  test('define breakpoints with other unit', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini(),
+      ],
+      theme: {
+        breakpoints: {
+          md: '48rem',
+          lg: '64rem',
+          xl: '1000px',
+        },
+      },
+    })
+
+    const { css } = await uno.generate([
+      'md:text-xl',
+      '<lg:text-sm',
+      '~md:text-base',
+      '<xl:text-3xl',
+    ], { preflights: false })
+
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: default */
+      @media (max-width: 999.9px){
+      .\\\\<xl\\\\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
+      }
+      @media (max-width: calc(64rem - 0.1px)){
+      .\\\\<lg\\\\:text-sm{font-size:0.875rem;line-height:1.25rem;}
+      }
+      @media (min-width: 48rem){
+      .md\\\\:text-xl{font-size:1.25rem;line-height:1.75rem;}
+      }
+      @media (min-width: 48rem) and (max-width: calc(64rem - 0.1px)){
+      .\\\\~md\\\\:text-base{font-size:1rem;line-height:1.5rem;}
+      }"
+    `)
+  })
 })