Skip to content

Commit 00c93da

Browse files
gucong3000gucong3000
authored
issues/43 (#44)
源代码中修复了inline-block的各种重复hack问题 inline-block的测试用例增到到10多种 补上了源代码中缺失的分号;
1 parent 56d3904 commit 00c93da

File tree

4 files changed

+283
-22
lines changed

4 files changed

+283
-22
lines changed

‎lib/index.js‎

Lines changed: 82 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ var removeDisplay = function(decl) {
3434
}
3535
});
3636
}
37-
}
37+
};
3838

3939

4040
/**
@@ -53,14 +53,14 @@ var removeFloat = function(decl) {
5353
}
5454
});
5555
}
56-
}
56+
};
5757

5858
//伪元素只保留一个冒号
5959
var removeColons = function(rule, i) {
6060
if (rule.selector.match(reALL_PSEUDO)) {
6161
rule.selector = rule.selector.replace(/::/g, ':');
6262
}
63-
}
63+
};
6464

6565
// position: center mixin
6666
function positionCenterMixin(decl, i) {
@@ -95,7 +95,7 @@ function positionCenterMixin(decl, i) {
9595
});
9696

9797
//在后面插入计算的内容
98-
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1')
98+
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1');
9999

100100
insertDecl(decl, i, {
101101
before: reBefore,
@@ -129,7 +129,7 @@ function positionCenterMixin(decl, i) {
129129
function ellipsisMixin(decl, i) {
130130
// var decl = decl.parent.childs[i];
131131
if (decl.prop == 'text-overflow' && decl.value == 'ellipsis') {
132-
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1')
132+
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1');
133133
var countOverflow = 0,
134134
countWhitespace = 0;
135135

@@ -186,7 +186,7 @@ function resizeMixin(decl, i) {
186186
count++;
187187
});
188188
if (count === 0) {
189-
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1')
189+
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1');
190190

191191
insertDecl(decl, i, {
192192
before: reBefore,
@@ -295,7 +295,7 @@ function ieRgbaHack(decl, i) {
295295
var ARGB = "'" + "#" + colorA + colorR + colorG + colorB + "'";
296296

297297
// 插入IE半透明滤镜
298-
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1')
298+
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1');
299299
insertDecl(decl, i, {
300300
before: reBefore,
301301
prop: 'filter',
@@ -320,18 +320,78 @@ function ieRgbaHack(decl, i) {
320320
function ieInlineBlockHack(decl, i) {
321321
if (decl.prop == 'display' && decl.value == 'inline-block') {
322322

323-
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1')
323+
var reBefore = decl.raws.before.replace(reBLANK_LINE, '$1');
324324

325-
insertDecl(decl, i, {
326-
before: reBefore,
327-
prop: '*zoom',
328-
value: 1
329-
});
330-
insertDecl(decl, i, {
331-
before: reBefore,
332-
prop: '*display',
333-
value: 'inline'
325+
// 记录parent中，最后一个无hack前缀的display的值
326+
var finalDisplay = decl.value;
327+
328+
// 记录parent中，最后一个有星号前缀的display的值
329+
var finalDisplayHack;
330+
331+
// 记录parent中，最后一个有星号前缀或无前缀的zoom的值
332+
var finalZoom;
333+
334+
// 是否需要放弃hack当前decl;
335+
var giveup;
336+
337+
//检索parent中原有的display和zoom
338+
decl.parent.each(function(neighbor, index) {
339+
if (neighbor.prop) {
340+
341+
// 当前属性名前是否有星号前缀
342+
var hasIeLte7Hack = /\*$/.test(neighbor.before);
343+
344+
// 当前属性名前是否干净无前缀
345+
var hasNotHack = !neighbor.before || !/[+-_#*]$/.test(neighbor.before);
346+
347+
switch (neighbor.prop) {
348+
case 'zoom':
349+
if (hasIeLte7Hack || hasNotHack) {
350+
// 属性名无前缀，或者前缀为星号时，记录zoom的取值
351+
finalZoom = neighbor.value;
352+
}
353+
break;
354+
case 'display':
355+
// 只遍历display: inline-block之后的display属性,若*display: 1;出现在inline-block之前，IE6下实测无效
356+
if (index > i) {
357+
if (neighbor.value === decl.value) {
358+
// parent中写了不止一处inline-block，则放弃hack，以便只处理最后一个inline-block
359+
giveup = true;
360+
return false;
361+
} else if (hasIeLte7Hack) {
362+
// hack的前缀为星号的display属性，记录它的取值
363+
finalDisplayHack = neighbor.value;
364+
} else if (hasNotHack) {
365+
// 没有hack前缀的display属性，记录它的取值
366+
finalDisplay = neighbor.value;
367+
}
368+
}
369+
break;
370+
}
371+
}
334372
});
373+
374+
// 如果这是parent中最后一组display: inline-block，才做hack
375+
// 如果parent中最后一个无hack前缀的display，取值为'inline-block'，才做hack
376+
if (!giveup && finalDisplay === decl.value ) {
377+
// 若未hack过zoom，或者其取值不为无符号浮点数或百分数，则添加hack
378+
if (!(finalZoom && /^(?:\d+(?:\.\d+)?|\.\d+)\%?$/.test(finalZoom))) {
379+
insertDecl(decl, i, {
380+
before: reBefore,
381+
prop: '*zoom',
382+
value: '1'
383+
});
384+
}
385+
386+
// 若未hack过display，或者其取值不为inline，则添加hack
387+
if (!(finalDisplayHack && finalDisplayHack === 'inline')) {
388+
insertDecl(decl, i, {
389+
before: reBefore,
390+
prop: '*display',
391+
value: 'inline'
392+
});
393+
}
394+
}
335395
}
336396
}
337397

@@ -452,7 +512,7 @@ function insertDecl(decl, i, newDecl) {
452512
} else {
453513
declAfter = decl;
454514
}
455-
decl.parent.insertAfter(declAfter, newDecl)
515+
decl.parent.insertAfter(declAfter, newDecl);
456516
}
457517

458518
var cssgraceRule = function(rule, i) {
@@ -515,13 +575,13 @@ var cssprocess = function(css) {
515575
//保存当前处理文件路径
516576
currentFilePath = getCurrentFilePath(css) || currentFilePath;
517577
css.walkRules(cssgraceRule);
518-
}
578+
};
519579

520580
var pack = function(css, opts) {
521581
//保存当前处理文件路径
522582
currentFilePath = path.dirname(opts.from);
523583
return postcss(cssprocess).process(css, opts).css;
524-
}
584+
};
525585

526-
exports.postcss = cssprocess
527-
exports.pack = pack
586+
exports.postcss = cssprocess;
587+
exports.pack = pack;

‎test/fixtures/inline-block-out.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,77 @@
11
.foo {
2+
/* 需要直接hack */
23
display: inline-block;
34
*display: inline;
45
*zoom: 1;
56
}
7+
.foo {
8+
/* 只需要hack display */
9+
display: inline-block;
10+
*display: inline;
11+
*zoom: 1;
12+
}
13+
.foo {
14+
/* 源代码的display hack的位置不对，需要重新hack display */
15+
display: inline;
16+
display: inline-block;
17+
*display: inline;
18+
*zoom: 1;
19+
}
20+
.foo {
21+
/* 源代码的display hack的位置不对，需要重新hack display */
22+
*display: inline;
23+
display: inline-block;
24+
*display: inline;
25+
*zoom: 1;
26+
}
27+
.foo {
28+
/* 已有*display: inline，只需要hack zoom */
29+
display: inline-block;
30+
*zoom: 1;
31+
*display: inline;
32+
}
33+
.foo {
34+
/* 源码已有zoom: 0.99，不要覆盖掉zoom */
35+
zoom: 0.99;
36+
display: inline-block;
37+
*display: inline;
38+
}
39+
.foo {
40+
/* 源码已有zoom: 99.9%，不要覆盖掉zoom */
41+
zoom: 99.9%;
42+
display: inline-block;
43+
*display: inline;
44+
}
45+
.foo {
46+
/* 源码已有zoom，但是取值不对，也需要hack */
47+
zoom: 0.0.1;
48+
display: inline-block;
49+
*display: inline;
50+
*zoom: 1;
51+
}
52+
.foo {
53+
/* 源码已有zoom，但是取值不对，也需要hack */
54+
zoom: normal;
55+
display: inline-block;
56+
*display: inline;
57+
*zoom: 1;
58+
}
59+
.foo {
60+
/* 源码已将display覆盖为inline，无需hack */
61+
display: inline-block;
62+
display: inline;
63+
}
64+
.foo {
65+
/* display: inline-block;写了两遍，只处理最后一个 */
66+
display: inline-block;
67+
display: inline-block;
68+
*display: inline;
69+
*zoom: 1;
70+
}
71+
.foo {
72+
/* display: inline-block;写了两遍，只处理最后一个，且不需要写zoom */
73+
display: inline-block;
74+
zoom: 0.99;
75+
display: inline-block;
76+
*display: inline;
77+
}

