feat: alias < to lt- and ~ to at-

MellowCo · Mar 4, 2023 · 01b9a5e · 01b9a5e
1 parent 9e98813
commit 01b9a5e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/src/variants/breakpoints.ts b/src/variants/breakpoints.ts
@@ -18,7 +18,7 @@ export const variantBreakpoints: Variant<Theme> = {
     = 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}[:-])`)
+        regexCache[point] = new RegExp(`^((?:([al]t-|[<~]))?${point}(?:${context.generator.config.separators.join('|')}))`)
 
       const match = matcher.match(regexCache[point])
       if (!match)
@@ -33,8 +33,8 @@ export const variantBreakpoints: Variant<Theme> = {
       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-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -1180,6 +1180,7 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .lt-lg\\\\:m2{margin:16rpx;}
 }
 @media (max-width: 639.9px){
+.\\\\<sm\\\\:m1,
 .lt-sm\\\\:m1{margin:8rpx;}
 }
 @media (max-width: 1023.9px){@media (min-width: 640px){
@@ -1191,6 +1192,7 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .sm\\\\:m1{margin:8rpx;}
 }
 @media (min-width: 640px) and (max-width: 767.9px){
+.\\\\~sm\\\\:m1,
 .at-sm\\\\:m1{margin:8rpx;}
 }
 @media (min-width: 768px){

diff --git a/test/__snapshots__/preset-weapp-rules.test.ts.snap b/test/__snapshots__/preset-weapp-rules.test.ts.snap
@@ -1139,6 +1139,7 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .lt-lg_cl11_m2{margin:16rpx;}
 }
 @media (max-width: 639.9px){
+.\\\\<sm_cl11_m1,
 .lt-sm_cl11_m1{margin:8rpx;}
 }
 @media (max-width: 1023.9px){@media (min-width: 640px){
@@ -1150,6 +1151,7 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .sm_cl11_m1{margin:8rpx;}
 }
 @media (min-width: 640px) and (max-width: 767.9px){
+.\\\\~sm_cl11_m1,
 .at-sm_cl11_m1{margin:8rpx;}
 }
 @media (min-width: 768px){

diff --git a/test/__snapshots__/preset-weapp.test.ts.snap b/test/__snapshots__/preset-weapp.test.ts.snap
@@ -1141,6 +1141,7 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .lt-lg_cl_m2{margin:16rpx;}
 }
 @media (max-width: 639.9px){
+.\\\\<sm_cl_m1,
 .lt-sm_cl_m1{margin:8rpx;}
 }
 @media (max-width: 1023.9px){@media (min-width: 640px){
@@ -1152,6 +1153,7 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .sm_cl_m1{margin:8rpx;}
 }
 @media (min-width: 640px) and (max-width: 767.9px){
+.\\\\~sm_cl_m1,
 .at-sm_cl_m1{margin:8rpx;}
 }
 @media (min-width: 768px){

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -1052,6 +1052,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',
@@ -1062,6 +1063,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',