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] Make CSS a good base syntax for extensions #3717

Merged
merged 29 commits into from
Apr 30, 2023

Conversation

deathaxe
Copy link
Collaborator

@deathaxe deathaxe commented Apr 29, 2023

This PR proposes structural changes to CSS sublime syntax inspired by HTML, to make it a good base for 3rd-party syntaxes such as LESS and SCSS.

Changes:

  1. Convert anonymous into named contexts

  2. Strategic reorganization of contexts and includes

  3. rename contexts inspired by HTML/Python

    - <context>
      - <context>-body
      - <context>-end
      - <context>-content
    
  4. adds some syntax test examples to illustrate how these changes improve interpolation support in ASP/JSP/PHP.

Notes

  • It intents to change CSS highlighting behevior as little as possible at this point.

  • The overall parsing performance is increased by 20-25%.

  • Here's a LESS prototype, which makes use of this PR.

deathaxe added 29 commits April 16, 2023 21:01
This commit...

1. fixes `none` constant highlighting in `perspective()` functions
2. removes `<percentage>` from `matrix()` and `matrix3d()`
3. removes `<numbers>` from `translateX()` and `translateY()`
4. removes `<comma>` from `scaleX()`, ... .

5. adds and sorts transform related test cases.

Note: This commit intents to fix behavior/highlighting with existing
      accuracy/complexity/granularity.

      The decision to simplify those contexts by more lazy highlighting
      may/should be part of a future change.
This commit targets better extensibility of CSS by...

1. adding a `stylesheet` context which is the only one being included
   in `main`, so any extending syntax can easily insert e.g. frontmatter
   or shebang like prefixes.

2. adding named contexts for selector elements etc., so inheriting
   syntaxes can override or extend them more individually.

This commit does not have any effect on how CSS is highlighted.
This commit normalizes property name behavior by directly checking for
property values after a name. This has already be the case for `font`,
`font-family` and other special treated properties. It is now done for
all of them.

This change is not directly needed by CSS, but helps 3rd-party syntaxes
such as PostCSS, TailwindCSS, LESS, SCSS to implement nested rule sets.

This commit does not have any effect on how CSS is highlighted.
This commit enables interpolation of various identifiers
(e.g.:selectors, property names and constants) by not consuming
sequences of characters, but pushing dedicated identifier contexts onto
stack.

Notes:
- This commit does not have any effect on
  a) how CSS is highlighted
  b) parsing performance (interestingly)
- ASP, ERB, HAML, JSP and PHP are adjusted to benefit from new
  interpolation support and to illustrate how it works.
- Bash, HTML, YAML and maybe some other syntaxes follow that strategy
  already.
This commit adds named contexts for certain context-end patterns to

1. reduce some pattern duplication.
2. give inheriting syntaxes a chance to modify context bailouts more
   individually.

This commit does not have any effect on how CSS is highlighted.
The goal is to enable syntaxes to override/extend selector patterns
without overriding `selectors` or `selector-end` contexts directly.

This commit does not have any effect on how CSS is highlighted.
This commit fixes highlighting issues with property names beginning
with escaped characters by...

1. removing `property-identifier-content` context in favor of organizing
   the 6 remaining property name patterns directly in `rule-list-body`
   context.
2. simplifying property name patterns for performance reasons
This commit replaces `[:ascii:]` by `[\x{0}-\x{127}]` as it increases
overall syntax performance by about 13% in larger real world CSS files.
This commit...

1. adds named contexts for each builtin function
2. sorts contexts alphabetically within their logical sections
3. refactors function arguments list contexts by using multi-push in
   association with a common `function-arguments-list-begin` context.
4. adds missing case-insensitivity flags in some `gradient` function
   name patterns

These changes don't effect highlighting or parsing performance.
This commit renames `-list-content` contexts as `-body` is a common
naming scheme, which established for such contexts in other syntaxes.

These changes don't effect highlighting or parsing performance.
This syntax no longer has much in common with CSS3 package's syntax.
Another step towards less restrictive highlighting to reduce risk of
breaking syntax due to new/unknown functions.
This commit adds an organizational context, which most/all value related
expressions have in common. It can also be used as a common entry point
for extensions added by inheriting syntaxes.

