From bcddc81f66e9e779d056bdb438fb43d29f55c1cc Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 8 Nov 2024 14:03:12 -0500 Subject: [PATCH] Replace `outline-none` with `outline-hidden`, add new `outline-none` (#14926) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR renames the existing `outline-none` utility to `outline-hidden`, and adds a new simpler `outline-none` utility that just sets `outline-style: none`. The existing `outline-none` utility doesn't actually set `outline: none`, and instead creates a 2px invisible outline: ```css .outline-none { outline: 2px solid transparent; outline-offset: 2px; } ``` We implemented it this way because people often use `outline: none` to hide focus rings and replace them with custom shadow-based focus rings, without realizing that that approach leads to no visible focus ring in forced colors mode because box shadows aren't rendered in forced colors mode. While this is sort of helpful and clever, it can be a pain when you really do need `outline: none`, and I think it feels surprising in hindsight to hijack the name of an existing CSS property value and make it mean something else. The name `outline-hidden` feels better because it's a new keyword that CSS doesn't use for outlines, and implies that perhaps there's a bit more going on than just setting `outline-style: none`. This PR includes a codemod to convert any existing use of `outline-none` to `outline-hidden`, and we will be sure to explain what `outline-hidden` does for you in the v4 documentation. Manually tested this in the Vite playground to make sure it behaves as expected 👍 --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + .../template/codemods/simple-legacy-classes.test.ts | 2 ++ .../src/template/codemods/simple-legacy-classes.ts | 2 ++ .../src/__snapshots__/intellisense.test.ts.snap | 1 + packages/tailwindcss/src/utilities.test.ts | 10 +++++----- packages/tailwindcss/src/utilities.ts | 10 ++++++---- 6 files changed, 17 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2eba841fa..29594f4e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -61,6 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Rename `--letter-spacing-*` variables to `--tracking-*` ([#14921](https://github.com/tailwindlabs/tailwindcss/pull/14921)) - Rename `--line-height-*` variables to `--leading-*` ([#14925](https://github.com/tailwindlabs/tailwindcss/pull/14925)) - Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920)) +- Replace `outline-none` with `outline-hidden`, add new simplified `outline-none` utility ([#14926](https://github.com/tailwindlabs/tailwindcss/pull/14926)) ## [4.0.0-alpha.31] - 2024-10-29 diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts index f35034447..511d7196a 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.test.ts @@ -32,6 +32,8 @@ test.each([ ['blur', 'blur-sm'], ['blur-sm', 'blur-xs'], + + ['focus:outline-none', 'focus:outline-hidden'], ])('%s => %s', async (candidate, result) => { let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', { base: __dirname, diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts index 19a5f214c..55a62de57 100644 --- a/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts +++ b/packages/@tailwindcss-upgrade/src/template/codemods/simple-legacy-classes.ts @@ -30,6 +30,8 @@ const LEGACY_CLASS_MAP = { blur: 'blur-sm', 'blur-sm': 'blur-xs', + + 'outline-none': 'outline-hidden', } const SEEDED = new WeakSet() diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 0b4723c64..3f0136c0b 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -4561,6 +4561,7 @@ exports[`getClassList 1`] = ` "outline-dashed", "outline-dotted", "outline-double", + "outline-hidden", "outline-inherit", "outline-inherit/0", "outline-inherit/5", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 6cae143be..aab4990d2 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14355,11 +14355,6 @@ test('outline', async () => { --color-red-500: #ef4444; } - .outline-none { - outline-offset: 2px; - outline: 2px solid #0000; - } - .outline { outline-style: var(--tw-outline-style); outline-width: 1px; @@ -14469,6 +14464,11 @@ test('outline', async () => { outline-style: double; } + .outline-none { + --tw-outline-style: none; + outline-style: none; + } + .outline-solid { --tw-outline-style: solid; outline-style: solid; diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index eac2983ae..9fa01330b 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3704,7 +3704,7 @@ export function createUtilities(theme: Theme) { return atRoot([property('--tw-outline-style', 'solid', '')]) } - staticUtility('outline-none', [ + staticUtility('outline-hidden', [ ['outline', '2px solid transparent'], ['outline-offset', '2px'], ]) @@ -3712,6 +3712,10 @@ export function createUtilities(theme: Theme) { /** * @css `outline-style` */ + staticUtility('outline-none', [ + ['--tw-outline-style', 'none'], + ['outline-style', 'none'], + ]) staticUtility('outline-solid', [ ['--tw-outline-style', 'solid'], ['outline-style', 'solid'], @@ -3939,9 +3943,7 @@ export function createUtilities(theme: Theme) { ), decl( 'letter-spacing', - options['--tracking'] - ? `var(--tw-tracking, ${options['--tracking']})` - : undefined, + options['--tracking'] ? `var(--tw-tracking, ${options['--tracking']})` : undefined, ), decl( 'font-weight',