Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2176 from tailwindlabs/gradients
Add background gradient support
- Loading branch information
Showing
11 changed files
with
230,957 additions
and
149,148 deletions.
There are no files selected for viewing
137,956 changes: 79,978 additions & 57,978 deletions
137,956
__tests__/fixtures/tailwind-output-flagged.css
Large diffs are not rendered by default.
Oops, something went wrong.
86,918 changes: 53,409 additions & 33,509 deletions
86,918
__tests__/fixtures/tailwind-output-important.css
Large diffs are not rendered by default.
Oops, something went wrong.
68,202 changes: 44,051 additions & 24,151 deletions
68,202
__tests__/fixtures/tailwind-output-no-color-opacity.css
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import _ from 'lodash' | ||
import usesCustomProperties from '../util/usesCustomProperties' | ||
|
||
export default function() { | ||
return function({ addUtilities, e, theme, variants, target }) { | ||
const utilities = _.fromPairs( | ||
_.map(theme('backgroundImage'), (value, modifier) => { | ||
if (target('backgroundImage') === 'ie11' && usesCustomProperties(value)) { | ||
return [] | ||
} | ||
|
||
return [ | ||
`.${e(`bg-${modifier}`)}`, | ||
{ | ||
'background-image': value, | ||
}, | ||
] | ||
}) | ||
) | ||
|
||
addUtilities(utilities, variants('backgroundImage')) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import _ from 'lodash' | ||
import flattenColorPalette from '../util/flattenColorPalette' | ||
import { toRgba } from '../util/withAlphaVariable' | ||
|
||
export default function() { | ||
return function({ addUtilities, e, theme, variants, target }) { | ||
if (target('gradientColorStops') === 'ie11') { | ||
return | ||
} | ||
|
||
const colors = flattenColorPalette(theme('gradientColorStops')) | ||
|
||
const utilities = _(colors) | ||
.map((value, modifier) => { | ||
const transparentTo = (() => { | ||
try { | ||
const [r, g, b] = toRgba(value) | ||
return `rgba(${r}, ${g}, ${b}, 0)` | ||
} catch (_error) { | ||
return `rgba(255, 255, 255, 0)` | ||
} | ||
})() | ||
|
||
return [ | ||
[ | ||
`.${e(`from-${modifier}`)}`, | ||
{ | ||
'--gradient-from-color': value, | ||
'--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`, | ||
}, | ||
], | ||
[ | ||
`.${e(`via-${modifier}`)}`, | ||
{ | ||
'--gradient-via-color': value, | ||
'--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`, | ||
}, | ||
], | ||
[ | ||
`.${e(`to-${modifier}`)}`, | ||
{ | ||
'--gradient-to-color': value, | ||
}, | ||
], | ||
] | ||
}) | ||
.unzip() | ||
.flatten() | ||
.fromPairs() | ||
.value() | ||
|
||
addUtilities(utilities, variants('gradientColorStops')) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import valueParser from 'postcss-value-parser' | ||
|
||
export default function usesCustomProperties(value) { | ||
let foundCustomProperty = false | ||
|
||
valueParser(value).walk(node => { | ||
if (node.type === 'function' && node.value === 'var') { | ||
foundCustomProperty = true | ||
} | ||
return !foundCustomProperty | ||
}) | ||
|
||
return foundCustomProperty | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters