From 7b1cce1d0ed0df1c10a37b5956aeefb1ac0dd68e Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Fri, 3 Oct 2025 13:25:45 +1000 Subject: [PATCH] Add VS Code CSS validation support (#5893) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Adds VS Code custom CSS data for proper validation of non-standard CSS properties and Tailwind v4 directives. ## Changes - **What**: Custom CSS data files for VS Code CSS language service validation - `app-region` - Electron draggable regions - `speak` - Deprecated aural stylesheet property - `@custom-variant` - Tailwind v4 custom variant definitions - `@utility` - Tailwind v4 custom utility definitions - Fixes broken documentation links in existing Tailwind directive references ## Review Focus Documentation links verified against current Tailwind CSS and Electron documentation. ## Screenshots Current: Yellow squigglies imageimage Proposed: Satisfying lack of warnings image ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5893-Add-VS-Code-CSS-validation-support-2806d73d3650813fb5f1e176360c5b7e) by [Unito](https://www.unito.io) --------- Consequences of `@apply` usage may include but are not limited to: - A strong talking-to - Receipt of a corrective directive missive - Upsetting @DrJKL Co-authored-by: Alexander Brown --- .gitignore | 1 + .vscode/custom-css.json | 50 +++++++++++++++++++++++++++++++++++ .vscode/settings.json.default | 3 ++- .vscode/tailwind.json | 36 +++++++++++++++++++------ 4 files changed, 81 insertions(+), 9 deletions(-) create mode 100644 .vscode/custom-css.json diff --git a/.gitignore b/.gitignore index e5bb5f107..8938cb25c 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,7 @@ CLAUDE.local.md *.code-workspace !.vscode/extensions.json !.vscode/tailwind.json +!.vscode/custom-css.json !.vscode/settings.json.default !.vscode/launch.json.default .idea diff --git a/.vscode/custom-css.json b/.vscode/custom-css.json new file mode 100644 index 000000000..67aa038b4 --- /dev/null +++ b/.vscode/custom-css.json @@ -0,0 +1,50 @@ +{ + "version": 1.1, + "properties": [ + { + "name": "app-region", + "description": "Electron-specific CSS property that defines draggable regions in custom title bar windows. Setting 'drag' marks a rectangular area as draggable for moving the window; 'no-drag' excludes areas from the draggable region.", + "values": [ + { + "name": "drag", + "description": "Marks the element as draggable for moving the Electron window" + }, + { + "name": "no-drag", + "description": "Excludes the element from being used to drag the Electron window" + } + ], + "references": [ + { + "name": "Electron Window Customization", + "url": "https://www.electronjs.org/docs/latest/tutorial/window-customization" + } + ] + }, + { + "name": "speak", + "description": "Deprecated CSS2 aural stylesheet property for controlling screen reader speech. Use ARIA attributes instead.", + "values": [ + { + "name": "auto", + "description": "Content is read aurally if element is not a block and is visible" + }, + { + "name": "never", + "description": "Content will not be read aurally" + }, + { + "name": "always", + "description": "Content will be read aurally regardless of display settings" + } + ], + "references": [ + { + "name": "CSS-Tricks Reference", + "url": "https://css-tricks.com/almanac/properties/s/speak/" + } + ], + "status": "obsolete" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json.default b/.vscode/settings.json.default index f1ed5fba6..18a614290 100644 --- a/.vscode/settings.json.default +++ b/.vscode/settings.json.default @@ -1,5 +1,6 @@ { "css.customData": [ - ".vscode/tailwind.json" + ".vscode/tailwind.json", + ".vscode/custom-css.json" ] } diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json index 4efd1d966..659c28859 100644 --- a/.vscode/tailwind.json +++ b/.vscode/tailwind.json @@ -7,7 +7,7 @@ "references": [ { "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#import" + "url": "https://tailwindcss.com/docs/functions-and-directives#import-directive" } ] }, @@ -17,7 +17,7 @@ "references": [ { "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#theme" + "url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive" } ] }, @@ -27,17 +27,17 @@ "references": [ { "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#layer" + "url": "https://tailwindcss.com/docs/theme#layers" } ] }, { "name": "@apply", - "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "description": "DO NOT USE. IF YOU ARE CAUGHT USING @apply YOU WILL FACE SEVERE CONSEQUENCES.", "references": [ { "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + "url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive" } ] }, @@ -47,7 +47,7 @@ "references": [ { "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#config" + "url": "https://tailwindcss.com/docs/functions-and-directives#config-directive" } ] }, @@ -57,7 +57,7 @@ "references": [ { "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#reference" + "url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive" } ] }, @@ -67,7 +67,27 @@ "references": [ { "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#plugin" + "url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive" + } + ] + }, + { + "name": "@custom-variant", + "description": "Use the `@custom-variant` directive to add a custom variant to your project. Custom variants can be used with utilities like `hover`, `focus`, and responsive breakpoints. Use `@slot` inside the variant to indicate where the utility's styles should be inserted.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants" + } + ] + }, + { + "name": "@utility", + "description": "Use the `@utility` directive to add custom utilities to your project. Custom utilities work with all variants like `hover`, `focus`, and responsive variants. Use `--value()` to create functional utilities that accept arguments.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities" } ] }