[CSS] Add support for syntax dialects
This PR
- renames CSS.sublime-syntax to CSS (Basic).sublime-syntax
- creates an inherit CSS from CSS (Basic)
Goal
Support different CSS dialects (Basic, PostCSS, Tailwind CSS, ...) in embedded code scenarios including templating support.
Motivation
More and more syntax packages inherit CSS.sublime-syntax to add support for interpolation or embed template tags (e.g.: ASP, JSP, PHP, Liquid, Vue, ...).
Other packages might provide certain dialects of CSS, such as PostCSS or Tailwind CSS.
It is currently not easily possible to embed Tailwind CSS in PHP or Liquid without rewriting each of those syntaxes, because all of them rely on default CSS.sublime-syntax due to inheritance depending on file names rather than scopes.
The motivation is to enable exactly this (again), to benefit from both inheritance and flexibility from 3rd-party packages.
Strategy
The idea is to turn CSS.sublime-syntax into an interface, which is inherit from CSS (Basic) and can be extended by and embedded into syntaxes such as PHP by default, while being able to easily create an
override with extends value replaced by desired syntax dialect (e.g.: Tailwind CSS).
CSS (PHP)
|
CSS
| \
| Tailwind CSS
| |
| PostCSS
| /
CSS3
Note: It follows the idea being discussed in SQL (#3046).
Example
To enable Tailwind CSS in PHP
-
install Tailwind CSS
-
modify Tailwind CSS.sublime-syntax to extend from CSS (Basic).sublime-syntax
-
create a Packages/CSS/CSS.sublime-syntax with following content
%YAML 1.2 --- name: CSS scope: source.css version: 2 extends: Packages/Tailwind CSS/Tailwind CSS.sublime-syntax file_extensions: - css
A command to choose desired CSS dialect could be provided via Command Palette by something like https://github.com/deathaxe/DefaultSyntaxChooser
Does it make sense to rename the basic version of CSS as CSS (Plain) instead of CSS (Basic) to be inline with the HTML syntax ?
The original intent was to use Plain for syntaxes without those long lists of pre-defined tokens. HTML (Plain) doesn't know about any html tag for instance, just highlighting anything which looks like that.
I rather found the whole CSS (...) naming scheme a bit problematic as linked "dialect chooser" doesn't handle it as CSS dialect for that reason.
CSS3 or something like that would probably be the better choice.