feat(preset-mini): alias < to lt- and ~ to at- (#2266)

unocss · Feb 28, 2023 · 7dd8d49 · 7dd8d49
1 parent d311221
commit 7dd8d49
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 4 deletions.
diff --git a/packages/preset-attributify/src/extractor.ts b/packages/preset-attributify/src/extractor.ts
@@ -9,7 +9,7 @@ const strippedPrefixes = [
 
 const splitterRE = /[\s'"`;]+/g
 const elementRE = /<[^>\s]*\s((?:'.*?'|".*?"|`.*?`|\{.*?\}|[^>]*?)*)/g
-const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-.]+)=?(?:["]([^"]*)["]|[']([^']*)[']|[{]([^}]*)[}])?/gms
+const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-.~]+)=?(?:["]([^"]*)["]|[']([^']*)[']|[{]([^}]*)[}])?/gms
 
 export const defaultIgnoreAttributes = ['placeholder', 'fill', 'opacity']
 

diff --git a/packages/preset-mini/src/_variants/breakpoints.ts b/packages/preset-mini/src/_variants/breakpoints.ts
@@ -17,7 +17,7 @@ export const variantBreakpoints = (): VariantObject => {
       = Object.entries(resolveBreakpoints(context) ?? {}).map(([point, size], idx) => [point, size, idx])
       for (const [point, size, idx] of variantEntries) {
         if (!regexCache[point])
-          regexCache[point] = new RegExp(`^((?:[al]t-)?${point}(?:${context.generator.config.separators.join('|')}))`)
+          regexCache[point] = new RegExp(`^((?:([al]t-|[<~]))?${point}(?:${context.generator.config.separators.join('|')}))`)
 
         const match = matcher.match(regexCache[point])
         if (!match)
@@ -32,8 +32,8 @@ export const variantBreakpoints = (): VariantObject => {
         if (m === 'container')
           continue
 
-        const isLtPrefix = pre.startsWith('lt-')
-        const isAtPrefix = pre.startsWith('at-')
+        const isLtPrefix = pre.startsWith('lt-') || pre.startsWith('<')
+        const isAtPrefix = pre.startsWith('at-') || pre.startsWith('~')
 
         let order = 1000 // parseInt(size)
 

diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -278,6 +278,9 @@ exports[`attributify > fixture2 1`] = `
 [transition~=\\"\\\\32 00\\"]{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;}
 [after~=\\"content-\\\\[string\\\\:\\\\!\\\\]\\"]::after{content:!;}
 [before-content~=\\"\\\\[quoted\\\\:\\\\!\\\\]\\"]::before{content:\\"!\\";}
+@media (max-width: 767.9px){
+.\\\\<md\\\\:color-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
+}
 @media (min-width: 640px){
 [sm~=\\"bg-blue-600\\"]{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
 }"

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -1033,6 +1033,7 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .lt-lg\\\\:m2{margin:0.5rem;}
 }
 @media (max-width: 639.9px){
+.\\\\<sm\\\\:m1,
 .lt-sm\\\\:m1{margin:0.25rem;}
 }
 @media (max-width: 1023.9px){@media (min-width: 640px){
@@ -1044,6 +1045,7 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .sm\\\\:m1{margin:0.25rem;}
 }
 @media (min-width: 640px) and (max-width: 767.9px){
+.\\\\~sm\\\\:m1,
 .at-sm\\\\:m1{margin:0.25rem;}
 }
 @media (min-width: 768px){

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -907,6 +907,7 @@ export const presetMiniTargets: string[] = [
   'at-2xl:m2',
   'at-lg:m2',
   'at-sm:m1',
+  '~sm:m1',
   'disabled:op50',
   'first:p-2',
   'first-line:bg-green-400',
@@ -917,6 +918,7 @@ export const presetMiniTargets: string[] = [
   'hover:p-5',
   'lt-lg:m2',
   'lt-sm:m1',
+  '<sm:m1',
   'md:!hidden',
   'md:m-1',
   'not-hover:p-3',