The `builtin-values` and `common-operators` contexts are merged into the
new `values` context as they seem to provide little to no use anymore.
The `selector-content` context already includes comments and bailouts.
Hence no further prototype context is required.
1. replace terminator-pop, to avoid popping on parentheses.
2. prefer `function-arguments-prototype` over `value-prototype`
   in calc() arguments
That bundling may have unwanted effects on inheriting syntaxes.
Same fix as for angle-constants.
This commit enables inheriting syntaxes to interpolate layer names the
same way as all other identifiers.
Extend interpolation support to namespace prefixes of attribute names

Example (LESS):

  attrib: attr(n@{am}e|@{sp}ace|*|f@{o}o);
This commit applies context naming scheme to blocks, which proofed
itself valuable for extendable syntaxes in various places already.
 
All contexts follow the chosen naming scheme.

- ...-body
  - ...-end
  - ...-content
This commit applies context naming scheme to strings, which proofed
itself valuable for extendable syntaxes in various places already.
 
All contexts follow the chosen naming scheme.

- ...-body
  - ...-end
  - ...-content
All contexts follow the chosen naming scheme.

- ...-body
  - ...-end
  - ...-content

The additional named contexts increases syntax cache, but helps
inheriting syntaxes to extend selectors while maintaining bailouts and
comments at highest priority.
All contexts follow the chosen naming scheme.

- ...-body
  - ...-end
  - ...-content
All contexts follow the chosen naming scheme.

- ...-body
  - ...-end
  - ...-content
This commit restricts illegal line end matching to quoted strings and
provides named contexts for string-...-end.
@deathaxe deathaxe marked this pull request as ready for review April 29, 2023 13:32
Copy link
Collaborator

@michaelblyons michaelblyons left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!!

@deathaxe deathaxe merged commit 6e8eb50 into sublimehq:master Apr 30, 2023
@deathaxe deathaxe deleted the pr/css/improve-extensibility branch April 30, 2023 07:46
deathaxe added a commit to SublimeText/Less that referenced this pull request May 1, 2023
This commit completely rewrites LESS.sublime-syntax as extension of
ST's default CSS.sublime-syntax using latest syntax engine features.

1. CSS.sublime-syntax is vendored for backward compatibility reasons
   for all ST builds not shipping sublimehq/Packages#3717

   Note: Once a ST build with the PR merged is released, an appropriate
   release of this package should be added with vendored CSS removed,
   so it can benefit from future improvements of ST's CSS.

2. Default CSS syntax tests are vendored as syntax_test_css.less to
   verify all existing CSS expressions are still scoped correctly.

   Those invalid-syntax tests have been removed, which behave different
   caused by LESS.

3. Symbol Lists and Symbol Index is refactored to reflect syntax changes
   and apply some functionality from base CSS.

4. Folding rules for ST's syntax based folding are added

5. Syntax specific settings are added to adjust word separators so `-`
   is included into identifiers.

Benchmark:

- real world CSS file with 10.000 lines of code
  before: 478ms   after: 30ms  diff: -94%

- syntax_test_less.less from previous revision
  before: 36ms    after: 8ms   diff: -78%
deathaxe added a commit to SublimeText/TailwindCSS that referenced this pull request May 2, 2023
This commit makes use of layer at-rules from CSS.

requires: sublimehq/Packages#3717
deathaxe added a commit to SublimeText/TailwindCSS that referenced this pull request May 2, 2023
deathaxe added a commit to SublimeText/TailwindCSS that referenced this pull request May 2, 2023
Inspired by recently refactored LESS.sublime-syntax

requires: sublimehq/Packages#3717
deathaxe added a commit to SublimeText/TailwindCSS that referenced this pull request May 2, 2023
Inspired by recently refactored LESS.sublime-syntax

requires: sublimehq/Packages#3717
deathaxe added a commit to SublimeText/TailwindCSS that referenced this pull request May 2, 2023
Inspired by recently refactored LESS.sublime-syntax

requires: sublimehq/Packages#3717
deathaxe added a commit to SublimeText/TailwindCSS that referenced this pull request May 2, 2023
This commit makes use of layer at-rules from CSS.

requires: sublimehq/Packages#3717
deathaxe added a commit to SublimeText/TailwindCSS that referenced this pull request May 2, 2023
deathaxe added a commit to SublimeText/TailwindCSS that referenced this pull request May 6, 2023
This commit backports relevant changes from
sublimehq/Packages#3717
to restore correct nested rule-set scoping.
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.

3 participants