mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #1627 from tailwindcss/alpha-colors
Add opacity modifiers for color utilities
This commit is contained in:
Adam Wathan
GitHub
commit
857e2d376d
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
45
__tests__/flattenColorPalette.test.js
Normal file
45
__tests__/flattenColorPalette.test.js
Normal file
@ -0,0 +1,45 @@
|
||||
import flattenColorPalette from '../src/util/flattenColorPalette'
|
||||
|
||||
test('it flattens nested color objects', () => {
|
||||
expect(
|
||||
flattenColorPalette({
|
||||
purple: 'purple',
|
||||
white: {
|
||||
25: 'rgba(255,255,255,.25)',
|
||||
50: 'rgba(255,255,255,.5)',
|
||||
75: 'rgba(255,255,255,.75)',
|
||||
default: '#fff',
|
||||
},
|
||||
red: {
|
||||
1: 'rgb(33,0,0)',
|
||||
2: 'rgb(67,0,0)',
|
||||
3: 'rgb(100,0,0)',
|
||||
},
|
||||
green: {
|
||||
1: 'rgb(0,33,0)',
|
||||
2: 'rgb(0,67,0)',
|
||||
3: 'rgb(0,100,0)',
|
||||
},
|
||||
blue: {
|
||||
1: 'rgb(0,0,33)',
|
||||
2: 'rgb(0,0,67)',
|
||||
3: 'rgb(0,0,100)',
|
||||
},
|
||||
})
|
||||
).toEqual({
|
||||
purple: 'purple',
|
||||
'white-25': 'rgba(255,255,255,.25)',
|
||||
'white-50': 'rgba(255,255,255,.5)',
|
||||
'white-75': 'rgba(255,255,255,.75)',
|
||||
white: '#fff',
|
||||
'red-1': 'rgb(33,0,0)',
|
||||
'red-2': 'rgb(67,0,0)',
|
||||
'red-3': 'rgb(100,0,0)',
|
||||
'green-1': 'rgb(0,33,0)',
|
||||
'green-2': 'rgb(0,67,0)',
|
||||
'green-3': 'rgb(0,100,0)',
|
||||
'blue-1': 'rgb(0,0,33)',
|
||||
'blue-2': 'rgb(0,0,67)',
|
||||
'blue-3': 'rgb(0,0,100)',
|
||||
})
|
||||
})
|
||||
@ -1,83 +0,0 @@
|
||||
import _ from 'lodash'
|
||||
import escapeClassName from '../../src/util/escapeClassName'
|
||||
import plugin from '../../src/plugins/backgroundColor'
|
||||
|
||||
test('colors can be a nested object', () => {
|
||||
const addedUtilities = []
|
||||
|
||||
const config = {
|
||||
theme: {
|
||||
backgroundColor: {
|
||||
purple: 'purple',
|
||||
white: {
|
||||
25: 'rgba(255,255,255,.25)',
|
||||
50: 'rgba(255,255,255,.5)',
|
||||
75: 'rgba(255,255,255,.75)',
|
||||
default: '#fff',
|
||||
},
|
||||
red: {
|
||||
1: 'rgb(33,0,0)',
|
||||
2: 'rgb(67,0,0)',
|
||||
3: 'rgb(100,0,0)',
|
||||
},
|
||||
green: {
|
||||
1: 'rgb(0,33,0)',
|
||||
2: 'rgb(0,67,0)',
|
||||
3: 'rgb(0,100,0)',
|
||||
},
|
||||
blue: {
|
||||
1: 'rgb(0,0,33)',
|
||||
2: 'rgb(0,0,67)',
|
||||
3: 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
|
||||
const pluginApi = {
|
||||
config: getConfigValue,
|
||||
e: escapeClassName,
|
||||
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
|
||||
variants: (path, defaultValue) => {
|
||||
if (_.isArray(config.variants)) {
|
||||
return config.variants
|
||||
}
|
||||
|
||||
return getConfigValue(`variants.${path}`, defaultValue)
|
||||
},
|
||||
addUtilities(utilities, variants) {
|
||||
addedUtilities.push({
|
||||
utilities,
|
||||
variants,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
plugin()(pluginApi)
|
||||
|
||||
expect(addedUtilities).toEqual([
|
||||
{
|
||||
utilities: {
|
||||
'.bg-purple': { 'background-color': 'purple' },
|
||||
'.bg-white-25': { 'background-color': 'rgba(255,255,255,.25)' },
|
||||
'.bg-white-50': { 'background-color': 'rgba(255,255,255,.5)' },
|
||||
'.bg-white-75': { 'background-color': 'rgba(255,255,255,.75)' },
|
||||
'.bg-white': { 'background-color': '#fff' },
|
||||
'.bg-red-1': { 'background-color': 'rgb(33,0,0)' },
|
||||
'.bg-red-2': { 'background-color': 'rgb(67,0,0)' },
|
||||
'.bg-red-3': { 'background-color': 'rgb(100,0,0)' },
|
||||
'.bg-green-1': { 'background-color': 'rgb(0,33,0)' },
|
||||
'.bg-green-2': { 'background-color': 'rgb(0,67,0)' },
|
||||
'.bg-green-3': { 'background-color': 'rgb(0,100,0)' },
|
||||
'.bg-blue-1': { 'background-color': 'rgb(0,0,33)' },
|
||||
'.bg-blue-2': { 'background-color': 'rgb(0,0,67)' },
|
||||
'.bg-blue-3': { 'background-color': 'rgb(0,0,100)' },
|
||||
},
|
||||
variants: ['responsive'],
|
||||
},
|
||||
])
|
||||
})
|
||||
@ -1,83 +0,0 @@
|
||||
import _ from 'lodash'
|
||||
import escapeClassName from '../../src/util/escapeClassName'
|
||||
import plugin from '../../src/plugins/borderColor'
|
||||
|
||||
test('colors can be a nested object', () => {
|
||||
const addedUtilities = []
|
||||
|
||||
const config = {
|
||||
theme: {
|
||||
borderColor: {
|
||||
purple: 'purple',
|
||||
white: {
|
||||
25: 'rgba(255,255,255,.25)',
|
||||
50: 'rgba(255,255,255,.5)',
|
||||
75: 'rgba(255,255,255,.75)',
|
||||
default: '#fff',
|
||||
},
|
||||
red: {
|
||||
1: 'rgb(33,0,0)',
|
||||
2: 'rgb(67,0,0)',
|
||||
3: 'rgb(100,0,0)',
|
||||
},
|
||||
green: {
|
||||
1: 'rgb(0,33,0)',
|
||||
2: 'rgb(0,67,0)',
|
||||
3: 'rgb(0,100,0)',
|
||||
},
|
||||
blue: {
|
||||
1: 'rgb(0,0,33)',
|
||||
2: 'rgb(0,0,67)',
|
||||
3: 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
borderColor: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
|
||||
const pluginApi = {
|
||||
config: getConfigValue,
|
||||
e: escapeClassName,
|
||||
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
|
||||
variants: (path, defaultValue) => {
|
||||
if (_.isArray(config.variants)) {
|
||||
return config.variants
|
||||
}
|
||||
|
||||
return getConfigValue(`variants.${path}`, defaultValue)
|
||||
},
|
||||
addUtilities(utilities, variants) {
|
||||
addedUtilities.push({
|
||||
utilities,
|
||||
variants,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
plugin()(pluginApi)
|
||||
|
||||
expect(addedUtilities).toEqual([
|
||||
{
|
||||
utilities: {
|
||||
'.border-purple': { 'border-color': 'purple' },
|
||||
'.border-white-25': { 'border-color': 'rgba(255,255,255,.25)' },
|
||||
'.border-white-50': { 'border-color': 'rgba(255,255,255,.5)' },
|
||||
'.border-white-75': { 'border-color': 'rgba(255,255,255,.75)' },
|
||||
'.border-white': { 'border-color': '#fff' },
|
||||
'.border-red-1': { 'border-color': 'rgb(33,0,0)' },
|
||||
'.border-red-2': { 'border-color': 'rgb(67,0,0)' },
|
||||
'.border-red-3': { 'border-color': 'rgb(100,0,0)' },
|
||||
'.border-green-1': { 'border-color': 'rgb(0,33,0)' },
|
||||
'.border-green-2': { 'border-color': 'rgb(0,67,0)' },
|
||||
'.border-green-3': { 'border-color': 'rgb(0,100,0)' },
|
||||
'.border-blue-1': { 'border-color': 'rgb(0,0,33)' },
|
||||
'.border-blue-2': { 'border-color': 'rgb(0,0,67)' },
|
||||
'.border-blue-3': { 'border-color': 'rgb(0,0,100)' },
|
||||
},
|
||||
variants: ['responsive'],
|
||||
},
|
||||
])
|
||||
})
|
||||
@ -1,89 +0,0 @@
|
||||
import invokePlugin from '../util/invokePlugin'
|
||||
import plugin from '../../src/plugins/divideColor'
|
||||
|
||||
test('generating divide color utilities', () => {
|
||||
const config = {
|
||||
theme: {
|
||||
divideColor: {
|
||||
default: 'orange', // This should be ignored
|
||||
purple: 'purple',
|
||||
white: {
|
||||
25: 'rgba(255,255,255,.25)',
|
||||
50: 'rgba(255,255,255,.5)',
|
||||
75: 'rgba(255,255,255,.75)',
|
||||
default: '#fff',
|
||||
},
|
||||
red: {
|
||||
1: 'rgb(33,0,0)',
|
||||
2: 'rgb(67,0,0)',
|
||||
3: 'rgb(100,0,0)',
|
||||
},
|
||||
green: {
|
||||
1: 'rgb(0,33,0)',
|
||||
2: 'rgb(0,67,0)',
|
||||
3: 'rgb(0,100,0)',
|
||||
},
|
||||
blue: {
|
||||
1: 'rgb(0,0,33)',
|
||||
2: 'rgb(0,0,67)',
|
||||
3: 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
divideColor: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const { utilities } = invokePlugin(plugin(), config)
|
||||
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.divide-purple > :not(template) ~ :not(template)': {
|
||||
'border-color': 'purple',
|
||||
},
|
||||
'.divide-white-25 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgba(255,255,255,.25)',
|
||||
},
|
||||
'.divide-white-50 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgba(255,255,255,.5)',
|
||||
},
|
||||
'.divide-white-75 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgba(255,255,255,.75)',
|
||||
},
|
||||
'.divide-white > :not(template) ~ :not(template)': {
|
||||
'border-color': '#fff',
|
||||
},
|
||||
'.divide-red-1 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(33,0,0)',
|
||||
},
|
||||
'.divide-red-2 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(67,0,0)',
|
||||
},
|
||||
'.divide-red-3 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(100,0,0)',
|
||||
},
|
||||
'.divide-green-1 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,33,0)',
|
||||
},
|
||||
'.divide-green-2 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,67,0)',
|
||||
},
|
||||
'.divide-green-3 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,100,0)',
|
||||
},
|
||||
'.divide-blue-1 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,0,33)',
|
||||
},
|
||||
'.divide-blue-2 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,0,67)',
|
||||
},
|
||||
'.divide-blue-3 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
['responsive'],
|
||||
],
|
||||
])
|
||||
})
|
||||
@ -1,83 +0,0 @@
|
||||
import _ from 'lodash'
|
||||
import escapeClassName from '../../src/util/escapeClassName'
|
||||
import plugin from '../../src/plugins/fill'
|
||||
|
||||
test('colors can be a nested object', () => {
|
||||
const addedUtilities = []
|
||||
|
||||
const config = {
|
||||
theme: {
|
||||
fill: {
|
||||
purple: 'purple',
|
||||
white: {
|
||||
25: 'rgba(255,255,255,.25)',
|
||||
50: 'rgba(255,255,255,.5)',
|
||||
75: 'rgba(255,255,255,.75)',
|
||||
default: '#fff',
|
||||
},
|
||||
red: {
|
||||
1: 'rgb(33,0,0)',
|
||||
2: 'rgb(67,0,0)',
|
||||
3: 'rgb(100,0,0)',
|
||||
},
|
||||
green: {
|
||||
1: 'rgb(0,33,0)',
|
||||
2: 'rgb(0,67,0)',
|
||||
3: 'rgb(0,100,0)',
|
||||
},
|
||||
blue: {
|
||||
1: 'rgb(0,0,33)',
|
||||
2: 'rgb(0,0,67)',
|
||||
3: 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
fill: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
|
||||
const pluginApi = {
|
||||
config: getConfigValue,
|
||||
e: escapeClassName,
|
||||
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
|
||||
variants: (path, defaultValue) => {
|
||||
if (_.isArray(config.variants)) {
|
||||
return config.variants
|
||||
}
|
||||
|
||||
return getConfigValue(`variants.${path}`, defaultValue)
|
||||
},
|
||||
addUtilities(utilities, variants) {
|
||||
addedUtilities.push({
|
||||
utilities,
|
||||
variants,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
plugin()(pluginApi)
|
||||
|
||||
expect(addedUtilities).toEqual([
|
||||
{
|
||||
utilities: {
|
||||
'.fill-purple': { fill: 'purple' },
|
||||
'.fill-white-25': { fill: 'rgba(255,255,255,.25)' },
|
||||
'.fill-white-50': { fill: 'rgba(255,255,255,.5)' },
|
||||
'.fill-white-75': { fill: 'rgba(255,255,255,.75)' },
|
||||
'.fill-white': { fill: '#fff' },
|
||||
'.fill-red-1': { fill: 'rgb(33,0,0)' },
|
||||
'.fill-red-2': { fill: 'rgb(67,0,0)' },
|
||||
'.fill-red-3': { fill: 'rgb(100,0,0)' },
|
||||
'.fill-green-1': { fill: 'rgb(0,33,0)' },
|
||||
'.fill-green-2': { fill: 'rgb(0,67,0)' },
|
||||
'.fill-green-3': { fill: 'rgb(0,100,0)' },
|
||||
'.fill-blue-1': { fill: 'rgb(0,0,33)' },
|
||||
'.fill-blue-2': { fill: 'rgb(0,0,67)' },
|
||||
'.fill-blue-3': { fill: 'rgb(0,0,100)' },
|
||||
},
|
||||
variants: ['responsive'],
|
||||
},
|
||||
])
|
||||
})
|
||||
@ -1,83 +0,0 @@
|
||||
import _ from 'lodash'
|
||||
import escapeClassName from '../../src/util/escapeClassName'
|
||||
import plugin from '../../src/plugins/stroke'
|
||||
|
||||
test('colors can be a nested object', () => {
|
||||
const addedUtilities = []
|
||||
|
||||
const config = {
|
||||
theme: {
|
||||
stroke: {
|
||||
purple: 'purple',
|
||||
white: {
|
||||
25: 'rgba(255,255,255,.25)',
|
||||
50: 'rgba(255,255,255,.5)',
|
||||
75: 'rgba(255,255,255,.75)',
|
||||
default: '#fff',
|
||||
},
|
||||
red: {
|
||||
1: 'rgb(33,0,0)',
|
||||
2: 'rgb(67,0,0)',
|
||||
3: 'rgb(100,0,0)',
|
||||
},
|
||||
green: {
|
||||
1: 'rgb(0,33,0)',
|
||||
2: 'rgb(0,67,0)',
|
||||
3: 'rgb(0,100,0)',
|
||||
},
|
||||
blue: {
|
||||
1: 'rgb(0,0,33)',
|
||||
2: 'rgb(0,0,67)',
|
||||
3: 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
stroke: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
|
||||
const pluginApi = {
|
||||
config: getConfigValue,
|
||||
e: escapeClassName,
|
||||
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
|
||||
variants: (path, defaultValue) => {
|
||||
if (_.isArray(config.variants)) {
|
||||
return config.variants
|
||||
}
|
||||
|
||||
return getConfigValue(`variants.${path}`, defaultValue)
|
||||
},
|
||||
addUtilities(utilities, variants) {
|
||||
addedUtilities.push({
|
||||
utilities,
|
||||
variants,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
plugin()(pluginApi)
|
||||
|
||||
expect(addedUtilities).toEqual([
|
||||
{
|
||||
utilities: {
|
||||
'.stroke-purple': { stroke: 'purple' },
|
||||
'.stroke-white-25': { stroke: 'rgba(255,255,255,.25)' },
|
||||
'.stroke-white-50': { stroke: 'rgba(255,255,255,.5)' },
|
||||
'.stroke-white-75': { stroke: 'rgba(255,255,255,.75)' },
|
||||
'.stroke-white': { stroke: '#fff' },
|
||||
'.stroke-red-1': { stroke: 'rgb(33,0,0)' },
|
||||
'.stroke-red-2': { stroke: 'rgb(67,0,0)' },
|
||||
'.stroke-red-3': { stroke: 'rgb(100,0,0)' },
|
||||
'.stroke-green-1': { stroke: 'rgb(0,33,0)' },
|
||||
'.stroke-green-2': { stroke: 'rgb(0,67,0)' },
|
||||
'.stroke-green-3': { stroke: 'rgb(0,100,0)' },
|
||||
'.stroke-blue-1': { stroke: 'rgb(0,0,33)' },
|
||||
'.stroke-blue-2': { stroke: 'rgb(0,0,67)' },
|
||||
'.stroke-blue-3': { stroke: 'rgb(0,0,100)' },
|
||||
},
|
||||
variants: ['responsive'],
|
||||
},
|
||||
])
|
||||
})
|
||||
@ -1,83 +0,0 @@
|
||||
import _ from 'lodash'
|
||||
import escapeClassName from '../../src/util/escapeClassName'
|
||||
import plugin from '../../src/plugins/textColor'
|
||||
|
||||
test('colors can be a nested object', () => {
|
||||
const addedUtilities = []
|
||||
|
||||
const config = {
|
||||
theme: {
|
||||
textColor: {
|
||||
purple: 'purple',
|
||||
white: {
|
||||
25: 'rgba(255,255,255,.25)',
|
||||
50: 'rgba(255,255,255,.5)',
|
||||
75: 'rgba(255,255,255,.75)',
|
||||
default: '#fff',
|
||||
},
|
||||
red: {
|
||||
1: 'rgb(33,0,0)',
|
||||
2: 'rgb(67,0,0)',
|
||||
3: 'rgb(100,0,0)',
|
||||
},
|
||||
green: {
|
||||
1: 'rgb(0,33,0)',
|
||||
2: 'rgb(0,67,0)',
|
||||
3: 'rgb(0,100,0)',
|
||||
},
|
||||
blue: {
|
||||
1: 'rgb(0,0,33)',
|
||||
2: 'rgb(0,0,67)',
|
||||
3: 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
textColor: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
|
||||
const pluginApi = {
|
||||
config: getConfigValue,
|
||||
e: escapeClassName,
|
||||
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
|
||||
variants: (path, defaultValue) => {
|
||||
if (_.isArray(config.variants)) {
|
||||
return config.variants
|
||||
}
|
||||
|
||||
return getConfigValue(`variants.${path}`, defaultValue)
|
||||
},
|
||||
addUtilities(utilities, variants) {
|
||||
addedUtilities.push({
|
||||
utilities,
|
||||
variants,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
plugin()(pluginApi)
|
||||
|
||||
expect(addedUtilities).toEqual([
|
||||
{
|
||||
utilities: {
|
||||
'.text-purple': { color: 'purple' },
|
||||
'.text-white-25': { color: 'rgba(255,255,255,.25)' },
|
||||
'.text-white-50': { color: 'rgba(255,255,255,.5)' },
|
||||
'.text-white-75': { color: 'rgba(255,255,255,.75)' },
|
||||
'.text-white': { color: '#fff' },
|
||||
'.text-red-1': { color: 'rgb(33,0,0)' },
|
||||
'.text-red-2': { color: 'rgb(67,0,0)' },
|
||||
'.text-red-3': { color: 'rgb(100,0,0)' },
|
||||
'.text-green-1': { color: 'rgb(0,33,0)' },
|
||||
'.text-green-2': { color: 'rgb(0,67,0)' },
|
||||
'.text-green-3': { color: 'rgb(0,100,0)' },
|
||||
'.text-blue-1': { color: 'rgb(0,0,33)' },
|
||||
'.text-blue-2': { color: 'rgb(0,0,67)' },
|
||||
'.text-blue-3': { color: 'rgb(0,0,100)' },
|
||||
},
|
||||
variants: ['responsive'],
|
||||
},
|
||||
])
|
||||
})
|
||||
97
__tests__/withAlphaVariable.test.js
Normal file
97
__tests__/withAlphaVariable.test.js
Normal file
@ -0,0 +1,97 @@
|
||||
import withAlphaVariable from '../src/util/withAlphaVariable'
|
||||
|
||||
test('it adds the right custom property', () => {
|
||||
expect(
|
||||
withAlphaVariable({ color: '#ff0000', property: 'color', variable: '--text-opacity' })
|
||||
).toEqual({
|
||||
'--text-opacity': '1',
|
||||
color: ['#ff0000', 'rgba(255, 0, 0, var(--text-opacity))'],
|
||||
})
|
||||
})
|
||||
|
||||
test('it ignores colors that cannot be parsed', () => {
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: 'currentColor',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': 'currentColor',
|
||||
})
|
||||
})
|
||||
|
||||
test('it ignores colors that already have an alpha channel', () => {
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: '#ff0000ff',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': '#ff0000ff',
|
||||
})
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: '#ff000080',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': '#ff000080',
|
||||
})
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: '#f00a',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': '#f00a',
|
||||
})
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: '#f00f',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': '#f00f',
|
||||
})
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': 'rgba(255, 255, 255, 1)',
|
||||
})
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: 'rgba(255, 255, 255, 0.5)',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': 'rgba(255, 255, 255, 0.5)',
|
||||
})
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: 'hsla(240, 100%, 50%, 1)',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': 'hsla(240, 100%, 50%, 1)',
|
||||
})
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: 'hsla(240, 100%, 50%, 0.5)',
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': 'hsla(240, 100%, 50%, 0.5)',
|
||||
})
|
||||
})
|
||||
@ -44,6 +44,7 @@
|
||||
"autoprefixer": "^9.4.5",
|
||||
"bytes": "^3.0.0",
|
||||
"chalk": "^4.0.0",
|
||||
"color": "^3.1.2",
|
||||
"detective": "^5.2.0",
|
||||
"fs-extra": "^8.0.0",
|
||||
"lodash": "^4.17.15",
|
||||
|
||||
@ -92,6 +92,11 @@ import transitionProperty from './plugins/transitionProperty'
|
||||
import transitionTimingFunction from './plugins/transitionTimingFunction'
|
||||
import transitionDuration from './plugins/transitionDuration'
|
||||
import transitionDelay from './plugins/transitionDelay'
|
||||
import divideOpacity from './plugins/divideOpacity'
|
||||
import backgroundOpacity from './plugins/backgroundOpacity'
|
||||
import borderOpacity from './plugins/borderOpacity'
|
||||
import textOpacity from './plugins/textOpacity'
|
||||
import placeholderOpacity from './plugins/placeholderOpacity'
|
||||
|
||||
import configurePlugins from './util/configurePlugins'
|
||||
|
||||
@ -102,15 +107,18 @@ export default function({ corePlugins: corePluginConfig }) {
|
||||
space,
|
||||
divideWidth,
|
||||
divideColor,
|
||||
divideOpacity,
|
||||
accessibility,
|
||||
appearance,
|
||||
backgroundAttachment,
|
||||
backgroundColor,
|
||||
backgroundOpacity,
|
||||
backgroundPosition,
|
||||
backgroundRepeat,
|
||||
backgroundSize,
|
||||
borderCollapse,
|
||||
borderColor,
|
||||
borderOpacity,
|
||||
borderRadius,
|
||||
borderStyle,
|
||||
borderWidth,
|
||||
@ -148,6 +156,7 @@ export default function({ corePlugins: corePluginConfig }) {
|
||||
overflow,
|
||||
padding,
|
||||
placeholderColor,
|
||||
placeholderOpacity,
|
||||
pointerEvents,
|
||||
position,
|
||||
inset,
|
||||
@ -159,6 +168,7 @@ export default function({ corePlugins: corePluginConfig }) {
|
||||
tableLayout,
|
||||
textAlign,
|
||||
textColor,
|
||||
textOpacity,
|
||||
fontStyle,
|
||||
textTransform,
|
||||
textDecoration,
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import _ from 'lodash'
|
||||
import flattenColorPalette from '../util/flattenColorPalette'
|
||||
import withAlphaVariable from '../util/withAlphaVariable'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
@ -7,9 +8,11 @@ export default function() {
|
||||
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
|
||||
return [
|
||||
`.${e(`bg-${modifier}`)}`,
|
||||
{
|
||||
'background-color': value,
|
||||
},
|
||||
withAlphaVariable({
|
||||
color: value,
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
}),
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
5
src/plugins/backgroundOpacity.js
Normal file
5
src/plugins/backgroundOpacity.js
Normal file
@ -0,0 +1,5 @@
|
||||
import createUtilityPlugin from '../util/createUtilityPlugin'
|
||||
|
||||
export default function() {
|
||||
return createUtilityPlugin('backgroundOpacity', [['bg-opacity', ['--bg-opacity']]])
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import _ from 'lodash'
|
||||
import flattenColorPalette from '../util/flattenColorPalette'
|
||||
import withAlphaVariable from '../util/withAlphaVariable'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
@ -9,9 +10,11 @@ export default function() {
|
||||
_.map(_.omit(colors, 'default'), (value, modifier) => {
|
||||
return [
|
||||
`.${e(`border-${modifier}`)}`,
|
||||
{
|
||||
'border-color': value,
|
||||
},
|
||||
withAlphaVariable({
|
||||
color: value,
|
||||
property: 'border-color',
|
||||
variable: '--border-opacity',
|
||||
}),
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
5
src/plugins/borderOpacity.js
Normal file
5
src/plugins/borderOpacity.js
Normal file
@ -0,0 +1,5 @@
|
||||
import createUtilityPlugin from '../util/createUtilityPlugin'
|
||||
|
||||
export default function() {
|
||||
return createUtilityPlugin('borderOpacity', [['border-opacity', ['--border-opacity']]])
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import _ from 'lodash'
|
||||
import flattenColorPalette from '../util/flattenColorPalette'
|
||||
import withAlphaVariable from '../util/withAlphaVariable'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
@ -9,9 +10,11 @@ export default function() {
|
||||
_.map(_.omit(colors, 'default'), (value, modifier) => {
|
||||
return [
|
||||
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
|
||||
{
|
||||
'border-color': value,
|
||||
},
|
||||
withAlphaVariable({
|
||||
color: value,
|
||||
property: 'border-color',
|
||||
variable: '--divide-opacity',
|
||||
}),
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
5
src/plugins/divideOpacity.js
Normal file
5
src/plugins/divideOpacity.js
Normal file
@ -0,0 +1,5 @@
|
||||
import createUtilityPlugin from '../util/createUtilityPlugin'
|
||||
|
||||
export default function() {
|
||||
return createUtilityPlugin('divideOpacity', [['divide-opacity', ['--divide-opacity']]])
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import _ from 'lodash'
|
||||
import flattenColorPalette from '../util/flattenColorPalette'
|
||||
import withAlphaVariable from '../util/withAlphaVariable'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
@ -7,9 +8,7 @@ export default function() {
|
||||
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
|
||||
return [
|
||||
`.${e(`placeholder-${modifier}`)}::placeholder`,
|
||||
{
|
||||
color: value,
|
||||
},
|
||||
withAlphaVariable({ color: value, property: 'color', variable: '--placeholder-opacity' }),
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
7
src/plugins/placeholderOpacity.js
Normal file
7
src/plugins/placeholderOpacity.js
Normal file
@ -0,0 +1,7 @@
|
||||
import createUtilityPlugin from '../util/createUtilityPlugin'
|
||||
|
||||
export default function() {
|
||||
return createUtilityPlugin('placeholderOpacity', [
|
||||
['placeholder-opacity', ['--placeholder-opacity']],
|
||||
])
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import _ from 'lodash'
|
||||
import flattenColorPalette from '../util/flattenColorPalette'
|
||||
import withAlphaVariable from '../util/withAlphaVariable'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
@ -7,9 +8,7 @@ export default function() {
|
||||
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
|
||||
return [
|
||||
`.${e(`text-${modifier}`)}`,
|
||||
{
|
||||
color: value,
|
||||
},
|
||||
withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' }),
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
5
src/plugins/textOpacity.js
Normal file
5
src/plugins/textOpacity.js
Normal file
@ -0,0 +1,5 @@
|
||||
import createUtilityPlugin from '../util/createUtilityPlugin'
|
||||
|
||||
export default function() {
|
||||
return createUtilityPlugin('textOpacity', [['text-opacity', ['--text-opacity']]])
|
||||
}
|
||||
39
src/util/withAlphaVariable.js
Normal file
39
src/util/withAlphaVariable.js
Normal file
@ -0,0 +1,39 @@
|
||||
import createColor from 'color'
|
||||
|
||||
function hasAlpha(color) {
|
||||
return (
|
||||
color.startsWith('rgba(') ||
|
||||
color.startsWith('hsla(') ||
|
||||
(color.startsWith('#') && color.length === 9) ||
|
||||
(color.startsWith('#') && color.length === 5)
|
||||
)
|
||||
}
|
||||
|
||||
function toRgba(color) {
|
||||
const [r, g, b, a] = createColor(color)
|
||||
.rgb()
|
||||
.array()
|
||||
|
||||
return [r, g, b, a === undefined && hasAlpha(color) ? 1 : a]
|
||||
}
|
||||
|
||||
export default function withAlphaVariable({ color, property, variable }) {
|
||||
try {
|
||||
const [r, g, b, a] = toRgba(color)
|
||||
|
||||
if (a !== undefined) {
|
||||
return {
|
||||
[property]: color,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
[variable]: '1',
|
||||
[property]: [color, `rgba(${r}, ${g}, ${b}, var(${variable}))`],
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
[property]: color,
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -149,6 +149,7 @@ module.exports = {
|
||||
'64': '16rem',
|
||||
},
|
||||
backgroundColor: theme => theme('colors'),
|
||||
backgroundOpacity: theme => theme('opacity'),
|
||||
backgroundPosition: {
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
@ -169,6 +170,7 @@ module.exports = {
|
||||
...theme('colors'),
|
||||
default: theme('colors.gray.300', 'currentColor'),
|
||||
}),
|
||||
borderOpacity: theme => theme('opacity'),
|
||||
borderRadius: {
|
||||
none: '0',
|
||||
sm: '0.125rem',
|
||||
@ -207,6 +209,7 @@ module.exports = {
|
||||
'not-allowed': 'not-allowed',
|
||||
},
|
||||
divideColor: theme => theme('borderColor'),
|
||||
divideOpacity: theme => theme('borderOpacity'),
|
||||
divideWidth: theme => theme('borderWidth'),
|
||||
fill: {
|
||||
current: 'currentColor',
|
||||
@ -376,6 +379,7 @@ module.exports = {
|
||||
},
|
||||
padding: theme => theme('spacing'),
|
||||
placeholderColor: theme => theme('colors'),
|
||||
placeholderOpacity: theme => theme('opacity'),
|
||||
space: (theme, { negative }) => ({
|
||||
...theme('spacing'),
|
||||
...negative(theme('spacing')),
|
||||
@ -389,6 +393,7 @@ module.exports = {
|
||||
'2': '2',
|
||||
},
|
||||
textColor: theme => theme('colors'),
|
||||
textOpacity: theme => theme('opacity'),
|
||||
width: theme => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
@ -624,11 +629,13 @@ module.exports = {
|
||||
appearance: ['responsive'],
|
||||
backgroundAttachment: ['responsive'],
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
backgroundOpacity: ['responsive', 'hover', 'focus'],
|
||||
backgroundPosition: ['responsive'],
|
||||
backgroundRepeat: ['responsive'],
|
||||
backgroundSize: ['responsive'],
|
||||
borderCollapse: ['responsive'],
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
borderOpacity: ['responsive', 'hover', 'focus'],
|
||||
borderRadius: ['responsive'],
|
||||
borderStyle: ['responsive'],
|
||||
borderWidth: ['responsive'],
|
||||
@ -637,6 +644,7 @@ module.exports = {
|
||||
cursor: ['responsive'],
|
||||
display: ['responsive'],
|
||||
divideColor: ['responsive'],
|
||||
divideOpacity: ['responsive'],
|
||||
divideWidth: ['responsive'],
|
||||
fill: ['responsive'],
|
||||
flex: ['responsive'],
|
||||
@ -671,6 +679,7 @@ module.exports = {
|
||||
overflow: ['responsive'],
|
||||
padding: ['responsive'],
|
||||
placeholderColor: ['responsive', 'focus'],
|
||||
placeholderOpacity: ['responsive', 'focus'],
|
||||
pointerEvents: ['responsive'],
|
||||
position: ['responsive'],
|
||||
resize: ['responsive'],
|
||||
@ -680,6 +689,7 @@ module.exports = {
|
||||
tableLayout: ['responsive'],
|
||||
textAlign: ['responsive'],
|
||||
textColor: ['responsive', 'hover', 'focus'],
|
||||
textOpacity: ['responsive', 'hover', 'focus'],
|
||||
textDecoration: ['responsive', 'hover', 'focus'],
|
||||
textTransform: ['responsive'],
|
||||
userSelect: ['responsive'],
|
||||
|
||||
32
yarn.lock
32
yarn.lock
@ -1663,7 +1663,7 @@ collection-visit@^1.0.0:
|
||||
map-visit "^1.0.0"
|
||||
object-visit "^1.0.0"
|
||||
|
||||
color-convert@^1.9.0:
|
||||
color-convert@^1.9.0, color-convert@^1.9.1:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
|
||||
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
|
||||
@ -1682,11 +1682,27 @@ color-name@1.1.3:
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
|
||||
|
||||
color-name@~1.1.4:
|
||||
color-name@^1.0.0, color-name@~1.1.4:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
color-string@^1.5.2:
|
||||
version "1.5.3"
|
||||
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
|
||||
integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
simple-swizzle "^0.2.2"
|
||||
|
||||
color@^3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
|
||||
integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
|
||||
dependencies:
|
||||
color-convert "^1.9.1"
|
||||
color-string "^1.5.2"
|
||||
|
||||
combined-stream@^1.0.6, combined-stream@~1.0.6:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
|
||||
@ -2756,6 +2772,11 @@ is-arrayish@^0.2.1:
|
||||
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
|
||||
integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
|
||||
|
||||
is-arrayish@^0.3.1:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
|
||||
integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
|
||||
|
||||
is-binary-path@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
|
||||
@ -4773,6 +4794,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
|
||||
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
|
||||
integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
|
||||
|
||||
simple-swizzle@^0.2.2:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
|
||||
integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
|
||||
dependencies:
|
||||
is-arrayish "^0.3.1"
|
||||
|
||||
sisteransi@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.2.tgz#ec57d64b6f25c4f26c0e2c7dd23f2d7f12f7e418"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user