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

Commit 9a537da

Browse files
benfacebenface
committed
Use new plugin definition syntax + flatten theme configuration
1 parent c96ef7a commit 9a537da

File tree

6 files changed

+831
-797
lines changed

6 files changed

+831
-797
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ 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+
## [3.0.0] - XXXX-XX-XX
9+
10+
### Changed
11+
- Changed to use Tailwind 1.2’s new plugin definition syntax
12+
- Flattened the theme configuration in order to support `theme.extend` which only allows extending top-level objects; in other words, the `linearGradients` object that contained nested `directions` and `colors` objects has been replaced by two top-level theme objects, `linearGradientDirections` and `linearGradientColors`; same for `radialGradients` (`radialGradientShapes`, `radialGradientSizes`, etc.), `conicGradients` (`conicGradientStartingAngles`, `conicGradientPositions`, etc.), `repeatingLinearGradients`, `repeatingRadialGradients`, and `repeatingConicGradients`
13+
814
## [2.3.1] - 2019-09-01
915

1016
### Fixed
@@ -84,8 +90,9 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
8490

8591
Initial release
8692

87-
[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v2.3.1...HEAD
88-
[2.3.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.3.0...v2.3.1
93+
[Unreleased]: https://github.com/benface/tailwindcss-gradients/compare/v3.0.0...HEAD
94+
[3.0.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.3.1...v3.0.0
95+
[2.3.1]: https://github.com/benface/tailwindcss-gradients/compare/v2.3.0...v2.3.1
8996
[2.3.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.2.0...v2.3.0
9097
[2.2.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.1.0...v2.2.0
9198
[2.1.0]: https://github.com/benface/tailwindcss-gradients/compare/v2.0.1...v2.1.0

‎README.md‎

Lines changed: 99 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,12 @@ npm install tailwindcss-gradients
1717
'red': '#f00',
1818
'blue': '#00f',
1919
},
20-
linearGradients: theme => ({
21-
colors: theme('colors'),
22-
}),
23-
radialGradients: theme => ({
24-
colors: theme('colors'),
25-
}),
26-
conicGradients: theme => ({
27-
colors: theme('colors'),
28-
}),
20+
linearGradientColors: theme => theme('colors'),
21+
radialGradientColors: theme => theme('colors'),
22+
conicGradientColors: theme => theme('colors'),
2923
},
3024
plugins: [
31-
require('tailwindcss-gradients')(),
25+
require('tailwindcss-gradients'),
3226
],
3327
}
3428
```
@@ -37,109 +31,97 @@ npm install tailwindcss-gradients
3731

3832
```js
3933
// tailwind.config.js
40-
{
34+
module.exports = {
4135
theme: {
42-
linearGradients: {
43-
directions: { // defaults to these values
44-
't': 'to top',
45-
'tr': 'to top right',
46-
'r': 'to right',
47-
'br': 'to bottom right',
48-
'b': 'to bottom',
49-
'bl': 'to bottom left',
50-
'l': 'to left',
51-
'tl': 'to top left',
52-
},
53-
colors: { // defaults to {}
54-
'red': '#f00',
55-
'red-blue': ['#f00', '#00f'],
56-
'red-green-blue': ['#f00', '#0f0', '#00f'],
57-
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
58-
},
36+
linearGradientDirections: { // defaults to these values
37+
't': 'to top',
38+
'tr': 'to top right',
39+
'r': 'to right',
40+
'br': 'to bottom right',
41+
'b': 'to bottom',
42+
'bl': 'to bottom left',
43+
'l': 'to left',
44+
'tl': 'to top left',
45+
},
46+
linearGradientColors: { // defaults to {}
47+
'red': '#f00',
48+
'red-blue': ['#f00', '#00f'],
49+
'red-green-blue': ['#f00', '#0f0', '#00f'],
50+
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
51+
},
52+
radialGradientShapes: { // defaults to this value
53+
'default': 'ellipse',
54+
},
55+
radialGradientSizes: { // defaults to this value
56+
'default': 'closest-side',
57+
},
58+
radialGradientPositions: { // defaults to these values
59+
'default': 'center',
60+
't': 'top',
61+
'tr': 'top right',
62+
'r': 'right',
63+
'br': 'bottom right',
64+
'b': 'bottom',
65+
'bl': 'bottom left',
66+
'l': 'left',
67+
'tl': 'top left',
68+
},
69+
radialGradientColors: { // defaults to {}
70+
'red': '#f00',
71+
'red-blue': ['#f00', '#00f'],
72+
'red-green-blue': ['#f00', '#0f0', '#00f'],
73+
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
5974
},
60-
radialGradients: {
61-
shapes: { // defaults to this value
62-
'default': 'ellipse',
63-
},
64-
sizes: { // defaults to this value
65-
'default': 'closest-side',
66-
},
67-
positions: { // defaults to these values
68-
'default': 'center',
69-
't': 'top',
70-
'tr': 'top right',
71-
'r': 'right',
72-
'br': 'bottom right',
73-
'b': 'bottom',
74-
'bl': 'bottom left',
75-
'l': 'left',
76-
'tl': 'top left',
77-
},
78-
colors: { // defaults to {}
79-
'red': '#f00',
80-
'red-blue': ['#f00', '#00f'],
81-
'red-green-blue': ['#f00', '#0f0', '#00f'],
82-
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
83-
},
75+
conicGradientStartingAngles: { // defaults to this value
76+
'default': '0',
8477
},
85-
conicGradients: {
86-
startingAngles: { // defaults to this value
87-
'default': '0',
88-
},
89-
positions: { // defaults to these values
90-
'default': 'center',
91-
't': 'top',
92-
'tr': 'top right',
93-
'r': 'right',
94-
'br': 'bottom right',
95-
'b': 'bottom',
96-
'bl': 'bottom left',
97-
'l': 'left',
98-
'tl': 'top left',
99-
},
100-
colors: { // defaults to {}
101-
'red': '#f00',
102-
'red-blue': ['#f00', '#00f'],
103-
'red-green-blue': ['#f00', '#0f0', '#00f'],
104-
'checkerboard': ['white 90deg', 'black 90deg 180deg', 'white 180deg 270deg', 'black 270deg'],
105-
},
78+
conicGradientPositions: { // defaults to these values
79+
'default': 'center',
80+
't': 'top',
81+
'tr': 'top right',
82+
'r': 'right',
83+
'br': 'bottom right',
84+
'b': 'bottom',
85+
'bl': 'bottom left',
86+
'l': 'left',
87+
'tl': 'top left',
10688
},
107-
repeatingLinearGradients: theme => ({
108-
directions: theme('linearGradients.directions'), // defaults to the same values as linearGradients’ directions
109-
colors: theme('linearGradients.colors'), // defaults to {}
110-
lengths: { // defaults to {}
111-
'sm': '25px',
112-
'md': '50px',
113-
'lg': '100px',
114-
},
115-
}),
116-
repeatingRadialGradients: theme => ({
117-
shapes: theme('radialGradients.shapes'), // defaults to the same value as radialGradients’ shapes
118-
sizes: { // defaults to this value
119-
'default': 'farthest-corner',
120-
},
121-
positions: theme('radialGradients.positions'), // defaults to the same values as radialGradients’ positions
122-
colors: theme('radialGradients.colors'), // defaults to {}
123-
lengths: { // defaults to {}
124-
'sm': '25px',
125-
'md': '50px',
126-
'lg': '100px',
127-
},
128-
}),
129-
repeatingConicGradients: {
130-
startingAngles: theme('conicGradients.startingAngles'), // defaults to the same value as conicGradients’ startingAngles
131-
positions: theme('conicGradients.positions'), // defaults to the same values as conicGradients’ positions
132-
colors: { // defaults to {}
133-
'red': '#f00',
134-
'red-blue': ['#f00', '#00f'],
135-
'red-green-blue': ['#f00', '#0f0', '#00f'],
136-
'starburst': ['white 0 5deg', 'blue 5deg'],
137-
},
138-
lengths: { // defaults to {}
139-
'sm': '10deg',
140-
'md': '20deg',
141-
'lg': '40deg',
142-
},
89+
conicGradientColors: { // defaults to {}
90+
'red': '#f00',
91+
'red-blue': ['#f00', '#00f'],
92+
'red-green-blue': ['#f00', '#0f0', '#00f'],
93+
'checkerboard': ['white 90deg', 'black 90deg 180deg', 'white 180deg 270deg', 'black 270deg'],
94+
},
95+
repeatingLinearGradientDirections: theme => theme('linearGradientDirections'), // defaults to this value
96+
repeatingLinearGradientColors: theme('linearGradientColors'), // defaults to {}
97+
repeatingLinearGradientLengths: { // defaults to {}
98+
'sm': '25px',
99+
'md': '50px',
100+
'lg': '100px',
101+
},
102+
repeatingRadialGradientShapes: theme => theme('radialGradientShapes'), // defaults to this value
103+
repeatingRadialGradientSizes: { // defaults to this value
104+
'default': 'farthest-corner',
105+
},
106+
repeatingRadialGradientPositions: theme => theme('radialGradientPositions'), // defaults to this value
107+
repeatingRadialGradientColors: theme('radialGradientColors'), // defaults to {}
108+
repeatingRadialGradientLengths: { // defaults to {}
109+
'sm': '25px',
110+
'md': '50px',
111+
'lg': '100px',
112+
},
113+
repeatingConicGradientStartingAngles: theme => theme('conicGradientStartingAngles'), // defaults to this value
114+
repeatingConicGradientPositions: theme => theme('conicGradientPositions'), // defaults to this value
115+
repeatingConicGradientColors: { // defaults to {}
116+
'red': '#f00',
117+
'red-blue': ['#f00', '#00f'],
118+
'red-green-blue': ['#f00', '#0f0', '#00f'],
119+
'starburst': ['white 0 5deg', 'blue 5deg'],
120+
},
121+
repeatingConicGradientLengths: { // defaults to {}
122+
'sm': '10deg',
123+
'md': '20deg',
124+
'lg': '40deg',
143125
},
144126
},
145127
variants: { // all the following default to ['responsive']
@@ -152,9 +134,9 @@ npm install tailwindcss-gradients
152134
repeatingConicGradients: ['responsive'],
153135
},
154136
plugins: [
155-
require('tailwindcss-gradients')(),
137+
require('tailwindcss-gradients'),
156138
],
157-
}
139+
};
158140
```
159141

160142
This plugin generates the following utilities:
@@ -164,35 +146,35 @@ This plugin generates the following utilities:
164146
background-image: none;
165147
}
166148

167-
/* configurable with the "linearGradients" theme object */
149+
/* configurable with the "linearGradientDirections" and "linearGradientColors" theme objects */
168150
.bg-gradient-[direction-key]-[color-key] {
169151
background-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);
170152
}
171153

172-
/* configurable with the "radialGradients" theme object */
154+
/* configurable with the "radialGradientShapes", "radialGradientSizes", "radialGradientPositions", and "radialGradientColors" theme objects */
173155
/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
174156
.bg-radial-[shape-key]-[size-key]-[position-key]-[color-key] {
175157
background-image: radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...]);
176158
}
177159

178-
/* configurable with the "conicGradients" theme object */
160+
/* configurable with the "conicGradientStartingAngles", "conicGradientPositions", and "conicGradientColors" theme objects */
179161
/* note that the "default" [starting-angle-key] and [position-key] are omitted from the class */
180162
.bg-conic-[starting-angle-key]-[position-key]-[color-key] {
181163
background-image: conic-gradient(from [starting-angle-value] at [position-value], [color-value-1], [color-value-2], [...]);
182164
}
183165

184-
/* configurable with the "repeatingLinearGradients" theme object */
166+
/* configurable with the "repeatingLinearGradientDirections", "repeatingLinearGradientColors", and "repeatingLinearGradientLengths" theme objects */
185167
.bg-gradient-[direction-key]-[color-key]-[length-key] {
186168
background-image: repeating-linear-gradient([direction-value], [color-value-1], [color-value-2], [...] [length-value]);
187169
}
188170

189-
/* configurable with the "repeatingRadialGradients" theme object */
171+
/* configurable with the "repeatingRadialGradientShapes", "repeatingRadialGradientSizes", "repeatingRadialGradientPositions", "repeatingRadialGradientColors", and "repeatingRadialGradientLengths" theme objects */
190172
/* note that the "default" [shape-key], [size-key], and [position-key] are omitted from the class */
191173
.bg-radial-[shape-key]-[size-key]-[position-key]-[color-key]-[length-key] {
192174
background-image: repeating-radial-gradient([shape-value] [size-value] at [position-value], [color-value-1], [color-value-2], [...] [length-value]);
193175
}
194176

195-
/* configurable with the "repeatingConicGradients" theme object */
177+
/* configurable with the "repeatingConicGradientStartingAngles", "repeatingConicGradientPositions", "repeatingConicGradientColors", and "repeatingConicGradientLengths" theme objects */
196178
/* note that the "default" [starting-angle-key] and [position-key] are omitted from the class */
197179
.bg-conic-[starting-angle-key]-[position-key]-[color-key]-[length-key] {
198180
background-image: repeating-conic-gradient(from [starting-angle-value] at [position-value], [color-value-1], [color-value-2], [...] [length-value]);

0 commit comments

Comments
 (0)