Skip to content

Commit

Permalink
feat: variantTheme add sort
Browse files Browse the repository at this point in the history
  • Loading branch information
@MellowCo
MellowCo committed Feb 5, 2024
1 parent b240bdd commit b09e0af
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 31 deletions.
2 changes: 1 addition & 1 deletion .eslintcache
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/variants/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { variantBreakpoints } from './breakpoints'
import { variantCombinators } from './combinators'
import { variantColorsMediaOrClass } from './dark'
import { variantLanguageDirections } from './directions'
import { themeVariables, variantCssLayer, variantInternalLayer, variantScope, variantSelector, variantSpaceAndDivide, variantVariables } from './misc'
import { variantCssLayer, variantInternalLayer, variantScope, variantSelector, variantSpaceAndDivide, variantTheme, variantVariables } from './misc'
import { variantNegative } from './negative'
import { variantImportant } from './important'
import { variantCustomMedia, variantPrint } from './media'
Expand Down Expand Up @@ -45,6 +45,6 @@ export function variants(options: PresetWeappOptions): Variant<Theme>[] {
variantVariables,
...variantTaggedDataAttributes,

themeVariables,
variantTheme,
]
}
3 changes: 2 additions & 1 deletion src/variants/misc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export const variantSpaceAndDivide: Variant = (matcher) => {
}
}

