wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

WIP

Browse source
This commit is contained in:
Adam Wathan 2024-09-11 16:04:42 -04:00
parent 7244f276c8
commit 5ed5f19a95
2 changed files with 35 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/tailwindcss/src/utilities.ts
View file

@ -603,6 +603,9 @@ export function createUtilities(theme: Theme) {
/**
* @css `grid-column`
*/
let gridColumnProperties = () => atRoot([property('--tw-col-start'), property('--tw-col-end')])
staticUtility('col-auto', [['grid-column', 'auto']])
functionalUtility('col', {
themeKeys: ['--grid-column'],
@ -614,13 +617,19 @@ export function createUtilities(theme: Theme) {
if (!Number.isInteger(Number(value))) return null
return value
},
handle: (value) => [decl('grid-column', `span ${value} / span ${value}`)],
handle: (value) => [
gridColumnProperties(),
decl('grid-column', `var(--tw-col-start, span ${value}) / var(--tw-col-end, span ${value})`),
],
})
/**
* @css `grid-column-start`
*/
staticUtility('col-start-auto', [['grid-column-start', 'auto']])
staticUtility('col-start-auto', [
['--tw-col-start', 'auto'],
['grid-column-start', 'auto'],
])
functionalUtility('col-start', {
supportsNegative: true,
handleBareValue: ({ value }) => {
@ -628,13 +637,16 @@ export function createUtilities(theme: Theme) {
return value
},
themeKeys: ['--grid-column-start'],
handle: (value) => [decl('grid-column-start', value)],
handle: (value) => [decl('--tw-col-start', value), decl('grid-column-start', value)],
})
/**
* @css `grid-column-end`
*/
staticUtility('col-end-auto', [['grid-column-end', 'auto']])
staticUtility('col-end-auto', [
// ['--tw-col-end', 'auto'],
['grid-column-end', 'auto'],
])
functionalUtility('col-end', {
supportsNegative: true,
handleBareValue: ({ value }) => {
@ -642,7 +654,10 @@ export function createUtilities(theme: Theme) {
return value
},
themeKeys: ['--grid-column-end'],
handle: (value) => [decl('grid-column-end', value)],
handle: (value) => [
// decl('--tw-col-end', value),
decl('grid-column-end', value),
],
})
suggest('col-span', () => [

15
packages/tailwindcss/tests/ui.spec.ts
View file

@ -287,6 +287,21 @@ test('content-none persists when conditionally styling a pseudo-element', async
expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')
})
test('col-start/end are preserved when overriding col-span', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`<div class="grid grid-cols-12">
<div id="x" class="col-start-3 col-end-7 hover:col-span-7 hover:col-start-4">Hello world</div>
</div>`,
)
expect(await getPropertyValue('#x', 'grid-column')).toEqual('3 / 7')
await page.locator('#x').hover()
expect(await getPropertyValue('#x', 'grid-column')).toEqual('3 / 7')
})
// ---
const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8')