mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
88b9f15b65
This PR tweaks the dropdown arrow added to an input by Chrome when it has a `list` attribute pointing to a `<datalist>`. Right now the arrow isn't centered vertically: <img width="227" height="58" alt="Screenshot 2025-07-14 at 15 41 50" src="https://github.com/user-attachments/assets/b354a5e8-432d-432d-bfe4-f7b6f6683548" /> The cause of this is the line height being inherited into the pseudo element which controls how the marker is positioned. I *think* this is because it's being drawn with unicode symbols but I'm not sure. It could just be from the `list-item` display. After this PR changes the line height its centered again: <img width="227" height="58" alt="Screenshot 2025-07-14 at 15 42 05" src="https://github.com/user-attachments/assets/1afa1f33-cc28-4b1f-9e04-e546f6848f57" /> Some notes: This only affects Chrome and also does not appear to cause issues for date/time inputs. While weird that this pseudo is the one used for a `<datalist>` marker it is indeed correct. Fixes #18499 Can use this Play to test the change: https://play.tailwindcss.com/jzT35CRpr0 --------- Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
|
|
|
|
const SETUP = {
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"type": "module",
|
|
"dependencies": {
|
|
"@tailwindcss/vite": "workspace:^",
|
|
"nuxt": "3.14.0",
|
|
"nitropack": "2.11.0",
|
|
"tailwindcss": "workspace:^",
|
|
"vue": "latest"
|
|
}
|
|
}
|
|
`,
|
|
'nuxt.config.ts': ts`
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
|
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
export default defineNuxtConfig({
|
|
vite: {
|
|
plugins: [tailwindcss()],
|
|
},
|
|
|
|
css: ['~/assets/css/main.css'],
|
|
devtools: { enabled: true },
|
|
compatibilityDate: '2024-08-30',
|
|
})
|
|
`,
|
|
'app.vue': html`
|
|
<template>
|
|
<div class="underline">Hello world!</div>
|
|
</template>
|
|
`,
|
|
'assets/css/main.css': css`@import 'tailwindcss';`,
|
|
},
|
|
}
|
|
|
|
test('dev mode', SETUP, async ({ fs, spawn, expect }) => {
|
|
let process = await spawn('pnpm nuxt dev', {
|
|
env: {
|
|
TEST: 'false', // VERY IMPORTANT OTHERWISE YOU WON'T GET OUTPUT
|
|
NODE_ENV: 'development',
|
|
},
|
|
})
|
|
|
|
let url = ''
|
|
await process.onStdout((m) => {
|
|
let match = /Local:\s*(http.*)\//.exec(m)
|
|
if (match) url = match[1]
|
|
return Boolean(url)
|
|
})
|
|
|
|
await process.onStdout((m) => m.includes('server warmed up in'))
|
|
|
|
await retryAssertion(async () => {
|
|
let css = await fetchStyles(url)
|
|
expect(css).toContain(candidate`underline`)
|
|
})
|
|
|
|
await retryAssertion(async () => {
|
|
await fs.write(
|
|
'app.vue',
|
|
html`
|
|
<template>
|
|
<div class="underline font-bold">Hello world!</div>
|
|
</template>
|
|
`,
|
|
)
|
|
|
|
let css = await fetchStyles(url)
|
|
expect(css).toContain(candidate`underline`)
|
|
expect(css).toContain(candidate`font-bold`)
|
|
})
|
|
})
|
|
|
|
test('build', SETUP, async ({ spawn, exec, expect }) => {
|
|
await exec('pnpm nuxt build')
|
|
// The Nuxt preview server does not automatically assign a free port if 3000
|
|
// is taken, so we use a random port instead.
|
|
let process = await spawn(`pnpm nuxt preview --port 8724`, {
|
|
env: {
|
|
TEST: 'false',
|
|
NODE_ENV: 'development',
|
|
},
|
|
})
|
|
|
|
let url = ''
|
|
await process.onStdout((m) => {
|
|
let match = /Listening on\s*(http.*)\/?/.exec(m)
|
|
if (match) url = match[1].replace('http://[::]', 'http://127.0.0.1')
|
|
return m.includes('Listening on')
|
|
})
|
|
|
|
await retryAssertion(async () => {
|
|
let css = await fetchStyles(url)
|
|
expect(css).toContain(candidate`underline`)
|
|
})
|
|
})
|