Packages icon indicating copy to clipboard operation
Packages copied to clipboard

[CSS] Add support for syntax dialects

Open deathaxe opened this issue 3 years ago • 2 comments

This PR

  1. renames CSS.sublime-syntax to CSS (Basic).sublime-syntax
  2. 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

  1. install Tailwind CSS

  2. modify Tailwind CSS.sublime-syntax to extend from CSS (Basic).sublime-syntax

  3. 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

deathaxe avatar May 31 '22 10:05 deathaxe

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 ?

UltraInstinct05 avatar Jun 11 '22 10:06 UltraInstinct05

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.

deathaxe avatar Jun 11 '22 16:06 deathaxe