mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
4919cbfbb8
* Replace `culori` with simple color parser * Use space-separated color syntax * Update default color values to use space-separated syntax * Update separator regex * Fix tests * add tests for the new `color` util Also slightly modified the `color` util itself to take `transparent` into account and also format every value as a string for consistency. Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
50 lines
2.6 KiB
JavaScript
50 lines
2.6 KiB
JavaScript
import { parseColor, formatColor } from '../src/util/color'
|
|
|
|
describe('parseColor', () => {
|
|
it.each`
|
|
color | output
|
|
${'black'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
|
|
${'#0088cc'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
|
|
${'#08c'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
|
|
${'#0088cc99'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
|
|
${'#08c9'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
|
|
${'rgb(0, 30, 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
|
|
${'rgba(0, 30, 60, 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
|
|
${'rgb(0 30 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
|
|
${'rgb(0 30 60 / 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
|
|
${'hsl(0, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
|
|
${'hsla(0, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
|
|
${'hsl(0 30% 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
|
|
${'hsl(0 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
|
|
${'transparent'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
|
|
`('should parse "$color" to the correct value', ({ color, output }) => {
|
|
expect(parseColor(color)).toEqual(output)
|
|
})
|
|
|
|
it.each`
|
|
color
|
|
${'var(--my-color)'}
|
|
${'currentColor'}
|
|
${'inherit'}
|
|
${'initial'}
|
|
${'revert'}
|
|
${'unset'}
|
|
`('should return `null` for unparseable color "$color"', ({ color }) => {
|
|
expect(parseColor(color)).toBe(null)
|
|
})
|
|
})
|
|
|
|
describe('formatColor', () => {
|
|
it.each`
|
|
color | output
|
|
${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }} | ${'rgb(0 0 0)'}
|
|
${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }} | ${'rgb(0 136 204)'}
|
|
${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }} | ${'rgb(0 136 204 / 0.6)'}
|
|
${{ mode: 'hsl', color: ['0', '0%', '0%'], alpha: undefined }} | ${'hsl(0 0% 0%)'}
|
|
${{ mode: 'hsl', color: ['0', '136%', '204%'], alpha: undefined }} | ${'hsl(0 136% 204%)'}
|
|
${{ mode: 'hsl', color: ['0', '136%', '204%'], alpha: '0.6' }} | ${'hsl(0 136% 204% / 0.6)'}
|
|
`('should format the color pieces into a proper "$output"', ({ color, output }) => {
|
|
expect(formatColor(color)).toEqual(output)
|
|
})
|
|
})
|