export const themeVariables: Variant = {
export const variantTheme: Variant = {
name: 'theme-variables',
match(matcher, ctx) {
if (!hasThemeFn(matcher))
Expand All @@ -168,6 +168,7 @@ export const themeVariables: Variant = {
...input,
// entries: [ [ '--css-spacing', '28rpx' ] ],
entries: JSON.parse(transformThemeFn(JSON.stringify(input.entries), ctx.theme)),
sort: 9,
})
},
}
Expand Down
18 changes: 9 additions & 9 deletions test/assets/output/preset-mini/targets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,27 +142,27 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
.fw-\$variable{font-weight:var(--variable);}
.items-\$size{align-items:var(--size);}
.ws-\$variable{white-space:var(--variable);}
.\[--css-spacing\:theme\(spacing\.sm\)\]{--css-spacing:28rpx;}
.\[--css-variable-color\:theme\(colors\.green\.500\)\,theme\(colors\.blue\.500\)\]{--css-variable-color:#22c55e,#3b82f6;}
.\[--css-variable-color\:theme\(colors\.red\.500\)\]{--css-variable-color:#ef4444;}
.\[--css-variable-color\:theme\(colors\.red\.500\/50\%\)\]{--css-variable-color:rgb(239 68 68 / 50%);}
.\[--css-variable\:\"wght\"_400\,_\"opsz\"_14\]{--css-variable:"wght" 400, "opsz" 14;}
.\[a\:b\]{a:b;}
.\[background-image\:url\(star_transparent\.gif\)\,_url\(cat_front\.png\)\]{background-image:url(star_transparent.gif), url(cat_front.png);}
.\[color\:theme\(colors\.blue\.300\/40\%\)\]{color:rgb(147 197 253 / 40%);}
.\[content\:attr\(attr_content\)\]{content:attr(attr content);}
.\[content\:attr\(attr\\_content\)\]{content:attr(attr_content);}
.\[font-family\:\'Inter\'\,_sans-serif\]{font-family:'Inter', sans-serif;}
.\[font-family\:var\(--font-family\)\]{font-family:var(--font-family);}
.\[font-feature-settings\:\'cv02\'\,\'cv03\'\,\'cv04\'\,\'cv11\'\]{font-feature-settings:'cv02','cv03','cv04','cv11';}
.\[font-variation-settings\:\"wght\"_400\,_\"opsz\"_14\]{font-variation-settings:"wght" 400, "opsz" 14;}
.\[margin\:logical_1rem_2rem_3rem\]{margin:logical 1rem 2rem 3rem;}
.\[padding\:theme\(spacing\.xl\)\]{padding:48rpx;}
.all-\[\.target\]-\[combinator\:test-2\] .target,
.children-\[\.target\]-\[combinator\:test-2\]>.target,
.next-\[\.target\]-\[combinator\:test-2\]+.target{combinator:test-2;}
.all-\[\[data-hvr\]\:hover\]\:\[color\:red\] [data-hvr]:hover{color:red;}
.sibling-\[div\:hover\]-\[combinator\:test-4\]+div:hover{combinator:test-4;}
.\[--css-spacing\:theme\(spacing\.sm\)\]{--css-spacing:28rpx;}
.\[--css-variable-color\:theme\(colors\.green\.500\)\,theme\(colors\.blue\.500\)\]{--css-variable-color:#22c55e,#3b82f6;}
.\[--css-variable-color\:theme\(colors\.red\.500\)\]{--css-variable-color:#ef4444;}
.\[--css-variable-color\:theme\(colors\.red\.500\/50\%\)\]{--css-variable-color:rgb(239 68 68 / 50%);}
.\[color\:theme\(colors\.blue\.300\/40\%\)\]{color:rgb(147 197 253 / 40%);}
.\[padding\:theme\(spacing\.xl\)\]{padding:48rpx;}
.-p-px{padding:-1px;}
.\!p-10{padding:80rpx !important;}
.\!p-5px{padding:5px !important;}
Expand Down Expand Up @@ -269,7 +269,6 @@ unocss .scope-\[unocss\]\:block{display:block;}
.disabled\:op50:disabled{opacity:0.5;}
.placeholder-opacity-60::placeholder{opacity:0.6;}
.\[\&\[data-active\=\"true\"\]\]\:bg-red[data-active="true"]{--licl-bg-opacity:1;background-color:rgba(248,113,113,var(--licl-bg-opacity));}
.bg-\[--css-bg\,theme\(spacing\.sm\)\]{background-color:var(--css-bg,28rpx);}
.bg-\[--test-variable\],
.bg-\$test-variable{background-color:var(--test-variable);}
.bg-\[\#153\]\/10,
Expand Down Expand Up @@ -305,6 +304,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
.first-line\:bg-green-400::first-line{--licl-bg-opacity:1;background-color:rgba(74,222,128,var(--licl-bg-opacity));}
.peer:checked~.peer-checked\:bg-blue-500{--licl-bg-opacity:1;background-color:rgba(59,130,246,var(--licl-bg-opacity));}
.previous\/label:checked+.previous-checked\/label\:bg-red-500{--licl-bg-opacity:1;background-color:rgba(239,68,68,var(--licl-bg-opacity));}
.bg-\[--css-bg\,theme\(spacing\.sm\)\]{background-color:var(--css-bg,28rpx);}
.focus-within\:has-first\:checked\:bg-gray\/20:checked:has(:first-child):focus-within{background-color:rgba(156,163,175,0.2);}
.focus-within\:where-first\:checked\:bg-gray\/20:checked:where(:first-child):focus-within{background-color:rgba(156,163,175,0.2);}
.hover\:file\:bg-violet-100:hover::file-selector-button{--licl-bg-opacity:1;background-color:rgba(237,233,254,var(--licl-bg-opacity));}
Expand Down Expand Up @@ -513,7 +513,6 @@ unocss .scope-\[unocss\]\:block{display:block;}
.text-\[color\:var\(--color-x\)\]\:\[trick\]{color:var(--color-x);}
.text-\[color\:var\(--color\)\],
.text-\[var\(--color\)\]{color:var(--color);}
.text-\[theme\(spacing\.sm\)\]{color:28rpx;}
.text-black\/10{color:rgba(0,0,0,0.1);}
.text-red-100,
.text-red100{--licl-text-opacity:1;color:rgba(254,226,226,var(--licl-text-opacity));}
Expand All @@ -527,6 +526,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
.checked\:next\:text-slate-100+*:checked{--licl-text-opacity:1;color:rgba(241,245,249,var(--licl-text-opacity));}
.next\:checked\:children\:text-slate-600>*:checked+*{--licl-text-opacity:1;color:rgba(71,85,105,var(--licl-text-opacity));}
.next\:checked\:text-slate-200:checked+*{--licl-text-opacity:1;color:rgba(226,232,240,var(--licl-text-opacity));}
.text-\[theme\(spacing\.sm\)\]{color:28rpx;}
.c-\[\#157\],
.c-\#157,
.c-hex-157{--licl-text-opacity:1;color:rgba(17,85,119,var(--licl-text-opacity));}
Expand Down Expand Up @@ -555,7 +555,6 @@ unocss .scope-\[unocss\]\:block{display:block;}
.c-\[\#44557733\]\/10,
.c-\#44557733\/10,
.c-hex-44557733\/10{color:rgba(68,85,119,0.1);}
.c-\[theme\(colors\.red\.500\/50\%\)\]{color:rgb(239 68 68 / 50%);}
.c-\$color-variable,
.c-\$color-variable\/\$opacity-variable,
.c-\$color-variable\/10{color:var(--color-variable);}
Expand All @@ -574,6 +573,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
.color-bluegray-400\/10,
.color-bluegray\/10{color:rgba(148,163,184,0.1);}
.open\:color-pink-100[open]{--licl-text-opacity:1;color:rgba(252,231,243,var(--licl-text-opacity));}
.c-\[theme\(colors\.red\.500\/50\%\)\]{color:rgb(239 68 68 / 50%);}
.placeholder-shown-color-transparent:placeholder-shown{color:transparent;}
.in-range\:color-pink-100:in-range{--licl-text-opacity:1;color:rgba(252,231,243,var(--licl-text-opacity));}
.out-of-range\:color-pink-100:out-of-range{--licl-text-opacity:1;color:rgba(252,231,243,var(--licl-text-opacity));}
Expand Down
18 changes: 9 additions & 9 deletions test/assets/output/preset-weapp/targets-custom-rules.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,27 +142,27 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
.fw-_do11_variable{font-weight:var(--variable);}
.items-_do11_size{align-items:var(--size);}
.ws-_do11_variable{white-space:var(--variable);}
._lfl11_--css-spacing_cl11_theme_lbl11_spacing_dl11_sm_lbr11__lfr11_{--css-spacing:28rpx;}
._lfl11_--css-variable_cl11_\"wght\"_400_lco11__\"opsz\"_14_lfr11_{--css-variable:"wght" 400, "opsz" 14;}
._lfl11_--css-variable-color_cl11_theme_lbl11_colors_dl11_green_dl11_500_lbr11__lco11_theme_lbl11_colors_dl11_blue_dl11_500_lbr11__lfr11_{--css-variable-color:#22c55e,#3b82f6;}
._lfl11_--css-variable-color_cl11_theme_lbl11_colors_dl11_red_dl11_500_lbr11__lfr11_{--css-variable-color:#ef4444;}
._lfl11_--css-variable-color_cl11_theme_lbl11_colors_dl11_red_dl11_500_sl11_50_pes11__lbr11__lfr11_{--css-variable-color:rgb(239 68 68 / 50%);}
._lfl11_a_cl11_b_lfr11_{a:b;}
._lfl11_background-image_cl11_url_lbl11_star_transparent_dl11_gif_lbr11__lco11__url_lbl11_cat_front_dl11_png_lbr11__lfr11_{background-image:url(star_transparent.gif), url(cat_front.png);}
._lfl11_color_cl11_theme_lbl11_colors_dl11_blue_dl11_300_sl11_40_pes11__lbr11__lfr11_{color:rgb(147 197 253 / 40%);}
._lfl11_content_cl11_attr_lbl11_attr_content_lbr11__lfr11_{content:attr(attr content);}
._lfl11_content_cl11_attr_lbl11_attr\\_content_lbr11__lfr11_{content:attr(attr_content);}
._lfl11_font-family_cl11_\'Inter\'_lco11__sans-serif_lfr11_{font-family:'Inter', sans-serif;}
._lfl11_font-family_cl11_var_lbl11_--font-family_lbr11__lfr11_{font-family:var(--font-family);}
._lfl11_font-feature-settings_cl11_\'cv02\'_lco11_\'cv03\'_lco11_\'cv04\'_lco11_\'cv11\'_lfr11_{font-feature-settings:'cv02','cv03','cv04','cv11';}
._lfl11_font-variation-settings_cl11_\"wght\"_400_lco11__\"opsz\"_14_lfr11_{font-variation-settings:"wght" 400, "opsz" 14;}
._lfl11_margin_cl11_logical_1rem_2rem_3rem_lfr11_{margin:logical 1rem 2rem 3rem;}
._lfl11_padding_cl11_theme_lbl11_spacing_dl11_xl_lbr11__lfr11_{padding:48rpx;}
.all-_lfl11__dl11_target_lfr11_-_lfl11_combinator_cl11_test-2_lfr11_ .target,
.children-_lfl11__dl11_target_lfr11_-_lfl11_combinator_cl11_test-2_lfr11_>.target,
.next-_lfl11__dl11_target_lfr11_-_lfl11_combinator_cl11_test-2_lfr11_+.target{combinator:test-2;}
.all-_lfl11__lfl11_data-hvr_lfr11__cl11_hover_lfr11__cl11__lfl11_color_cl11_red_lfr11_ [data-hvr]:hover{color:red;}
.sibling-_lfl11_div_cl11_hover_lfr11_-_lfl11_combinator_cl11_test-4_lfr11_+div:hover{combinator:test-4;}
._lfl11_--css-spacing_cl11_theme_lbl11_spacing_dl11_sm_lbr11__lfr11_{--css-spacing:28rpx;}
._lfl11_--css-variable-color_cl11_theme_lbl11_colors_dl11_green_dl11_500_lbr11__lco11_theme_lbl11_colors_dl11_blue_dl11_500_lbr11__lfr11_{--css-variable-color:#22c55e,#3b82f6;}
._lfl11_--css-variable-color_cl11_theme_lbl11_colors_dl11_red_dl11_500_lbr11__lfr11_{--css-variable-color:#ef4444;}
._lfl11_--css-variable-color_cl11_theme_lbl11_colors_dl11_red_dl11_500_sl11_50_pes11__lbr11__lfr11_{--css-variable-color:rgb(239 68 68 / 50%);}
._lfl11_color_cl11_theme_lbl11_colors_dl11_blue_dl11_300_sl11_40_pes11__lbr11__lfr11_{color:rgb(147 197 253 / 40%);}
._lfl11_padding_cl11_theme_lbl11_spacing_dl11_xl_lbr11__lfr11_{padding:48rpx;}
._el11_p-10{padding:80rpx !important;}
._el11_p-5px{padding:5px !important;}
.-p-px{padding:-1px;}
Expand Down Expand Up @@ -272,7 +272,6 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
.bg-_lfl11__wn11_153_lfr11__sl11_10,
.bg-_lfl11__wn11_1533_lfr11__sl11_10{background-color:rgba(17,85,51,0.1);}
.bg-_lfl11__wn11_1533_lfr11_{--un-bg-opacity:0.2;background-color:rgba(17,85,51,var(--un-bg-opacity));}
.bg-_lfl11_--css-bg_lco11_theme_lbl11_spacing_dl11_sm_lbr11__lfr11_{background-color:var(--css-bg,28rpx);}
.bg-_lfl11_10_pes11__lfr11_{background-position:10%;}
.bg-_lfl11_10px_lfr11_{background-position:10px;}
.bg-_lfl11_10vw_lfr11_{background-position:10vw;}
Expand Down Expand Up @@ -303,6 +302,7 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
.first-line_cl11_bg-green-400::first-line{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));}
.peer:checked~.peer-checked_cl11_bg-blue-500{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
.previous_sl11_label:checked+.previous-checked_sl11_label_cl11_bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));}
.bg-_lfl11_--css-bg_lco11_theme_lbl11_spacing_dl11_sm_lbr11__lfr11_{background-color:var(--css-bg,28rpx);}
.focus-within_cl11_has-first_cl11_checked_cl11_bg-gray_sl11_20:checked:has(:first-child):focus-within{background-color:rgba(156,163,175,0.2);}
.focus-within_cl11_where-first_cl11_checked_cl11_bg-gray_sl11_20:checked:where(:first-child):focus-within{background-color:rgba(156,163,175,0.2);}
.hover_cl11_file_cl11_bg-violet-100:hover::file-selector-button{--un-bg-opacity:1;background-color:rgba(237,233,254,var(--un-bg-opacity));}
Expand Down Expand Up @@ -514,7 +514,6 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
.text-_lfl11_color_cl11_var_lbl11_--color_lbr11__lfr11_,
.text-_lfl11_var_lbl11_--color_lbr11__lfr11_{color:var(--color);}
.text-_lfl11_color_cl11_var_lbl11_--color-x_lbr11__lfr11__cl11__lfl11_trick_lfr11_{color:var(--color-x);}
.text-_lfl11_theme_lbl11_spacing_dl11_sm_lbr11__lfr11_{color:28rpx;}
.text-black_sl11_10{color:rgba(0,0,0,0.1);}
.text-red_cl11_20{color:rgba(248,113,113,0.2);}
.text-red-100,
Expand All @@ -528,6 +527,7 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
.checked_cl11_next_cl11_text-slate-100+*:checked{--un-text-opacity:1;color:rgba(241,245,249,var(--un-text-opacity));}
.next_cl11_checked_cl11_children_cl11_text-slate-600>*:checked+*{--un-text-opacity:1;color:rgba(71,85,105,var(--un-text-opacity));}
.next_cl11_checked_cl11_text-slate-200:checked+*{--un-text-opacity:1;color:rgba(226,232,240,var(--un-text-opacity));}
.text-_lfl11_theme_lbl11_spacing_dl11_sm_lbr11__lfr11_{color:28rpx;}
.c-_do11_color-variable,
.c-_do11_color-variable_sl11__do11_opacity-variable,
.c-_do11_color-variable_sl11_10{color:var(--color-variable);}
Expand Down Expand Up @@ -560,7 +560,6 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
.c-_lfl11__wn11_44557733_lfr11__sl11_10,
.c-_wn11_44557733_sl11_10,
.c-hex-44557733_sl11_10{color:rgba(68,85,119,0.1);}
.c-_lfl11_theme_lbl11_colors_dl11_red_dl11_500_sl11_50_pes11__lbr11__lfr11_{color:rgb(239 68 68 / 50%);}
.color-_do11_red{color:var(--red);}
.color-blue,
.color-blue-400{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}
Expand All @@ -575,6 +574,7 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
.color-bluegray_sl11_10,
.color-bluegray-400_sl11_10{color:rgba(148,163,184,0.1);}
.open_cl11_color-pink-100[open]{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));}
.c-_lfl11_theme_lbl11_colors_dl11_red_dl11_500_sl11_50_pes11__lbr11__lfr11_{color:rgb(239 68 68 / 50%);}
.placeholder-shown-color-transparent:placeholder-shown{color:transparent;}
.in-range_cl11_color-pink-100:in-range{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));}
.out-of-range_cl11_color-pink-100:out-of-range{--un-text-opacity:1;color:rgba(252,231,243,var(--un-text-opacity));}
Expand Down
Loading

0 comments on commit b09e0af

Please sign in to comment.