Skip to content

Commit

Permalink
feat: order custom container variants as given
Browse files Browse the repository at this point in the history
  • Loading branch information
@MellowCo
MellowCo committed Feb 3, 2024
1 parent 98fc5d0 commit 032f92d
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 46 deletions.
2 changes: 1 addition & 1 deletion src/variants/breakpoints.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function variantBreakpoints(): VariantObject {
const isLtPrefix = pre.startsWith('lt-') || pre.startsWith('<') || pre.startsWith('max-')
const isAtPrefix = pre.startsWith('at-') || pre.startsWith('~')

let order = 1000 // parseInt(size)
let order = 3000 // parseInt(size)

if (isLtPrefix) {
order -= (idx + 1)
Expand Down
7 changes: 7 additions & 0 deletions src/variants/container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,18 @@ export const variantContainerQuery: VariantObject = {

if (container) {
warnOnce('The container query variant is experimental and may not follow semver.')

let order = 1000 + Object.keys(ctx.theme.containers ?? {}).indexOf(match)

if (label)
order += 1000

return {
matcher: rest,
handle: (input, next) => next({
...input,
parent: `${input.parent ? `${input.parent} $$ ` : ''}@container${label ? ` ${label} ` : ' '}${container}`,
parentOrder: order,
}),
}
}
Expand Down
30 changes: 15 additions & 15 deletions test/assets/output/preset-mini/targets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1246,21 +1246,6 @@ unocss .scope-\[unocss\]\:block{display:block;}
.backdrop-filter-none{-webkit-backdrop-filter:none;backdrop-filter:none;}
.filter-unset{filter:unset;}
.backdrop-filter-revert{-webkit-backdrop-filter:revert;backdrop-filter:revert;}
@container (min-width: 10.5rem){
.\@\[10\.5rem\]-text-red{--licl-text-opacity:1;color:rgba(248,113,113,var(--licl-text-opacity));}
}
@container (min-width: 220rpx){
.\@sm\:text-red{--licl-text-opacity:1;color:rgba(248,113,113,var(--licl-text-opacity));}
}
@container (min-width: 300rpx){
.\@lg-text-red{--licl-text-opacity:1;color:rgba(248,113,113,var(--licl-text-opacity));}
}
@container label (min-width: 100px){
.\@\[100px\]\/label\:text-green{--licl-text-opacity:1;color:rgba(74,222,128,var(--licl-text-opacity));}
}
@container label (min-width: 180rpx){
.\@xs\/label\:text-green{--licl-text-opacity:1;color:rgba(74,222,128,var(--licl-text-opacity));}
}
@layer base{
.layer-base\:translate-0{--licl-translate-x:0;--licl-translate-y:0;transform:translateX(var(--licl-translate-x)) translateY(var(--licl-translate-y)) translateZ(var(--licl-translate-z)) rotate(var(--licl-rotate)) rotateX(var(--licl-rotate-x)) rotateY(var(--licl-rotate-y)) rotateZ(var(--licl-rotate-z)) skewX(var(--licl-skew-x)) skewY(var(--licl-skew-y)) scaleX(var(--licl-scale-x)) scaleY(var(--licl-scale-y)) scaleZ(var(--licl-scale-z));}
}
Expand Down Expand Up @@ -1293,6 +1278,21 @@ unocss .scope-\[unocss\]\:block{display:block;}
.\[\@supports\(display\:grid\)\]\:bg-red\/33{background-color:rgba(248,113,113,0.33);}
*+.\[\@supports\(display\:grid\)\]\:\[\*\+\&\]\:bg-red\/34{background-color:rgba(248,113,113,0.34);}
}
@container (min-width: 10.5rem){
.\@\[10\.5rem\]-text-red{--licl-text-opacity:1;color:rgba(248,113,113,var(--licl-text-opacity));}
}
@container (min-width: 220rpx){
.\@sm\:text-red{--licl-text-opacity:1;color:rgba(248,113,113,var(--licl-text-opacity));}
}
@container (min-width: 300rpx){
.\@lg-text-red{--licl-text-opacity:1;color:rgba(248,113,113,var(--licl-text-opacity));}
}
@container label (min-width: 100px){
.\@\[100px\]\/label\:text-green{--licl-text-opacity:1;color:rgba(74,222,128,var(--licl-text-opacity));}
}
@container label (min-width: 180rpx){
.\@xs\/label\:text-green{--licl-text-opacity:1;color:rgba(74,222,128,var(--licl-text-opacity));}
}
@media (max-width: 1023.9px){
.lt-lg\:m2{margin:16rpx;}
}
Expand Down
30 changes: 15 additions & 15 deletions test/assets/output/preset-weapp/targets-custom-rules.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1247,21 +1247,6 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
.backdrop-filter-none{-webkit-backdrop-filter:none;backdrop-filter:none;}
.filter-unset{filter:unset;}
.backdrop-filter-revert{-webkit-backdrop-filter:revert;backdrop-filter:revert;}
@container (min-width: 10.5rem){
.\@_lfl11_10_dl11_5rem_lfr11_-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container (min-width: 220rpx){
.\@sm_cl11_text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container (min-width: 300rpx){
.\@lg-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container label (min-width: 100px){
.\@_lfl11_100px_lfr11__sl11_label_cl11_text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
}
@container label (min-width: 180rpx){
.\@xs_sl11_label_cl11_text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
}
@layer base{
.layer-base_cl11_translate-0{--un-translate-x:0;--un-translate-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
}
Expand All @@ -1286,6 +1271,21 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
._lfl11_\@supports_lbl11_display_cl11_grid_lbr11__lfr11__cl11_bg-red_sl11_33{background-color:rgba(248,113,113,0.33);}
*+._lfl11_\@supports_lbl11_display_cl11_grid_lbr11__lfr11__cl11__lfl11_\*\+\&_lfr11__cl11_bg-red_sl11_34{background-color:rgba(248,113,113,0.34);}
}
@container (min-width: 10.5rem){
.\@_lfl11_10_dl11_5rem_lfr11_-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container (min-width: 220rpx){
.\@sm_cl11_text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container (min-width: 300rpx){
.\@lg-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container label (min-width: 100px){
.\@_lfl11_100px_lfr11__sl11_label_cl11_text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
}
@container label (min-width: 180rpx){
.\@xs_sl11_label_cl11_text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
}
@media (max-width: 1023.9px){
.lt-lg_cl11_m2{margin:16rpx;}
}
Expand Down
30 changes: 15 additions & 15 deletions test/assets/output/preset-weapp/targets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1249,21 +1249,6 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
.backdrop-filter-none{-webkit-backdrop-filter:none;backdrop-filter:none;}
.filter-unset{filter:unset;}
.backdrop-filter-revert{-webkit-backdrop-filter:revert;backdrop-filter:revert;}
@container (min-width: 10.5rem){
.\@_lfl_10_dl_5rem_lfr_-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container (min-width: 220rpx){
.\@sm_cl_text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container (min-width: 300rpx){
.\@lg-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container label (min-width: 100px){
.\@_lfl_100px_lfr__sl_label_cl_text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
}
@container label (min-width: 180rpx){
.\@xs_sl_label_cl_text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
}
@layer base{
.layer-base_cl_translate-0{--un-translate-x:0;--un-translate-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
}
Expand All @@ -1288,6 +1273,21 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
._lfl_\@supports_lbl_display_cl_grid_lbr__lfr__cl_bg-red_sl_33{background-color:rgba(248,113,113,0.33);}
*+._lfl_\@supports_lbl_display_cl_grid_lbr__lfr__cl__lfl_\*\+\&_lfr__cl_bg-red_sl_34{background-color:rgba(248,113,113,0.34);}
}
@container (min-width: 10.5rem){
.\@_lfl_10_dl_5rem_lfr_-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container (min-width: 220rpx){
.\@sm_cl_text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container (min-width: 300rpx){
.\@lg-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
}
@container label (min-width: 100px){
.\@_lfl_100px_lfr__sl_label_cl_text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
}
@container label (min-width: 180rpx){
.\@xs_sl_label_cl_text-green{--un-text-opacity:1;color:rgba(74,222,128,var(--un-text-opacity));}
}
@media (max-width: 1023.9px){
.lt-lg_cl_m2{margin:16rpx;}
}
Expand Down

0 comments on commit 032f92d

Please sign in to comment.