Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CSS] Add support for syntax dialects #3416

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

deathaxe
Copy link
Collaborator

@deathaxe deathaxe commented May 31, 2022

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

@Ultra-Instinct-05
Copy link
Contributor

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 ?

@deathaxe
Copy link
Collaborator Author

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.

This commit
1. renames CSS.sublime-syntax to CSS (Plain).sublime-syntax
2. creates an inherit CSS from CSS (Plain)

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 (Plain) and can be extended by and embedded into
syntax definitions such as PHP, 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
          |  /
         CSS (Plain)

Note: It follows the idea being discussed in SQL (sublimehq#3046).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants