Skip to content
This repository was archived by the owner on Dec 15, 2024. It is now read-only.

Commit db2e2e3

Browse files
benfacebenface
committed
Omit values that are the same as the CSS defaults
1 parent a6d02a4 commit db2e2e3

File tree

3 files changed

+68
-48
lines changed

3 files changed

+68
-48
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [Unreleased]
9+
10+
### Changed
11+
- Values that are optional in `linear-gradient()` and `radial-gradient()` (direction, shape, size, and position) are now omitted when the value is the same as the CSS-defined default value
12+
813
## [2.0.1] - 2019-05-23
914

1015
### Fixed

‎index.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,11 @@ module.exports = function() {
6464
const radialGradientColors = theme('radialGradients.colors', defaultRadialGradientColors);
6565
const radialGradientVariants = variants('radialGradients', defaultRadialGradientVariants);
6666

67+
const cssDefaultLinearGradientDirections = ['to bottom', '180deg', '0.5turn', '200grad', '3.1416rad'];
68+
const cssDefaultRadialGradientShape = 'ellipse';
69+
const cssDefaultRadialGradientSize = 'farthest-corner';
70+
const cssDefaultRadialGradientPositions = ['center', 'center center', '50%', '50% 50%', 'center 50%', '50% center'];
71+
6772
const linearGradientUtilities = (function() {
6873
let utilities = {};
6974
_.forEach(linearGradientColors, (colors, colorKey) => {
@@ -73,7 +78,7 @@ module.exports = function() {
7378
}
7479
_.forEach(linearGradientDirections, (direction, directionKey) => {
7580
utilities[`.${e(`bg-gradient-${directionKey}-${colorKey}`)}`] = {
76-
backgroundImage: `linear-gradient(${direction}, ${colors.join(', ')})`,
81+
backgroundImage: `linear-gradient(${_.includes(cssDefaultLinearGradientDirections, direction) ? '' : `${direction}, `}${colors.join(', ')})`,
7782
};
7883
});
7984
});
@@ -90,8 +95,18 @@ module.exports = function() {
9095
_.forEach(radialGradientPositions, (position, positionKey) => {
9196
_.forEach(radialGradientSizes, (size, sizeKey) => {
9297
_.forEach(radialGradientShapes, (shape, shapeKey) => {
98+
let firstArgumentValues = [];
99+
if (shape !== cssDefaultRadialGradientShape) {
100+
firstArgumentValues.push(shape);
101+
}
102+
if (size !== cssDefaultRadialGradientSize) {
103+
firstArgumentValues.push(size);
104+
}
105+
if (!_.includes(cssDefaultRadialGradientPositions, position)) {
106+
firstArgumentValues.push(`at ${position}`);
107+
}
93108
utilities[`.${e(`bg-radial${shapeKey === 'default' ? '' : `-${shapeKey}`}${sizeKey === 'default' ? '' : `-${sizeKey}`}${positionKey === 'default' ? '' : `-${positionKey}`}-${colorKey}`)}`] = {
94-
backgroundImage: `radial-gradient(${shape} ${size} at ${position}, ${colors.join(', ')})`,
109+
backgroundImage: `radial-gradient(${firstArgumentValues.length > 0 ? `${firstArgumentValues.join(' ')}, ` : ''}${colors.join(', ')})`,
95110
};
96111
});
97112
});

‎test.js‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ test('linear gradients have default directions', () => {
118118
background-image: linear-gradient(to bottom right, rgba(255, 0, 0, 0), #f00)
119119
}
120120
.bg-gradient-b-red {
121-
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00)
121+
background-image: linear-gradient(rgba(255, 0, 0, 0), #f00)
122122
}
123123
.bg-gradient-bl-red {
124124
background-image: linear-gradient(to bottom left, rgba(255, 0, 0, 0), #f00)
@@ -149,31 +149,31 @@ test('radial gradients have default shapes, sizes, and positions', () => {
149149
}).then(css => {
150150
expect(css).toMatchCss(`
151151
.bg-radial-red {
152-
background-image: radial-gradient(ellipse closest-side at center, #f00, rgba(255, 0, 0, 0))
152+
background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0))
153153
}
154154
.bg-radial-t-red {
155-
background-image: radial-gradient(ellipse closest-side at top, #f00, rgba(255, 0, 0, 0))
155+
background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0))
156156
}
157157
.bg-radial-tr-red {
158-
background-image: radial-gradient(ellipse closest-side at top right, #f00, rgba(255, 0, 0, 0))
158+
background-image: radial-gradient(closest-side at top right, #f00, rgba(255, 0, 0, 0))
159159
}
160160
.bg-radial-r-red {
161-
background-image: radial-gradient(ellipse closest-side at right, #f00, rgba(255, 0, 0, 0))
161+
background-image: radial-gradient(closest-side at right, #f00, rgba(255, 0, 0, 0))
162162
}
163163
.bg-radial-br-red {
164-
background-image: radial-gradient(ellipse closest-side at bottom right, #f00, rgba(255, 0, 0, 0))
164+
background-image: radial-gradient(closest-side at bottom right, #f00, rgba(255, 0, 0, 0))
165165
}
166166
.bg-radial-b-red {
167-
background-image: radial-gradient(ellipse closest-side at bottom, #f00, rgba(255, 0, 0, 0))
167+
background-image: radial-gradient(closest-side at bottom, #f00, rgba(255, 0, 0, 0))
168168
}
169169
.bg-radial-bl-red {
170-
background-image: radial-gradient(ellipse closest-side at bottom left, #f00, rgba(255, 0, 0, 0))
170+
background-image: radial-gradient(closest-side at bottom left, #f00, rgba(255, 0, 0, 0))
171171
}
172172
.bg-radial-l-red {
173-
background-image: radial-gradient(ellipse closest-side at left, #f00, rgba(255, 0, 0, 0))
173+
background-image: radial-gradient(closest-side at left, #f00, rgba(255, 0, 0, 0))
174174
}
175175
.bg-radial-tl-red {
176-
background-image: radial-gradient(ellipse closest-side at top left, #f00, rgba(255, 0, 0, 0))
176+
background-image: radial-gradient(closest-side at top left, #f00, rgba(255, 0, 0, 0))
177177
}
178178
`);
179179
});
@@ -217,7 +217,7 @@ test('directions and positions can be customized', () => {
217217
background-image: linear-gradient(to top, rgba(0, 0, 255, 0), #00f)
218218
}
219219
.bg-radial-off-center-red {
220-
background-image: radial-gradient(ellipse closest-side at 55% 60%, #f00, rgba(255, 0, 0, 0))
220+
background-image: radial-gradient(closest-side at 55% 60%, #f00, rgba(255, 0, 0, 0))
221221
}
222222
`);
223223
});
@@ -252,16 +252,16 @@ test('gradients can have multiple colors', () => {
252252
}).then(css => {
253253
expect(css).toMatchCss(`
254254
.bg-gradient-to-bottom-red-green {
255-
background-image: linear-gradient(to bottom, #f00, #0f0)
255+
background-image: linear-gradient(#f00, #0f0)
256256
}
257257
.bg-gradient-to-bottom-red-green-blue {
258-
background-image: linear-gradient(to bottom, #f00, #0f0, #00f)
258+
background-image: linear-gradient(#f00, #0f0, #00f)
259259
}
260260
.bg-radial-red-green {
261-
background-image: radial-gradient(ellipse closest-side at center, #f00, #0f0)
261+
background-image: radial-gradient(closest-side, #f00, #0f0)
262262
}
263263
.bg-radial-red-green-blue {
264-
background-image: radial-gradient(ellipse closest-side at center, #f00, #0f0, #00f)
264+
background-image: radial-gradient(closest-side, #f00, #0f0, #00f)
265265
}
266266
`);
267267
});
@@ -301,25 +301,25 @@ test('multiple directions/positions and multiple colors can be used together', (
301301
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
302302
}
303303
.bg-gradient-to-bottom-red {
304-
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00)
304+
background-image: linear-gradient(rgba(255, 0, 0, 0), #f00)
305305
}
306306
.bg-gradient-to-top-green {
307307
background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0)
308308
}
309309
.bg-gradient-to-bottom-green {
310-
background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0), #0f0)
310+
background-image: linear-gradient(rgba(0, 255, 0, 0), #0f0)
311311
}
312312
.bg-radial-top-red {
313-
background-image: radial-gradient(ellipse closest-side at top, #f00, rgba(255, 0, 0, 0))
313+
background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0))
314314
}
315315
.bg-radial-bottom-red {
316-
background-image: radial-gradient(ellipse closest-side at bottom, #f00, rgba(255, 0, 0, 0))
316+
background-image: radial-gradient(closest-side at bottom, #f00, rgba(255, 0, 0, 0))
317317
}
318318
.bg-radial-top-green {
319-
background-image: radial-gradient(ellipse closest-side at top, #0f0, rgba(0, 255, 0, 0))
319+
background-image: radial-gradient(closest-side at top, #0f0, rgba(0, 255, 0, 0))
320320
}
321321
.bg-radial-bottom-green {
322-
background-image: radial-gradient(ellipse closest-side at bottom, #0f0, rgba(0, 255, 0, 0))
322+
background-image: radial-gradient(closest-side at bottom, #0f0, rgba(0, 255, 0, 0))
323323
}
324324
`);
325325
});
@@ -346,10 +346,10 @@ test('colors can be referenced from the theme with a closure', () => {
346346
}).then(css => {
347347
expect(css).toMatchCss(`
348348
.bg-gradient-b-red {
349-
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00)
349+
background-image: linear-gradient(rgba(255, 0, 0, 0), #f00)
350350
}
351351
.bg-gradient-b-blue {
352-
background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0), #00f)
352+
background-image: linear-gradient(rgba(0, 0, 255, 0), #00f)
353353
}
354354
`);
355355
});
@@ -396,16 +396,16 @@ test('color keywords are accepted', () => {
396396
background-image: linear-gradient(to top, transparent, currentColor)
397397
}
398398
.bg-radial-t-white {
399-
background-image: radial-gradient(ellipse closest-side at top, white, rgba(255, 255, 255, 0))
399+
background-image: radial-gradient(closest-side at top, white, rgba(255, 255, 255, 0))
400400
}
401401
.bg-radial-t-black {
402-
background-image: radial-gradient(ellipse closest-side at top, black, rgba(0, 0, 0, 0))
402+
background-image: radial-gradient(closest-side at top, black, rgba(0, 0, 0, 0))
403403
}
404404
.bg-radial-t-transparent {
405-
background-image: radial-gradient(ellipse closest-side at top, transparent, rgba(0, 0, 0, 0))
405+
background-image: radial-gradient(closest-side at top, transparent, rgba(0, 0, 0, 0))
406406
}
407407
.bg-radial-t-current {
408-
background-image: radial-gradient(ellipse closest-side at top, currentColor, transparent)
408+
background-image: radial-gradient(closest-side at top, currentColor, transparent)
409409
}
410410
`);
411411
});
@@ -444,7 +444,7 @@ test('some keywords such as inherit are skipped', () => {
444444
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
445445
}
446446
.bg-radial-t-red {
447-
background-image: radial-gradient(ellipse closest-side at top, #f00, rgba(255, 0, 0, 0))
447+
background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0))
448448
}
449449
`);
450450
});
@@ -479,52 +479,52 @@ test('radial gradient shapes and sizes can be customized', () => {
479479
}).then(css => {
480480
expect(css).toMatchCss(`
481481
.bg-radial-red {
482-
background-image: radial-gradient(circle closest-side at center, #f00, rgba(255, 0, 0, 0))
482+
background-image: radial-gradient(circle closest-side, #f00, rgba(255, 0, 0, 0))
483483
}
484484
.bg-radial-ellipse-red {
485-
background-image: radial-gradient(ellipse closest-side at center, #f00, rgba(255, 0, 0, 0))
485+
background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0))
486486
}
487487
.bg-radial-cover-red {
488-
background-image: radial-gradient(circle farthest-corner at center, #f00, rgba(255, 0, 0, 0))
488+
background-image: radial-gradient(circle, #f00, rgba(255, 0, 0, 0))
489489
}
490490
.bg-radial-ellipse-cover-red {
491-
background-image: radial-gradient(ellipse farthest-corner at center, #f00, rgba(255, 0, 0, 0))
491+
background-image: radial-gradient(#f00, rgba(255, 0, 0, 0))
492492
}
493493
.bg-radial-tr-red {
494494
background-image: radial-gradient(circle closest-side at top right, #f00, rgba(255, 0, 0, 0))
495495
}
496496
.bg-radial-ellipse-tr-red {
497-
background-image: radial-gradient(ellipse closest-side at top right, #f00, rgba(255, 0, 0, 0))
497+
background-image: radial-gradient(closest-side at top right, #f00, rgba(255, 0, 0, 0))
498498
}
499499
.bg-radial-cover-tr-red {
500-
background-image: radial-gradient(circle farthest-corner at top right, #f00, rgba(255, 0, 0, 0))
500+
background-image: radial-gradient(circle at top right, #f00, rgba(255, 0, 0, 0))
501501
}
502502
.bg-radial-ellipse-cover-tr-red {
503-
background-image: radial-gradient(ellipse farthest-corner at top right, #f00, rgba(255, 0, 0, 0))
503+
background-image: radial-gradient(at top right, #f00, rgba(255, 0, 0, 0))
504504
}
505505
.bg-radial-green-blue {
506-
background-image: radial-gradient(circle closest-side at center, #0f0, #00f)
506+
background-image: radial-gradient(circle closest-side, #0f0, #00f)
507507
}
508508
.bg-radial-ellipse-green-blue {
509-
background-image: radial-gradient(ellipse closest-side at center, #0f0, #00f)
509+
background-image: radial-gradient(closest-side, #0f0, #00f)
510510
}
511511
.bg-radial-cover-green-blue {
512-
background-image: radial-gradient(circle farthest-corner at center, #0f0, #00f)
512+
background-image: radial-gradient(circle, #0f0, #00f)
513513
}
514514
.bg-radial-ellipse-cover-green-blue {
515-
background-image: radial-gradient(ellipse farthest-corner at center, #0f0, #00f)
515+
background-image: radial-gradient(#0f0, #00f)
516516
}
517517
.bg-radial-tr-green-blue {
518518
background-image: radial-gradient(circle closest-side at top right, #0f0, #00f)
519519
}
520520
.bg-radial-ellipse-tr-green-blue {
521-
background-image: radial-gradient(ellipse closest-side at top right, #0f0, #00f)
521+
background-image: radial-gradient(closest-side at top right, #0f0, #00f)
522522
}
523523
.bg-radial-cover-tr-green-blue {
524-
background-image: radial-gradient(circle farthest-corner at top right, #0f0, #00f)
524+
background-image: radial-gradient(circle at top right, #0f0, #00f)
525525
}
526526
.bg-radial-ellipse-cover-tr-green-blue {
527-
background-image: radial-gradient(ellipse farthest-corner at top right, #0f0, #00f)
527+
background-image: radial-gradient(at top right, #0f0, #00f)
528528
}
529529
`);
530530
});
@@ -556,14 +556,14 @@ test('responsive variants are generated by default', () => {
556556
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
557557
}
558558
.bg-radial-red {
559-
background-image: radial-gradient(ellipse closest-side at center, #f00, rgba(255, 0, 0, 0))
559+
background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0))
560560
}
561561
@media (min-width: 640px) {
562562
.sm\\:bg-gradient-t-red {
563563
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
564564
}
565565
.sm\\:bg-radial-red {
566-
background-image: radial-gradient(ellipse closest-side at center, #f00, rgba(255, 0, 0, 0))
566+
background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0))
567567
}
568568
}
569569
`);
@@ -606,10 +606,10 @@ test('variants can be customized', () => {
606606
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00)
607607
}
608608
.bg-radial-b-blue {
609-
background-image: radial-gradient(ellipse closest-side at bottom, #00f, rgba(0, 0, 255, 0))
609+
background-image: radial-gradient(closest-side at bottom, #00f, rgba(0, 0, 255, 0))
610610
}
611611
.group:hover .group-hover\\:bg-radial-b-blue {
612-
background-image: radial-gradient(ellipse closest-side at bottom, #00f, rgba(0, 0, 255, 0))
612+
background-image: radial-gradient(closest-side at bottom, #00f, rgba(0, 0, 255, 0))
613613
}
614614
`);
615615
});

0 commit comments

Comments
 (0)