mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
abde4c9694
This PR updates the `hover` variant to only apply when `@media (hover:
hover)` matches.
```diff
.hover\:bg-black {
&:hover {
+ @media (hover: hover) {
background: black;
+ }
}
}
```
This is technically a breaking change because you may have built your
site in a way where some interactions depend on hover (like opening a
dropdown menu), and were relying on the fact that tapping on mobile
triggers hover.
To bring back the old hover behavior, users can override the `hover`
variant in their CSS file back to the simpler implementation:
```css
@import "tailwindcss";
@variant hover (&:hover);
```
I've opted to go with just `@media (hover: hover)` for this because it
seems like the best trade-off between the available options. Using
`(any-hover: hover)` would mean users would get sticky hover states when
tapping on an iPad if they have a mouse or trackpad connected, which
feels wrong to me because in those cases touch is still likely the
primary method of interaction.
Sites built with this feature in mind will be treating hover styles as
progressive enhancement, so it seems better to me that using an iPad
with a mouse would not have hover styles, vs. having sticky hover styles
in the same situation.
Of course users can always override this with whatever they want, so
making this the default isn't locking anyone in to a particular choice.
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import { defineConfig, devices } from '@playwright/test'
|
|
|
|
/**
|
|
* Read environment variables from file.
|
|
* https://github.com/motdotla/dotenv
|
|
*/
|
|
// require('dotenv').config();
|
|
|
|
/**
|
|
* See https://playwright.dev/docs/test-configuration.
|
|
*/
|
|
export default defineConfig({
|
|
testDir: './tests',
|
|
/* Run tests in files in parallel */
|
|
fullyParallel: true,
|
|
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
|
forbidOnly: !!process.env.CI,
|
|
/* Retry on CI only */
|
|
retries: process.env.CI ? 2 : 0,
|
|
/* Opt out of parallel tests on CI. */
|
|
workers: process.env.CI ? 1 : undefined,
|
|
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
|
reporter: 'html',
|
|
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
|
use: {
|
|
/* Base URL to use in actions like `await page.goto('/')`. */
|
|
// baseURL: 'http://127.0.0.1:3000',
|
|
|
|
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
|
trace: 'on-first-retry',
|
|
},
|
|
|
|
/* Configure projects for major browsers */
|
|
projects: [
|
|
{
|
|
name: 'chromium',
|
|
use: { ...devices['Desktop Chrome'] },
|
|
},
|
|
{
|
|
name: 'webkit',
|
|
use: { ...devices['Desktop Safari'] },
|
|
},
|
|
{
|
|
name: 'firefox',
|
|
use: {
|
|
...devices['Desktop Firefox'],
|
|
// https://playwright.dev/docs/test-use-options#more-browser-and-context-options
|
|
launchOptions: {
|
|
// https://playwright.dev/docs/api/class-browsertype#browser-type-launch-option-firefox-user-prefs
|
|
firefoxUserPrefs: {
|
|
// By default, headless Firefox runs as though no pointers
|
|
// capabilities are available.
|
|
// https://github.com/microsoft/playwright/issues/7769#issuecomment-966098074
|
|
//
|
|
// This impacts our `hover` variant implementation which uses an
|
|
// '(hover: hover)' media query to determine if hover is available.
|
|
//
|
|
// Available values for pointer capabilities:
|
|
// NO_POINTER = 0x00;
|
|
// COARSE_POINTER = 0x01;
|
|
// FINE_POINTER = 0x02;
|
|
// HOVER_CAPABLE_POINTER = 0x04;
|
|
//
|
|
// Setting to 0x02 | 0x04 says the system supports a mouse
|
|
'ui.primaryPointerCapabilities': 0x02 | 0x04,
|
|
'ui.allPointerCapabilities': 0x02 | 0x04,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
/* Test against mobile viewports. */
|
|
// {
|
|
// name: 'Mobile Chrome',
|
|
// use: { ...devices['Pixel 5'] },
|
|
// },
|
|
// {
|
|
// name: 'Mobile Safari',
|
|
// use: { ...devices['iPhone 12'] },
|
|
// },
|
|
|
|
/* Test against branded browsers. */
|
|
// {
|
|
// name: 'Microsoft Edge',
|
|
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
|
|
// },
|
|
// {
|
|
// name: 'Google Chrome',
|
|
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
|
|
// },
|
|
],
|
|
|
|
/* Run your local dev server before starting the tests */
|
|
// webServer: {
|
|
// command: 'npm run start',
|
|
// url: 'http://127.0.0.1:3000',
|
|
// reuseExistingServer: !process.env.CI,
|
|
// },
|
|
})
|