‎test/fixtures/inline-block-real.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,77 @@
11
.foo {
2+
/* 需要直接hack */
23
display: inline-block;
34
*display: inline;
45
*zoom: 1;
56
}
7+
.foo {
8+
/* 只需要hack display */
9+
display: inline-block;
10+
*display: inline;
11+
*zoom: 1;
12+
}
13+
.foo {
14+
/* 源代码的display hack的位置不对，需要重新hack display */
15+
display: inline;
16+
display: inline-block;
17+
*display: inline;
18+
*zoom: 1;
19+
}
20+
.foo {
21+
/* 源代码的display hack的位置不对，需要重新hack display */
22+
*display: inline;
23+
display: inline-block;
24+
*display: inline;
25+
*zoom: 1;
26+
}
27+
.foo {
28+
/* 已有*display: inline，只需要hack zoom */
29+
display: inline-block;
30+
*zoom: 1;
31+
*display: inline;
32+
}
33+
.foo {
34+
/* 源码已有zoom: 0.99，不要覆盖掉zoom */
35+
zoom: 0.99;
36+
display: inline-block;
37+
*display: inline;
38+
}
39+
.foo {
40+
/* 源码已有zoom: 99.9%，不要覆盖掉zoom */
41+
zoom: 99.9%;
42+
display: inline-block;
43+
*display: inline;
44+
}
45+
.foo {
46+
/* 源码已有zoom，但是取值不对，也需要hack */
47+
zoom: 0.0.1;
48+
display: inline-block;
49+
*display: inline;
50+
*zoom: 1;
51+
}
52+
.foo {
53+
/* 源码已有zoom，但是取值不对，也需要hack */
54+
zoom: normal;
55+
display: inline-block;
56+
*display: inline;
57+
*zoom: 1;
58+
}
59+
.foo {
60+
/* 源码已将display覆盖为inline，无需hack */
61+
display: inline-block;
62+
display: inline;
63+
}
64+
.foo {
65+
/* display: inline-block;写了两遍，只处理最后一个 */
66+
display: inline-block;
67+
display: inline-block;
68+
*display: inline;
69+
*zoom: 1;
70+
}
71+
.foo {
72+
/* display: inline-block;写了两遍，只处理最后一个，且不需要写zoom */
73+
display: inline-block;
74+
zoom: 0.99;
75+
display: inline-block;
76+
*display: inline;
77+
}

