@@ -54,6 +54,18 @@ module.exports = function() {
5454 } ;
5555 const defaultRadialGradientColors = { } ;
5656 const defaultRadialGradientVariants = [ 'responsive' ] ;
57+ const defaultRepeatingLinearGradientDirections = defaultLinearGradientDirections ;
58+ const defaultRepeatingLinearGradientColors = defaultLinearGradientColors ;
59+ const defaultRepeatingLinearGradientLengths = { } ;
60+ const defaultRepeatingLinearGradientVariants = [ 'responsive' ] ;
61+ const defaultRepeatingRadialGradientShapes = defaultRadialGradientShapes ;
62+ const defaultRepeatingRadialGradientSizes = {
63+ 'default' : 'farthest-corner' ,
64+ } ;
65+ const defaultRepeatingRadialGradientPositions = defaultRadialGradientPositions ;
66+ const defaultRepeatingRadialGradientColors = defaultRadialGradientColors ;
67+ const defaultRepeatingRadialGradientLengths = { } ;
68+ const defaultRepeatingRadialGradientVariants = [ 'responsive' ] ;
5769
5870 const linearGradientDirections = theme ( 'linearGradients.directions' , defaultLinearGradientDirections ) ;
5971 const linearGradientColors = theme ( 'linearGradients.colors' , defaultLinearGradientColors ) ;
@@ -63,11 +75,46 @@ module.exports = function() {
6375 const radialGradientPositions = theme ( 'radialGradients.positions' , defaultRadialGradientPositions ) ;
6476 const radialGradientColors = theme ( 'radialGradients.colors' , defaultRadialGradientColors ) ;
6577 const radialGradientVariants = variants ( 'radialGradients' , defaultRadialGradientVariants ) ;
78+ const repeatingLinearGradientDirections = theme ( 'repeatingLinearGradients.directions' , defaultRepeatingLinearGradientDirections ) ;
79+ const repeatingLinearGradientColors = theme ( 'repeatingLinearGradients.colors' , defaultRepeatingLinearGradientColors ) ;
80+ const repeatingLinearGradientLengths = theme ( 'repeatingLinearGradients.lengths' , defaultRepeatingLinearGradientLengths ) ;
81+ const repeatingLinearGradientVariants = variants ( 'repeatingLinearGradients' , defaultRepeatingLinearGradientVariants ) ;
82+ const repeatingRadialGradientShapes = theme ( 'repeatingRadialGradients.shapes' , defaultRepeatingRadialGradientShapes ) ;
83+ const repeatingRadialGradientSizes = theme ( 'repeatingRadialGradients.sizes' , defaultRepeatingRadialGradientSizes ) ;
84+ const repeatingRadialGradientPositions = theme ( 'repeatingRadialGradients.positions' , defaultRepeatingRadialGradientPositions ) ;
85+ const repeatingRadialGradientColors = theme ( 'repeatingRadialGradients.colors' , defaultRepeatingRadialGradientColors ) ;
86+ const repeatingRadialGradientLengths = theme ( 'repeatingRadialGradients.lengths' , defaultRepeatingRadialGradientLengths ) ;
87+ const repeatingRadialGradientVariants = variants ( 'repeatingRadialGradients' , defaultRepeatingRadialGradientVariants ) ;
88+
89+ const linearGradientSelector = function ( directionKey , colorKey , lengthKey ) {
90+ return `.${ e ( `bg-gradient-${ directionKey } ${ colorKey } ${ lengthKey ? `-${ lengthKey } : '' } ) } ;
91+ } ;
92+
93+ const linearGradientValue = function ( direction , colors , length ) {
94+ const cssDefaultLinearGradientDirections = [ 'to bottom' , '180deg' , '0.5turn' , '200grad' , '3.1416rad' ] ;
95+ return `${ ! _ . isNil ( length ) ? 'repeating-' : '' } ${ _ . includes ( cssDefaultLinearGradientDirections , direction ) ? '' : `${ direction } } ${ colors . join ( ', ' ) } ${ length ? ` ${ length } : '' } ;
96+ } ;
97+
98+ const radialGradientSelector = function ( shapeKey , sizeKey , positionKey , colorKey , lengthKey ) {
99+ return `.${ e ( `bg-radial${ shapeKey === 'default' ? '' : `-${ shapeKey } } ${ sizeKey === 'default' ? '' : `-${ sizeKey } } ${ positionKey === 'default' ? '' : `-${ positionKey } } ${ colorKey } ${ lengthKey ? `-${ lengthKey } : '' } ) } ;
100+ } ;
66101
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' ] ;
102+ const radialGradientValue = function ( shape , size , position , colors , length ) {
103+ const cssDefaultRadialGradientShape = 'ellipse' ;
104+ const cssDefaultRadialGradientSize = 'farthest-corner' ;
105+ const cssDefaultRadialGradientPositions = [ 'center' , 'center center' , '50%' , '50% 50%' , 'center 50%' , '50% center' ] ;
106+ let firstArgumentValues = [ ] ;
107+ if ( shape !== cssDefaultRadialGradientShape ) {
108+ firstArgumentValues . push ( shape ) ;
109+ }
110+ if ( size !== cssDefaultRadialGradientSize ) {
111+ firstArgumentValues . push ( size ) ;
112+ }
113+ if ( ! _ . includes ( cssDefaultRadialGradientPositions , position ) ) {
114+ firstArgumentValues . push ( `at ${ position } ) ;
115+ }
116+ return `${ ! _ . isNil ( length ) ? 'repeating-' : '' } ${ firstArgumentValues . length > 0 ? `${ firstArgumentValues . join ( ' ' ) } : '' } ${ colors . join ( ', ' ) } ${ length ? ` ${ length } : '' } ;
117+ } ;
71118
72119 const linearGradientUtilities = ( function ( ) {
73120 let utilities = { } ;
@@ -77,8 +124,8 @@ module.exports = function() {
77124 return ; // continue
78125 }
79126 _ . forEach ( linearGradientDirections , ( direction , directionKey ) => {
80- utilities [ `. ${ e ( `bg-gradient- ${ directionKey } - ${ colorKey } ` ) } ` ] = {
81- backgroundImage : `linear-gradient( ${ _ . includes ( cssDefaultLinearGradientDirections , direction ) ? '' : ` ${ direction } , ` } ${ colors . join ( ', ' ) } )` ,
127+ utilities [ linearGradientSelector ( directionKey , colorKey ) ] = {
128+ backgroundImage : linearGradientValue ( direction , colors ) ,
82129 } ;
83130 } ) ;
84131 } ) ;
@@ -95,18 +142,8 @@ module.exports = function() {
95142 _ . forEach ( radialGradientPositions , ( position , positionKey ) => {
96143 _ . forEach ( radialGradientSizes , ( size , sizeKey ) => {
97144 _ . 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- }
108- utilities [ `.${ e ( `bg-radial${ shapeKey === 'default' ? '' : `-${ shapeKey } } ${ sizeKey === 'default' ? '' : `-${ sizeKey } } ${ positionKey === 'default' ? '' : `-${ positionKey } } ${ colorKey } ) } ] = {
109- backgroundImage : `radial-gradient(${ firstArgumentValues . length > 0 ? `${ firstArgumentValues . join ( ' ' ) } : '' } ${ colors . join ( ', ' ) } ,
145+ utilities [ radialGradientSelector ( shapeKey , sizeKey , positionKey , colorKey ) ] = {
146+ backgroundImage : radialGradientValue ( shape , size , position , colors ) ,
110147 } ;
111148 } ) ;
112149 } ) ;
@@ -115,7 +152,49 @@ module.exports = function() {
115152 return utilities ;
116153 } ) ( ) ;
117154
155+ const repeatingLinearGradientUtilities = ( function ( ) {
156+ let utilities = { } ;
157+ _ . forEach ( repeatingLinearGradientLengths , ( length , lengthKey ) => {
158+ _ . forEach ( repeatingLinearGradientColors , ( colors , colorKey ) => {
159+ colors = normalizeColors ( colors , true ) ;
160+ if ( ! colors ) {
161+ return ; // continue
162+ }
163+ _ . forEach ( repeatingLinearGradientDirections , ( direction , directionKey ) => {
164+ utilities [ linearGradientSelector ( directionKey , colorKey , lengthKey ) ] = {
165+ backgroundImage : linearGradientValue ( direction , colors , length ) ,
166+ } ;
167+ } ) ;
168+ } ) ;
169+ } ) ;
170+ return utilities ;
171+ } ) ( ) ;
172+
173+ const repeatingRadialGradientUtilities = ( function ( ) {
174+ let utilities = { } ;
175+ _ . forEach ( repeatingRadialGradientLengths , ( length , lengthKey ) => {
176+ _ . forEach ( repeatingRadialGradientColors , ( colors , colorKey ) => {
177+ colors = normalizeColors ( colors , false ) ;
178+ if ( ! colors ) {
179+ return ; // continue
180+ }
181+ _ . forEach ( repeatingRadialGradientPositions , ( position , positionKey ) => {
182+ _ . forEach ( repeatingRadialGradientSizes , ( size , sizeKey ) => {
183+ _ . forEach ( repeatingRadialGradientShapes , ( shape , shapeKey ) => {
184+ utilities [ radialGradientSelector ( shapeKey , sizeKey , positionKey , colorKey , lengthKey ) ] = {
185+ backgroundImage : radialGradientValue ( shape , size , position , colors , length ) ,
186+ } ;
187+ } ) ;
188+ } ) ;
189+ } ) ;
190+ } ) ;
191+ } ) ;
192+ return utilities ;
193+ } ) ( ) ;
194+
118195 addUtilities ( linearGradientUtilities , linearGradientVariants ) ;
119196 addUtilities ( radialGradientUtilities , radialGradientVariants ) ;
197+ addUtilities ( repeatingLinearGradientUtilities , repeatingLinearGradientVariants ) ;
198+ addUtilities ( repeatingRadialGradientUtilities , repeatingRadialGradientVariants ) ;
120199 } ;
121200} ;
0 commit comments