Skip to content

Commit

Permalink
[CSS] Make CSS a good base syntax for extensions (sublimehq#3717)
Browse files Browse the repository at this point in the history
This commit applies structural changes to CSS sublime syntax inspired by HTML, 
to turn it into a good base for inheriting 3rd-party syntaxes such as LESS and SCSS.

Main 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%.

Details:

* [CSS] Fix translate function arguments highlighting

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.

* [CSS] Convert contexts to named contexts

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.

* [CSS] Normalize property-name contexts

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.

* [CSS] Add support for identifier interpolation

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.

* [CSS] Add brackets-end context

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.

* [CSS] Add variables for selector boundaries

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.

* [CSS] Refactor property-name contexts

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

* [CSS] Optimize identifier pattern performance

This commit replaces `[:ascii:]` by `[\x{0}-\x{127}]` as it increases
overall syntax performance by about 13% in larger real world CSS files.

* [CSS] Add named contexts for builtin functions

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.

* [CSS] Rename all ...-list-content contexts to -list-body

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.

* [CSS] Allow any valid value in unknown functions

Another step towards less restrictive highlighting to reduce risk of
breaking syntax due to new/unknown functions.

* [CSS] Introduce value-prototype context

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.

* [CSS] No function arguments prototype in selector arguments

The `selector-content` context already includes comments and bailouts.
Hence no further prototype context is required.

* [CSS] Tweak function-arguments-prototype

1. replace terminator-pop, to avoid popping on parentheses.
2. prefer `function-arguments-prototype` over `value-prototype`
   in calc() arguments

* [CSS] Split illegal-groups from var() contexts

That bundling may have unwanted effects on inheriting syntaxes.

* [CSS] Consistently scope `none` everywhere

* [CSS] Fix "0" length constant

Same fix as for angle-constants.

* [CSS] Add interpolation support for layer names

This commit enables inheriting syntaxes to interpolate layer names the
same way as all other identifiers.

* [CSS] Add interpolation support to qualified attr names

Extend interpolation support to namespace prefixes of attribute names

Example (LESS):

  attrib: attr(n@{am}e|@{sp}ace|*|f@{o}o);

* [CSS] rename all ...-block-content contexts to -block-body

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

* [CSS] rename all ...-string-content contexts to -string-body

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

* [CSS] Fix direction constants pattern

* [CSS] Apply -body -end -content context naming scheme to selectors

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.

* [CSS] Rename comments-content context to block-comment-body

All contexts follow the chosen naming scheme.

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

* [CSS] Rename at-rule-...-content contexts

All contexts follow the chosen naming scheme.

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

* [CSS] Reorganize string contexts

This commit restricts illegal line end matching to quoted strings and
provides named contexts for string-...-end.
  • Loading branch information
deathaxe authored Apr 30, 2023
1 parent a577e6b commit 6e8eb50
Show file tree
Hide file tree
Showing 12 changed files with 1,753 additions and 1,209 deletions.
4 changes: 4 additions & 0 deletions ASP/Embeddings/CSS (for ASP).sublime-syntax
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ hidden: true

extends: Packages/CSS/CSS.sublime-syntax

variables:

ident_start: (?:{{nmstart}}|<%)

contexts:

prototype:
Expand Down
84 changes: 59 additions & 25 deletions ASP/syntax_test_asp.asp
Original file line number Diff line number Diff line change
Expand Up @@ -168,31 +168,6 @@
</script>
' ^^^^^^^ meta.tag - source
<style type="text/css"> <!-- h1 {} --> </style>
' ^^^^^^^^^^^^^^^^^^^^ meta.tag - comment - source
' ^ - meta.tag - comment - source
' ^^^^ comment.block.html punctuation.definition.comment.begin.html - source
' ^^^^^^^ source.css.embedded.html
' ^^^ comment.block.html punctuation.definition.comment.end.html - source
' ^ - meta.tag - comment - source
' ^^^^^^^^ meta.tag - comment - source
<style>.<%=selector%> { <%=attr%>: <%=value%>; }</style>
'^^^^^^ meta.tag.style.begin.html
' ^^^^^^^^^^^^^^^ source.css.embedded.html - meta.property-list - meta.block
' ^^^^^^^^^^^^^^^^^^^^^^^^^^ source.css.embedded.html meta.property-list.css meta.block.css
' ^^^^^^^^ meta.tag.style.end.html
' ^ meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css
' ^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css meta.embedded.asp
' ^^^ punctuation.section.embedded.begin.asp
' ^^^^^^^^ source.asp.embedded.html variable.other.asp
' ^^ punctuation.section.embedded.end.asp
' ^ punctuation.section.block.begin.css
' ^^^^^^^^^ meta.embedded.asp
' ^ punctuation.separator.key-value.css
' ^^^^^^^^^^ meta.property-value.css meta.embedded.asp
' ^ punctuation.terminator.rule.css
' ^ punctuation.section.block.end.css
<style>
' <- source.css.embedded.html
Expand All @@ -212,6 +187,65 @@
' ^ - meta.tag - comment - source
</style>
' ^^^^^ meta.tag - comment - source
<style type="text/css"> <!-- h1 {} --> </style>
' ^^^^^^^^^^^^^^^^^^^^ meta.tag - comment - source
' ^ - meta.tag - comment - source
' ^^^^ comment.block.html punctuation.definition.comment.begin.html - source
' ^^^^^^^ source.css.embedded.html
' ^^^ comment.block.html punctuation.definition.comment.end.html - source
' ^ - meta.tag - comment - source
' ^^^^^^^^ meta.tag - comment - source
<style>
.<%=selector%> { <%=attr%>: <%=value%>; }
' ^^^^^^^^^^^^^^^ source.css.embedded.html - meta.property-list - meta.block
' ^^^^^^^^^^^^^^^^^^^^^^^^^^ source.css.embedded.html meta.property-list.css meta.block.css
' ^ meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css
' ^^^^^^^^^^^^^ meta.selector.css entity.other.attribute-name.class.css meta.embedded.asp
' ^^^ punctuation.section.embedded.begin.asp
' ^^^^^^^^ source.asp.embedded.html variable.other.asp
' ^^ punctuation.section.embedded.end.asp
' ^ punctuation.section.block.begin.css
' ^^^^^^^^^ meta.embedded.asp
' ^ punctuation.separator.key-value.css
' ^^^^^^^^^^ meta.property-value.css meta.embedded.asp
' ^ punctuation.terminator.rule.css
' ^ punctuation.section.block.end.css
.my-<%=selector%>--class { my-<%=attr%>--prop: a-<%=value%>-const; }
' ^^^^^^^^^^^^^^^^^^^^^^^^^ source.css.embedded.html meta.selector.css - meta.property-list - meta.block
' ^^ source.css.embedded.html meta.property-list.css meta.block.css - meta.selector - meta.property-name
' ^^^^^^^^^^^^^^^^^^ source.css.embedded.html meta.property-list.css meta.block.css meta.property-name.css
' ^ source.css.embedded.html meta.property-list.css meta.block.css - meta.selector - meta.property-name - meta.property-value
' ^^^^^^^^^^^^^^^^^^^ source.css.embedded.html meta.property-list.css meta.block.css meta.property-value.css
' ^^^ source.css.embedded.html meta.property-list.css meta.block.css - meta.selector - meta.property-name - meta.property-value
' ^^^^ entity.other.attribute-name.class.css - meta.embedded.asp
' ^ punctuation.definition.entity.css
' ^^^^^^^^^^^^^ entity.other.attribute-name.class.css meta.embedded.asp
' ^^^ punctuation.section.embedded.begin.asp
' ^^^^^^^^ source.asp.embedded.html variable.other.asp
' ^^ punctuation.section.embedded.end.asp
' ^^^^^^^ entity.other.attribute-name.class.css - meta.embedded.asp
' ^ punctuation.section.block.begin.css
' ^^^ support.type.property-name.css - meta.embedded
' ^^^^^^^^^ support.type.property-name.css meta.embedded.asp
' ^^^ punctuation.section.embedded.begin.asp
' ^^^^ source.asp.embedded.html variable.other.asp
' ^^ punctuation.section.embedded.end.asp
' ^^^^^^ support.type.property-name.css - meta.embedded
' ^ punctuation.separator.key-value.css
' ^^ support.constant.property-value.css - meta.embedded
' ^^^^^^^^^^ support.constant.property-value.css meta.embedded.asp
' ^^^ punctuation.section.embedded.begin.asp
' ^^^^^ source.asp.embedded.html variable.other.asp
' ^^ punctuation.section.embedded.end.asp
' ^^^^^^ support.constant.property-value.css - meta.embedded
' ^ punctuation.terminator.rule.css
' ^ punctuation.section.block.end.css
</style>
</head>
<body>
<%
Expand Down
Loading

0 comments on commit 6e8eb50

Please sign in to comment.