‎test/fixtures/inline-block.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,60 @@
11
.foo {
2+
/* 需要直接hack */
3+
display: inline-block;
4+
}
5+
.foo {
6+
/* 只需要hack display */
7+
display: inline-block;
8+
*zoom: 1;
9+
}
10+
.foo {
11+
/* 源代码的display hack的位置不对，需要重新hack display */
12+
display: inline;
13+
display: inline-block;
14+
}
15+
.foo {
16+
/* 源代码的display hack的位置不对，需要重新hack display */
17+
*display: inline;
18+
display: inline-block;
19+
}
20+
.foo {
21+
/* 已有*display: inline，只需要hack zoom */
22+
display: inline-block;
23+
*display: inline;
24+
}
25+
.foo {
26+
/* 源码已有zoom: 0.99，不要覆盖掉zoom */
27+
zoom: 0.99;
28+
display: inline-block;
29+
}
30+
.foo {
31+
/* 源码已有zoom: 99.9%，不要覆盖掉zoom */
32+
zoom: 99.9%;
33+
display: inline-block;
34+
}
35+
.foo {
36+
/* 源码已有zoom，但是取值不对，也需要hack */
37+
zoom: 0.0.1;
38+
display: inline-block;
39+
}
40+
.foo {
41+
/* 源码已有zoom，但是取值不对，也需要hack */
42+
zoom: normal;
43+
display: inline-block;
44+
}
45+
.foo {
46+
/* 源码已将display覆盖为inline，无需hack */
47+
display: inline-block;
48+
display: inline;
49+
}
50+
.foo {
51+
/* display: inline-block;写了两遍，只处理最后一个 */
52+
display: inline-block;
53+
display: inline-block;
54+
}
55+
.foo {
56+
/* display: inline-block;写了两遍，只处理最后一个，且不需要写zoom */
57+
display: inline-block;
58+
zoom: 0.99;
259
display: inline-block;
360
}

0 commit comments

Comments
 (0)