mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
## 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 <img width="338" height="179" alt="image" src="https://github.com/user-attachments/assets/652040f5-8e0b-486b-95f6-2fa8f9bf9ba7" /><img width="499" height="180" alt="image" src="https://github.com/user-attachments/assets/43d16210-7fbf-4ef8-b0e1-9a16e59d1d85" /> Proposed: Satisfying lack of warnings <img width="173" height="62" alt="image" src="https://github.com/user-attachments/assets/25f1c1c4-22b7-483b-9848-3030a3c0dc86" /> ┆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 <drjkl@comfy.org>
96 lines
3.4 KiB
JSON
96 lines
3.4 KiB
JSON
{
|
|
"version": 1.1,
|
|
"atDirectives": [
|
|
{
|
|
"name": "@import",
|
|
"description": "Use the `@import` directive to inline CSS files, including Tailwind itself, into your stylesheet.",
|
|
"references": [
|
|
{
|
|
"name": "Tailwind Documentation",
|
|
"url": "https://tailwindcss.com/docs/functions-and-directives#import-directive"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "@theme",
|
|
"description": "Use the `@theme` directive to define custom design tokens like fonts, colors, and breakpoints.",
|
|
"references": [
|
|
{
|
|
"name": "Tailwind Documentation",
|
|
"url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "@layer",
|
|
"description": "Use the `@layer` directive inside `@theme` to organize custom styles into different layers like `base`, `components`, and `utilities`.",
|
|
"references": [
|
|
{
|
|
"name": "Tailwind Documentation",
|
|
"url": "https://tailwindcss.com/docs/theme#layers"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "@apply",
|
|
"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-directive"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "@config",
|
|
"description": "Use the `@config` directive to load a legacy JavaScript-based Tailwind configuration file.",
|
|
"references": [
|
|
{
|
|
"name": "Tailwind Documentation",
|
|
"url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "@reference",
|
|
"description": "Use the `@reference` directive to import theme variables, custom utilities, and custom variants from other files without duplicating CSS.",
|
|
"references": [
|
|
{
|
|
"name": "Tailwind Documentation",
|
|
"url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "@plugin",
|
|
"description": "Use the `@plugin` directive to load a legacy JavaScript-based Tailwind plugin.",
|
|
"references": [
|
|
{
|
|
"name": "Tailwind Documentation",
|
|
"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"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|