#163967 css alias - Githubissues

microsoft / vscode-css-languageservice

CSS, LESS & SCSS language service extracted from VSCode to be reused, e.g in the Monaco editor.

MIT License

312 stars 176 forks source link

#163967 css alias #368

Closed SStranks closed 9 months ago

SStranks commented 10 months ago

Issue #163967: [css] Custom aliases in CSS file resolution In conjunction with Pull Request #197033

Functionality:

Mimicking the alias functionality in ts/jsconfig (compiler.paths) within CSS and SCSS files, allowing ctrl-click file link navigation of aliased import paths.

Changes

cssLanguageService.ts Applying the settings (as per the aforementioned pull request) to the language service.

cssLanguageTypes.ts New interface for the required alias settings.

cssNavigation If a reference file can not be located as a relative import or module (existing code), then attempt to resolve it by testing against the aliases defined in the settings. If the import path matches an alias then return the single file reference, or if the import paths first segment (plus '*' glob) matches an alias then construct a new path (root path + alias path + import path minus first segment).

SStranks commented 10 months ago

@microsoft-github-policy-service agree

aeschli commented 10 months ago

Thanks @SStranks

can you use the default TypeScript code formatter to fix the indentation
can you provide some tests as well? https://github.com/microsoft/vscode-css-languageservice/blob/64bde710714aea5254298def16f903850d9cf1c3/src/test/css/navigation.test.ts#L410 is an existing example

aeschli commented 10 months ago

        "alias": {
            "paths": {
                "@SingleStylesheet": "/src/assets/styles.css",
                "@AssetsDir/*": "/src/assets/*",
            }
        }

If I understand correctly the aliases can be either files or folders. Folders end with /*. I would suggest annotating the folder with just /. The star might give the impression that patterns are supported at the beginning or in the path as well.
Not sure we use two levels (alias and paths). Can it be single importAliases?. Or is this inspired by other tools that use the same notation?

SStranks commented 10 months ago

      "alias": {
          "paths": {
              "@SingleStylesheet": "/src/assets/styles.css",
              "@AssetsDir/*": "/src/assets/*",
          }
      }
If I understand correctly the aliases can be either files or folders. Folders end with /*. I would suggest annotating the folder with just /. The star might give the impression that patterns are supported at the beginning or in the path as well.

Not sure we use two levels (alias and paths). Can it be single importAliases?. Or is this inspired by other tools that use the same notation?

I've amended all the files in both PR's to take into account your suggestions. The 'two levels' was only because initially I thought there might be need of other options, given what was discussed in this thread.