mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Support reverse order for space and divide utilities
This commit is contained in:
Adam Wathan
parent
0f54a60d05
commit
a75b6901aa
@ -8,7 +8,6 @@ test('generating divide width utilities', () => {
|
||||
default: '1px',
|
||||
'2': '2px',
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
@ -21,14 +20,42 @@ test('generating divide width utilities', () => {
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.divide-y-2 > :not(template) ~ :not(template)': { 'border-top-width': '2px' },
|
||||
'.divide-x-2 > :not(template) ~ :not(template)': { 'border-left-width': '2px' },
|
||||
'.divide-y-4 > :not(template) ~ :not(template)': { 'border-top-width': '4px' },
|
||||
'.divide-x-4 > :not(template) ~ :not(template)': { 'border-left-width': '4px' },
|
||||
'.divide-y-8 > :not(template) ~ :not(template)': { 'border-top-width': '8px' },
|
||||
'.divide-x-8 > :not(template) ~ :not(template)': { 'border-left-width': '8px' },
|
||||
'.divide-y > :not(template) ~ :not(template)': { 'border-top-width': '1px' },
|
||||
'.divide-x > :not(template) ~ :not(template)': { 'border-left-width': '1px' },
|
||||
'.divide-y > :not(template) ~ :not(template)': {
|
||||
'--divide-y-reverse': '0',
|
||||
'border-top': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
|
||||
'border-bottom': 'calc(1px * var(--divide-y-reverse))',
|
||||
},
|
||||
'.divide-x > :not(template) ~ :not(template)': {
|
||||
'--divide-x-reverse': '0',
|
||||
'border-right': 'calc(1px * var(--divide-y-reverse))',
|
||||
'border-left': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
|
||||
},
|
||||
'.divide-y-2 > :not(template) ~ :not(template)': {
|
||||
'--divide-y-reverse': '0',
|
||||
'border-top': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
|
||||
'border-bottom': 'calc(2px * var(--divide-y-reverse))',
|
||||
},
|
||||
'.divide-x-2 > :not(template) ~ :not(template)': {
|
||||
'--divide-x-reverse': '0',
|
||||
'border-right': 'calc(2px * var(--divide-y-reverse))',
|
||||
'border-left': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
|
||||
},
|
||||
'.divide-y-4 > :not(template) ~ :not(template)': {
|
||||
'--divide-y-reverse': '0',
|
||||
'border-top': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
|
||||
'border-bottom': 'calc(4px * var(--divide-y-reverse))',
|
||||
},
|
||||
'.divide-x-4 > :not(template) ~ :not(template)': {
|
||||
'--divide-x-reverse': '0',
|
||||
'border-right': 'calc(4px * var(--divide-y-reverse))',
|
||||
'border-left': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
|
||||
},
|
||||
'.divide-y-reverse > :not(template) ~ :not(template)': {
|
||||
'--divide-y-reverse': '1',
|
||||
},
|
||||
'.divide-x-reverse > :not(template) ~ :not(template)': {
|
||||
'--divide-x-reverse': '1',
|
||||
},
|
||||
},
|
||||
['responsive'],
|
||||
],
|
||||
|
||||
@ -8,7 +8,6 @@ test('generating space utilities', () => {
|
||||
'1': '1px',
|
||||
'2': '2px',
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
@ -21,14 +20,42 @@ test('generating space utilities', () => {
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.space-y-1 > :not(template) ~ :not(template)': { 'margin-top': '1px' },
|
||||
'.space-x-1 > :not(template) ~ :not(template)': { 'margin-left': '1px' },
|
||||
'.space-y-2 > :not(template) ~ :not(template)': { 'margin-top': '2px' },
|
||||
'.space-x-2 > :not(template) ~ :not(template)': { 'margin-left': '2px' },
|
||||
'.space-y-4 > :not(template) ~ :not(template)': { 'margin-top': '4px' },
|
||||
'.space-x-4 > :not(template) ~ :not(template)': { 'margin-left': '4px' },
|
||||
'.space-y-8 > :not(template) ~ :not(template)': { 'margin-top': '8px' },
|
||||
'.space-x-8 > :not(template) ~ :not(template)': { 'margin-left': '8px' },
|
||||
'.space-y-1 > :not(template) ~ :not(template)': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(1px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(1px * var(--space-y-reverse))',
|
||||
},
|
||||
'.space-x-1 > :not(template) ~ :not(template)': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-right': 'calc(1px * var(--space-y-reverse))',
|
||||
'margin-left': 'calc(1px * calc(1 - var(--space-y-reverse)))',
|
||||
},
|
||||
'.space-y-2 > :not(template) ~ :not(template)': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(2px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(2px * var(--space-y-reverse))',
|
||||
},
|
||||
'.space-x-2 > :not(template) ~ :not(template)': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-right': 'calc(2px * var(--space-y-reverse))',
|
||||
'margin-left': 'calc(2px * calc(1 - var(--space-y-reverse)))',
|
||||
},
|
||||
'.space-y-4 > :not(template) ~ :not(template)': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(4px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(4px * var(--space-y-reverse))',
|
||||
},
|
||||
'.space-x-4 > :not(template) ~ :not(template)': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-right': 'calc(4px * var(--space-y-reverse))',
|
||||
'margin-left': 'calc(4px * calc(1 - var(--space-y-reverse)))',
|
||||
},
|
||||
'.space-y-reverse > :not(template) ~ :not(template)': {
|
||||
'--space-y-reverse': '1',
|
||||
},
|
||||
'.space-x-reverse > :not(template) ~ :not(template)': {
|
||||
'--space-x-reverse': '1',
|
||||
},
|
||||
},
|
||||
['responsive'],
|
||||
],
|
||||
|
||||
@ -3,20 +3,34 @@ import _ from 'lodash'
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
const generators = [
|
||||
(value, modifier) => ({
|
||||
(size, modifier) => ({
|
||||
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
'border-top-width': `${value}`,
|
||||
'--divide-y-reverse': '0',
|
||||
'border-top': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
|
||||
'border-bottom': `calc(${size} * var(--divide-y-reverse))`,
|
||||
},
|
||||
[`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
'border-left-width': `${value}`,
|
||||
'--divide-x-reverse': '0',
|
||||
'border-right': `calc(${size} * var(--divide-y-reverse))`,
|
||||
'border-left': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
|
||||
},
|
||||
}),
|
||||
]
|
||||
|
||||
const utilities = _.flatMap(generators, generator => {
|
||||
return _.flatMap(theme('divideWidth'), (value, modifier) => {
|
||||
return generator(value, modifier === 'default' ? '' : `-${modifier}`)
|
||||
})
|
||||
return [
|
||||
..._.flatMap(theme('divideWidth'), (value, modifier) => {
|
||||
return generator(value, modifier === 'default' ? '' : `-${modifier}`)
|
||||
}),
|
||||
{
|
||||
'.divide-y-reverse > :not(template) ~ :not(template)': {
|
||||
'--divide-y-reverse': '1',
|
||||
},
|
||||
'.divide-x-reverse > :not(template) ~ :not(template)': {
|
||||
'--divide-x-reverse': '1',
|
||||
},
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
addUtilities(utilities, variants('divideWidth'))
|
||||
|
||||
@ -5,16 +5,30 @@ export default function() {
|
||||
const generators = [
|
||||
(size, modifier) => ({
|
||||
[`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
'margin-top': `${size}`,
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
|
||||
'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
|
||||
},
|
||||
[`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
'margin-left': `${size}`,
|
||||
'--space-x-reverse': '0',
|
||||
'margin-right': `calc(${size} * var(--space-y-reverse))`,
|
||||
'margin-left': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
|
||||
},
|
||||
}),
|
||||
]
|
||||
|
||||
const utilities = _.flatMap(generators, generator => {
|
||||
return _.flatMap(theme('space'), generator)
|
||||
return [
|
||||
..._.flatMap(theme('space'), generator),
|
||||
{
|
||||
'.space-y-reverse > :not(template) ~ :not(template)': {
|
||||
'--space-y-reverse': '1',
|
||||
},
|
||||
'.space-x-reverse > :not(template) ~ :not(template)': {
|
||||
'--space-x-reverse': '1',
|
||||
},
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
addUtilities(utilities, variants('space'))
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user