Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commitee27765

Browse files
committed
fix: group by media sorting
1 parent720a710 commitee27765

File tree

3 files changed

+222
-8
lines changed

3 files changed

+222
-8
lines changed

‎src/lib/rules.ts

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { compactCSS } from "./compact-css";
1212
import{pick}from"./pick";
1313
import{symbols}from"./symbols";
1414
import{unescapeString}from"./unescape-string";
15+
import{sortAtRules}from"./sort-at-rules";
1516

1617
/**
1718
* Goes through each parent rule until finding one that matches the predicate
@@ -105,6 +106,14 @@ export const computeStyles = (
105106
constappliedRuleOrProp={}asRecord<string,StyleRuleWithProp>;
106107
constappliedStyles={}asRecord<string,string>;
107108
constinsertOrder=[]asstring[];
109+
constmediaList=newSet<string>(
110+
rules
111+
.filter((r)=>r.type==="style"&&r.media)
112+
.map((r)=>r.type==="style"&&r.media)asstring[]
113+
);
114+
constmediaOrder=Array.from(mediaList)
115+
.sort((a,b)=>sortAtRules(a,b))
116+
.concat(symbols.noMedia);
108117

109118
constvisibleRuleByProp={}asRecord<string,StyleRuleWithProp>;
110119
constvisibleStyles={}asRecord<string,string>;
@@ -117,6 +126,7 @@ export const computeStyles = (
117126

118127
Object.keys(rule.style).forEach((key)=>{
119128
insertOrder.push(key);
129+
120130
appliedStyles[key]=rule.style[key];
121131
// console.log({ rule: rule.selector, key, value: rule.style[key] });
122132
appliedRuleOrProp[key]={
@@ -148,10 +158,9 @@ export const computeStyles = (
148158
keys.omit.forEach((key)=>order.delete(key));
149159

150160
constupdated=pick(visibleStyles,keys.pick);
151-
// console.log({ insertOrder, order, keys, styles, updated });
152161

153162
construlesInMedia=newMap<string,Array<StyleRuleWithProp>>(
154-
sortImplicitFirst ?[[symbols.noMedia,[]]] :undefined
163+
mediaOrder.map((media)=>[media,[]])
155164
);
156165
order.forEach((prop)=>{
157166
construle=visibleRuleByProp[prop];
@@ -174,10 +183,15 @@ export const computeStyles = (
174183

175184
construlesByLayerInMedia=newMap<
176185
string,
177-
Record<string,Array<StyleRuleWithProp>>
186+
Map<string,Array<StyleRuleWithProp>>
178187
>(
179188
sortImplicitFirst
180-
?[[symbols.implicitOuterLayer,{[symbols.noMedia]:[]}]]
189+
?[
190+
[
191+
symbols.implicitOuterLayer,
192+
newMap(mediaOrder.map((media)=>[media,[]])),
193+
],
194+
]
181195
:undefined
182196
);
183197
order.forEach((prop)=>{
@@ -187,11 +201,14 @@ export const computeStyles = (
187201
constlayer=rule.layer||symbols.implicitOuterLayer;
188202
constmedia=rule.media||symbols.noMedia;
189203

190-
constcurrentLayer=rulesByLayerInMedia.get(layer)||{};
191-
constcurrentMedia=currentLayer[media]||[];
204+
constcurrentLayer=
205+
rulesByLayerInMedia.get(layer)||
206+
newMap(mediaOrder.map((media)=>[media,[]]));
207+
constcurrentMedia=currentLayer.get(media)||[];
192208

193209
currentMedia.push(rule);
194-
rulesByLayerInMedia.set(layer,{ ...currentLayer,[media]:currentMedia});
210+
currentLayer.set(media,currentMedia);
211+
rulesByLayerInMedia.set(layer,currentLayer);
195212
});
196213

197214
// console.log({

‎src/lib/sort-at-rules.ts

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
// https://github.com/chakra-ui/panda/blob/843049015a13d3c004bcdede20508af0f1ea24f6/packages/core/src/sort-at-rules.ts#L3-L4
2+
// ----------------------------------------
3+
// Private
4+
// ----------------------------------------
5+
6+
constminMaxWidth=
7+
/(!?\(\s*min(-device-)?-width)(.|\n)+\(\s*max(-device)?-width/i;
8+
constminWidth=/\(\s*min(-device)?-width/i;
9+
constmaxMinWidth=
10+
/(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width/i;
11+
constmaxWidth=/\(\s*max(-device)?-width/i;
12+
13+
constisMinWidth=_testQuery(minMaxWidth,maxMinWidth,minWidth);
14+
constisMaxWidth=_testQuery(maxMinWidth,minMaxWidth,maxWidth);
15+
16+
constminMaxHeight=
17+
/(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height/i;
18+
constminHeight=/\(\s*min(-device)?-height/i;
19+
constmaxMinHeight=
20+
/(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height/i;
21+
constmaxHeight=/\(\s*max(-device)?-height/i;
22+
23+
constisMinHeight=_testQuery(minMaxHeight,maxMinHeight,minHeight);
24+
constisMaxHeight=_testQuery(maxMinHeight,minMaxHeight,maxHeight);
25+
26+
constisPrint=/print/i;
27+
constisPrintOnly=/^print$/i;
28+
29+
constmaxValue=Number.MAX_VALUE;
30+
31+
/**
32+
* Obtain the length of the media request in pixels.
33+
* Copy from original source `function inspectLength (length)`
34+
*/
35+
functiongetQueryLength(query:string){
36+
letlength=/(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(query);
37+
38+
if(length===null&&(isMinWidth(query)||isMinHeight(query))){
39+
length=/(\d)/.exec(query);
40+
}
41+
42+
//@ts-expect-error - will fix later
43+
if(length==="0"){
44+
return0;
45+
}
46+
47+
if(length===null){
48+
returnmaxValue;
49+
}
50+
51+
letnumber:string|number=length[1];
52+
constunit=length[2];
53+
54+
switch(unit){
55+
case"ch":
56+
number=parseFloat(number)*8.8984375;
57+
break;
58+
59+
case"em":
60+
case"rem":
61+
number=parseFloat(number)*16;
62+
break;
63+
64+
case"ex":
65+
number=parseFloat(number)*8.296875;
66+
break;
67+
68+
case"px":
69+
number=parseFloat(number);
70+
break;
71+
}
72+
73+
return+number;
74+
}
75+
76+
/**
77+
* Wrapper for creating test functions
78+
*@private
79+
*@param {RegExp} doubleTestTrue
80+
*@param {RegExp} doubleTestFalse
81+
*@param {RegExp} singleTest
82+
*@return {Function}
83+
*/
84+
function_testQuery(
85+
doubleTestTrue:RegExp,
86+
doubleTestFalse:RegExp,
87+
singleTest:RegExp
88+
){
89+
/**
90+
*@param {string} query
91+
*@return {boolean}
92+
*/
93+
returnfunction(query:string){
94+
if(doubleTestTrue.test(query)){
95+
returntrue;
96+
}elseif(doubleTestFalse.test(query)){
97+
returnfalse;
98+
}
99+
returnsingleTest.test(query);
100+
};
101+
}
102+
103+
/**
104+
*@private
105+
*@param {string} a
106+
*@param {string} b
107+
*@return {number|null}
108+
*/
109+
function_testIsPrint(a:string,b:string){
110+
constisPrintA=isPrint.test(a);
111+
constisPrintOnlyA=isPrintOnly.test(a);
112+
113+
constisPrintB=isPrint.test(b);
114+
constisPrintOnlyB=isPrintOnly.test(b);
115+
116+
if(isPrintA&&isPrintB){
117+
if(!isPrintOnlyA&&isPrintOnlyB){
118+
return1;
119+
}
120+
if(isPrintOnlyA&&!isPrintOnlyB){
121+
return-1;
122+
}
123+
returna.localeCompare(b);
124+
}
125+
if(isPrintA){
126+
return1;
127+
}
128+
if(isPrintB){
129+
return-1;
130+
}
131+
132+
returnnull;
133+
}
134+
135+
// ----------------------------------------
136+
// Public
137+
// ----------------------------------------
138+
139+
functioncreateSort(config:{unitlessMqAlwaysFirst?:boolean}={}){
140+
const{ unitlessMqAlwaysFirst}=config;
141+
142+
returnfunctionsortCSSmq(a:string,b:string){
143+
consttestIsPrint=_testIsPrint(a,b);
144+
if(testIsPrint!==null){
145+
returntestIsPrint;
146+
}
147+
148+
constminA=isMinWidth(a)||isMinHeight(a);
149+
constmaxA=isMaxWidth(a)||isMaxHeight(a);
150+
151+
constminB=isMinWidth(b)||isMinHeight(b);
152+
constmaxB=isMaxWidth(b)||isMaxHeight(b);
153+
154+
if(unitlessMqAlwaysFirst&&((!minA&&!maxA)||(!minB&&!maxB))){
155+
if(!minA&&!maxA&&!minB&&!maxB){
156+
returna.localeCompare(b);
157+
}
158+
return!minB&&!maxB ?1 :-1;
159+
}else{
160+
if(minA&&maxB){
161+
return-1;
162+
}
163+
if(maxA&&minB){
164+
return1;
165+
}
166+
167+
constlengthA=getQueryLength(a);
168+
constlengthB=getQueryLength(b);
169+
170+
if(lengthA===maxValue&&lengthB===maxValue){
171+
returna.localeCompare(b);
172+
}elseif(lengthA===maxValue){
173+
return1;
174+
}elseif(lengthB===maxValue){
175+
return-1;
176+
}
177+
178+
if(lengthA>lengthB){
179+
if(maxA){
180+
return-1;
181+
}
182+
return1;
183+
}
184+
185+
if(lengthA<lengthB){
186+
if(maxA){
187+
return1;
188+
}
189+
return-1;
190+
}
191+
192+
returna.localeCompare(b);
193+
}
194+
};
195+
}
196+
197+
exportconstsortAtRules=createSort();

‎src/sidebar-pane.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ export function SidebarPane() {
241241
content={
242242
<Stackml="12px">
243243
{mediaKeys.map((media)=>{
244-
constmediaRules=mediaMap[media];
244+
constmediaRules=mediaMap.get(media)!;
245245
return(
246246
<DeclarationGroup
247247
key={media}

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp