microsoft / microsoft/vscode-css-languageservice

Add the option to scope custom rules to specific selectors such as a HTML CustomElement (web component) - and provide a value list

Open
#471 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
384
Forks
217
Avg merge
3d 16h
Merged PRs (30d)
14

Description

Would it be alot of work to allow the customData schema to scope properties/atRules/pseudoClasses/etc... to a specific element selector?
It would be extremely handy when working with web components to provide autocomplete for Custom Properties, parts and CustomStateSets that can be selected - but only in the context of a specific parent selector - as properties can have the same name across multiple components.

Example:

  {
  "version": 1.1,
  "selectors": [
        {
            "name": "accordion-item",
            "description": "Styles for the accordion item component",
            "properties": [
                {
                    "name": "--background-color",
                    "description": "Background color of the accordion item",
                    "values": [
                        {
                            "name": "--light",
                            "description": "Light background color"
                        },
                        {
                            "name": "--dark",
                            "description": "Dark background color"
                        },
                        {
                            "name": "--transparent",
                            "description": "Transparent background color"
                        }
                    ]
                },
                {
                    "name": "--border-bottom-size",
                    "description": "Size of the bottom border",
                    "values": [
                        {
                            "name": "--none",
                            "description": "No bottom border"
                        },
                        {
                            "name": "--small",
                            "description": "Small bottom border"
                        },
                        {
                            "name": "--medium",
                            "description": "Medium bottom border"
                        },
                        {
                            "name": "--large",
                            "description": "Large bottom border"
                        }
                    ]
                },
                {
                    "name": "--border-color",
                    "description": "Color of the border",
                    "values": [
                        {
                            "name": "--light",
                            "description": "Light border color"
                        },
                        {
                            "name": "--dark",
                            "description": "Dark border color"
                        },
                        {
                            "name": "--primary",
                            "description": "Primary border color"
                        }
                    ]
                },
                {
                    "name": "--border-size",
                    "description": "Size of the border",
                    "values": [
                        {
                            "name": "--none",
                            "description": "No border"
                        },
                        {
                            "name": "--small",
                            "description": "Small border"
                        },
                        {
                            "name": "--medium",
                            "description": "Medium border"
                        },
                        {
                            "name": "--large",
                            "description": "Large border"
                        }
                    ]
                }
            ]
        }
    ]
}

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no files, tests, or entry points. Start by locating the customData schema handling and CSS completion logic, then determine how selector-scoped properties and value lists should be represented and consumed. Done means the schema supports the proposed selector structure and autocomplete is limited to the matching component context.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
developer-experience, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.