diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 99cac96..886d70e 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,4 +1,4 @@ # These are supported funding model platforms -custom: https://www.buymeacoffee.com/ecmel github: ecmel +custom: https://www.buymeacoffee.com/ecmel diff --git a/CHANGELOG.md b/CHANGELOG.md index 05730f3..acde880 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,10 +2,32 @@ All notable changes to the extension will be documented in this file. -## [2.0.8] - 2024-02- +## [2.0.13] - 2025-01-24 + +- Update deps for a security vulnerability + +## [2.0.12] - 2025-01-01 + +- Fixed escape character breaking css intellisense + +## [2.0.11] - 2024-11-06 + +- Added maud support (."container") +- Fixed parser regex +- Updated dependencies + +## [2.0.10] - 2024-06-12 + +- Added variable substitution for `${fileExtname}` +- Updated documentation +- Ported config to typescript + +## [2.0.9] - 2024-02-01 - Added optional auto validation +- Added variable substitution for local style sheets - Added feedback for clear cache +- Updated documentation - Updated dependencies ## [2.0.7] - 2024-01-23 diff --git a/README.md b/README.md index 5e125af..9994814 100644 --- a/README.md +++ b/README.md @@ -7,101 +7,164 @@ HTML `id` and `class` attribute completion for Visual Studio Code. ## Features - HTML `id` and `class` attribute completion -- Supports completion from in file styles +- Supports completion from in file defined styles - Supports specifying remote and local style sheets - Supports any language for completion - Supports go to definition for selectors - Validates class attributes on demand -## Usage +## Supported Languages + +Supported languages can be configured with the `css.enabledLanguages` global setting. By default `html` is enabled: + +```json +{ + "css.enabledLanguages": ["html"] +} +``` -You can view a list of `id` and `class` attribute suggestions in configured languages. +Extension can be configured to support any language where it makes sense such as `nunjucks`, `twig`, `mustache`, `vue`, `typescript` etc. You should also install corresponding language extension which registers the specific language id in VS Code. + +This setting is application scoped and changing the setting requires restarting VS Code. ## Specifying Style Sheets -Style sheets can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest for all configured languages within that workspace folder. +Remote and local style sheets with optional glob patterns and variable substitutions can be specified in VS Code settings per workspace folder in `.vscode/settings.json` and will suggest in all configured languages within that workspace folder. + +Glob patterns for local style sheets can have the following syntax: + +| Pattern | Matches | +| ------- | ----------------------------------------------------- | +| `*` | zero or more characters in a path segment | +| `?` | one character in a path segment | +| `**` | any number of path segments, including none | +| `{}` | group conditions like `**​/*.{css,scss}` | +| `[]` | a range of characters like `[0-9]` or negate `[!0-9]` | + +The following variable substitutions are supported for local style sheets as well: + +| Variable | Substitution | +| ---------------------------- | ----------------------------------------- | +| `${fileBasename}` | Current file's basename | +| `${fileBasenameNoExtension}` | Current file's basename with no extension | +| `${fileExtname}` | Current file's extension | + +## Examples -### Example +Configuration depends on your layout of the project. The following most basic setup will suggest from all `css` files in project's `src` folder: + +**`.vscode/settings.json`** + +```json +{ + "css.styleSheets": ["src/**/*.css"] +} +``` + +### [Bootstrap](https://getbootstrap.com/) + +If Bootstrap `npm` module is used with additional `scss` the following can be a starting point: **`.vscode/settings.json`** ```json { "css.styleSheets": [ - "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css", "node_modules/bootstrap/dist/css/bootstrap.css", - "src/**/*.scss", - "src/view/style.ts", - "dist/style.css" + "src/**/*.scss" ] } ``` -## Supported Languages +or in case of Bootstrap CDN with additional plain `css`: -Supported languages can be configured with the `css.enabledLanguages` setting. By default `html` is enabled: +**`.vscode/settings.json`** ```json { - "css.enabledLanguages": ["html"] + "css.styleSheets": [ + "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css", + "src/**/*.css" + ] } ``` -Extension can be configured to support any language where it makes sense such as `nunjucks`, `twig`, `mustache`, `typescript` etc. You should also install corresponding language extension which registers the language id in VS Code. +All of Bootstrap's class selectors with additional user defined styles in the project will be available for completion in `html` files. -This setting is application scoped and changing the setting requires restarting VS Code. +### [Lit](https://lit.dev/) -## Examples +Enable `typescript` or `javascript` in global settings depending on your usage and restart VS Code: -Configuration depends on your layout of the project but some samples are below: +```json +{ + "css.enabledLanguages": ["html", "typescript"] +} +``` -### Bootstrap +Component's [static styles](https://lit.dev/docs/components/styles/) will be available for completion elsewhere in the component. If you need to use some base styles in every component you can specify as follows: -If you are using Bootstrap npm module: +**`.vscode/settings.json`** ```json { - "css.styleSheets": [ - "node_modules/bootstrap/dist/css/bootstrap.css", - "src/**/*.scss" - ] + "css.styleSheets": ["src/base-styles.ts"] } ``` -If you are using Bootstrap CDN: +Variable substitution can be used to refer to a related `css` file. If you are working on `my-component.ts` and your `css` is in `my-component-css.ts` then a suitable setup can be: + +**`.vscode/settings.json`** ```json { - "css.styleSheets": [ - "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css", - "src/**/*.scss" - ] + "css.styleSheets": ["**/${fileBasenameNoExtension}-css.ts"] } ``` -### Lit +### [Vue](https://vuejs.org/) + +Install your favorite Vue language extension from [Marketplace](https://marketplace.visualstudio.com/search?term=tag%3Avue&target=VSCode&category=All%20categories&sortBy=Relevance) which registers `vue` language id then enable `vue` in global settings and restart VS Code: ```json { - "css.enabledLanguages": ["typescript"] + "css.enabledLanguages": ["html", "vue"] } ``` +Styles defined in component's `` section will be available for completion in component's `