Skip to content

Commit 7e873c8

Browse files
HyperLife1119HyperLife1119
authored
refactor(style): migrate from @functions to @plugin usage (#8552)
* refactor: use @plugin instead of @functions * refactor: eliminate inline js usage * build: disable less javascriptEnabled * chore: update stylelintrc * fix: fix tinyColor
1 parent 61df74d commit 7e873c8

File tree

16 files changed

+1667
-1675
lines changed

16 files changed

+1667
-1675
lines changed

‎.stylelintrc.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,15 @@
3636
"selector-class-pattern": null,
3737
"selector-id-pattern": null,
3838
"selector-not-notation": null,
39-
"declaration-block-no-redundant-longhand-properties": null
39+
"declaration-block-no-redundant-longhand-properties": null,
40+
"at-rule-no-unknown": [
41+
true,
42+
{
43+
"ignoreAtRules": [
44+
"plugin"
45+
]
46+
}
47+
]
4048
},
4149
"ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
4250
}

‎components/button/style/mixin.less‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@
5757
&:focus {
5858
& when (@theme = dark) {
5959
.button-color(
60-
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
60+
@color; colorPalette('@{background}', 7); colorPalette('@{background}', 7)
6161
);
6262
}
6363
& when (not (@theme = dark) and not (@theme = variable)) {
6464
.button-color(
65-
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
65+
@color; colorPalette('@{background}', 5); colorPalette('@{background}', 5)
6666
);
6767
}
6868
& when (@theme = variable) {
@@ -73,12 +73,12 @@
7373
&:active {
7474
& when (@theme = dark) {
7575
.button-color(
76-
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
76+
@color; colorPalette('@{background}', 5); colorPalette('@{background}', 5)
7777
);
7878
}
7979
& when (not (@theme = dark) and not (@theme = variable)) {
8080
.button-color(
81-
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
81+
@color; colorPalette('@{background}', 7); colorPalette('@{background}', 7)
8282
);
8383
}
8484
& when (@theme = variable) {
@@ -99,8 +99,8 @@
9999
}
100100
& when (not (@theme = dark) and not (@theme = variable)) {
101101
.button-color(
102-
~`colorPalette('@{btn-primary-bg}', 5) `; @background;
103-
~`colorPalette('@{btn-primary-bg}', 5) `
102+
colorPalette('@{btn-primary-bg}', 5); @background;
103+
colorPalette('@{btn-primary-bg}', 5)
104104
);
105105
}
106106
& when (@theme = variable) {
@@ -114,8 +114,8 @@
114114
}
115115
& when (not (@theme = dark) and not (@theme = variable)) {
116116
.button-color(
117-
~`colorPalette('@{btn-primary-bg}', 7) `; @background;
118-
~`colorPalette('@{btn-primary-bg}', 7) `
117+
colorPalette('@{btn-primary-bg}', 7); @background;
118+
colorPalette('@{btn-primary-bg}', 7)
119119
);
120120
}
121121
& when (@theme = variable) {
@@ -133,10 +133,10 @@
133133
&:focus {
134134
& when (@border = transparent) {
135135
& when (@theme = dark) {
136-
.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
136+
.button-color(colorPalette('@{color}', 7); null; transparent);
137137
}
138138
& when (not (@theme = dark) and not (@theme = variable)) {
139-
.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
139+
.button-color(colorPalette('@{color}', 5); null; transparent);
140140
}
141141
& when (@theme = variable) {
142142
.button-color(@borderActive; transparent; transparent);
@@ -145,12 +145,12 @@
145145
& when not (@border = transparent) {
146146
& when (@theme = dark) {
147147
.button-color(
148-
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
148+
colorPalette('@{color}', 7); null; colorPalette('@{color}', 7)
149149
);
150150
}
151151
& when (not (@theme = dark) and not (@theme = variable)) {
152152
.button-color(
153-
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
153+
colorPalette('@{color}', 5); null; colorPalette('@{color}', 5)
154154
);
155155
}
156156
& when (@theme = variable) {
@@ -162,10 +162,10 @@
162162
&:active {
163163
& when (@border = transparent) {
164164
& when (@theme = dark) {
165-
.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
165+
.button-color(colorPalette('@{color}', 5); null; transparent);
166166
}
167167
& when (not (@theme = dark) and not (@theme = variable)) {
168-
.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
168+
.button-color(colorPalette('@{color}', 7); null; transparent);
169169
}
170170
& when (@theme = variable) {
171171
.button-color(@borderActive; transparent; transparent);
@@ -174,12 +174,12 @@
174174
& when not (@border = transparent) {
175175
& when (@theme = dark) {
176176
.button-color(
177-
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
177+
colorPalette('@{color}', 5); null; colorPalette('@{color}', 5)
178178
);
179179
}
180180
& when (not (@theme = dark) and not (@theme = variable)) {
181181
.button-color(
182-
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
182+
colorPalette('@{color}', 7); null; colorPalette('@{color}', 7)
183183
);
184184
}
185185
& when (@theme = variable) {
@@ -304,14 +304,12 @@
304304
&:focus {
305305
& when (@theme = dark) {
306306
.button-color(
307-
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
308-
`
307+
colorPalette('@{error-color}', 7); @btn-default-bg; colorPalette('@{error-color}', 7)
309308
);
310309
}
311310
& when (not (@theme = dark) and not (@theme = variable)) {
312311
.button-color(
313-
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
314-
`
312+
colorPalette('@{error-color}', 5); @btn-default-bg; colorPalette('@{error-color}', 5)
315313
);
316314
}
317315
& when (@theme = variable) {
@@ -322,14 +320,12 @@
322320
&:active {
323321
& when (@theme = dark) {
324322
.button-color(
325-
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
326-
`
323+
colorPalette('@{error-color}', 5); @btn-default-bg; colorPalette('@{error-color}', 5)
327324
);
328325
}
329326
& when (not (@theme = dark) and not (@theme = variable)) {
330327
.button-color(
331-
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
332-
`
328+
colorPalette('@{error-color}', 7); @btn-default-bg; colorPalette('@{error-color}', 7)
333329
);
334330
}
335331
& when (@theme = variable) {
@@ -346,10 +342,10 @@
346342
&:hover,
347343
&:focus {
348344
& when (@theme = dark) {
349-
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
345+
.button-color(colorPalette('@{error-color}', 7); transparent; transparent);
350346
}
351347
& when (not (@theme = dark) and not (@theme = variable)) {
352-
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
348+
.button-color(colorPalette('@{error-color}', 5); transparent; transparent);
353349
}
354350
& when (@theme = variable) {
355351
.button-color(@error-color-hover; transparent; transparent);
@@ -358,10 +354,10 @@
358354

359355
&:active {
360356
& when (@theme = dark) {
361-
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
357+
.button-color(colorPalette('@{error-color}', 5); transparent; transparent);
362358
}
363359
& when (not (@theme = dark) and not (@theme = variable)) {
364-
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
360+
.button-color(colorPalette('@{error-color}', 7); transparent; transparent);
365361
}
366362
& when (@theme = variable) {
367363
.button-color(@error-color-active; transparent; transparent);
@@ -430,10 +426,10 @@
430426
&:hover,
431427
&:focus {
432428
& when (@theme = dark) {
433-
.button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
429+
.button-color(colorPalette('@{error-color}', 7); @btn-text-hover-bg; transparent);
434430
}
435431
& when (not (@theme = dark) and not (@theme = variable)) {
436-
.button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
432+
.button-color(colorPalette('@{error-color}', 5); @btn-text-hover-bg; transparent);
437433
}
438434
& when (@theme = variable) {
439435
.button-color(@error-color-hover; @btn-text-hover-bg; transparent);
@@ -442,10 +438,10 @@
442438

443439
&:active {
444440
& when (@theme = dark) {
445-
.button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
441+
.button-color(colorPalette('@{error-color}', 5); fadein(@btn-text-hover-bg, 1%); transparent);
446442
}
447443
& when (not (@theme = dark) and not (@theme = variable)) {
448-
.button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
444+
.button-color(colorPalette('@{error-color}', 7); fadein(@btn-text-hover-bg, 1%); transparent);
449445
}
450446
& when (@theme = variable) {
451447
.button-color(@error-color-active; fadein(@btn-text-hover-bg, 1%); transparent);

‎components/style/color/bezierEasing.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
var NEWTON_ITERATIONS = 4;
2+
var NEWTON_MIN_SLOPE = 0.001;
3+
var SUBDIVISION_PRECISION = 0.0000001;
4+
var SUBDIVISION_MAX_ITERATIONS = 10;
5+
6+
var kSplineTableSize = 11;
7+
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
8+
9+
var float32ArraySupported = typeof Float32Array === 'function';
10+
11+
function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
12+
function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
13+
function C(aA1) { return 3.0 * aA1; }
14+
15+
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
16+
function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
17+
18+
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
19+
function getSlope(aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
20+
21+
function binarySubdivide(aX, aA, aB, mX1, mX2) {
22+
var currentX, currentT, i = 0;
23+
do {
24+
currentT = aA + (aB - aA) / 2.0;
25+
currentX = calcBezier(currentT, mX1, mX2) - aX;
26+
if (currentX > 0.0) {
27+
aB = currentT;
28+
} else {
29+
aA = currentT;
30+
}
31+
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
32+
return currentT;
33+
}
34+
35+
function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
36+
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
37+
var currentSlope = getSlope(aGuessT, mX1, mX2);
38+
if (currentSlope === 0.0) {
39+
return aGuessT;
40+
}
41+
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
42+
aGuessT -= currentX / currentSlope;
43+
}
44+
return aGuessT;
45+
}
46+
47+
var BezierEasing = function (mX1, mY1, mX2, mY2) {
48+
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
49+
throw new Error('bezier x values must be in [0, 1] range');
50+
}
51+
52+
// Precompute samples table
53+
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
54+
if (mX1 !== mY1 || mX2 !== mY2) {
55+
for (var i = 0; i < kSplineTableSize; ++i) {
56+
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
57+
}
58+
}
59+
60+
function getTForX(aX) {
61+
var intervalStart = 0.0;
62+
var currentSample = 1;
63+
var lastSample = kSplineTableSize - 1;
64+
65+
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
66+
intervalStart += kSampleStepSize;
67+
}
68+
--currentSample;
69+
70+
// Interpolate to provide an initial guess for t
71+
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
72+
var guessForT = intervalStart + dist * kSampleStepSize;
73+
74+
var initialSlope = getSlope(guessForT, mX1, mX2);
75+
if (initialSlope >= NEWTON_MIN_SLOPE) {
76+
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
77+
} else if (initialSlope === 0.0) {
78+
return guessForT;
79+
} else {
80+
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
81+
}
82+
}
83+
84+
return function BezierEasing(x) {
85+
if (mX1 === mY1 && mX2 === mY2) {
86+
return x; // linear
87+
}
88+
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
89+
if (x === 0) {
90+
return 0;
91+
}
92+
if (x === 1) {
93+
return 1;
94+
}
95+
return calcBezier(getTForX(x), mY1, mY2);
96+
};
97+
};
98+
99+
module.exports = {
100+
install: function (less, pluginManager, functions) {
101+
functions.add('colorEasing', BezierEasing(0.26, 0.09, 0.37, 0.18));
102+
}
103+
};

0 commit comments

Comments
 (0)