archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Support arbitrary color with opacity modifier (#4723)

Browse Source
This commit is contained in:
Adam Wathan 2021-09-26 11:45:13 -04:00 committed by GitHub
parent 635d0d882e
commit 6c0b8e8f0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/expandTailwindAtRules.js
View File

@ -13,7 +13,7 @@ const PATTERNS = [
/([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
/([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
/([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
/([^<>"'`\s]*\[[^"'`\s]+\])/.source, // `fill-[#bada55]`
/([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
/([^<>"'`\s]*[^"'`\s:])/.source, // `px-1.5`, `uppercase` but not `uppercase:`].join('|')
].join('|')
const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')

13
src/util/pluginUtils.js
View File

@ -207,16 +207,23 @@ export function asColor(modifier, lookup = {}, tailwindConfig = {}) {
let [color, alpha] = splitAlpha(modifier)
if (lookup[color] !== undefined) {
if (alpha !== undefined) {
let normalizedColor =
lookup[color] ?? (isArbitraryValue(color) ? color.slice(1, -1) : undefined)
if (normalizedColor === undefined) {
return undefined
}
if (isArbitraryValue(alpha)) {
return withAlphaValue(lookup[color], alpha.slice(1, -1))
return withAlphaValue(normalizedColor, alpha.slice(1, -1))
}
if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
return undefined
}
return withAlphaValue(lookup[color], tailwindConfig.theme.opacity[alpha])
return withAlphaValue(normalizedColor, tailwindConfig.theme.opacity[alpha])
}
return asValue(modifier, lookup, { validate: validateColor })

65
tests/color-opacity-modifiers.test.js
View File

@ -60,6 +60,71 @@ test('missing alpha generates nothing', async () => {
})
})
test('arbitrary color with opacity from scale', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: 'bg-[wheat]/50',
},
],
theme: {},
plugins: [],
}
let css = `@tailwind utilities`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.bg-\\[wheat\\]\\/50 {
background-color: rgb(245 222 179 / 0.5);
}
`)
})
})
test('arbitrary color with arbitrary opacity', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: 'bg-[#bada55]/[0.2]',
},
],
theme: {},
plugins: [],
}
let css = `@tailwind utilities`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.bg-\\[\\#bada55\\]\\/\\[0\\.2\\] {
background-color: rgb(186 218 85 / 0.2);
}
`)
})
})
test('undefined theme color with opacity from scale', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: 'bg-garbage/50',
},
],
theme: {},
plugins: [],
}
let css = `@tailwind utilities`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(``)
})
})
test('values not in the opacity config are ignored', async () => {
let config = {
content: [{ raw: html`<div class="bg-red-500/29"></div>` }],