Skip to content
This repository has been archived by the owner on Jun 30, 2024. It is now read-only.

Commit

Permalink
* Set colorize-fixtures as the folder for extensionHost (debuggin) (#281
Browse files Browse the repository at this point in the history 
)

The issue with #174 was the main regex, specially the beginning match, which only matches an expression which ends with a back tick. When you use multiline properties your top line no longer ends the same way (`styled.div<{`). This means we need to set a new beginning match. I tried doing this as a new rule but it just didn't work, instead I split the regex into 2 (non-captured) groups and the second group matches:
```
}>`
```

and sets that as the beginning match, so anything after the above will be treated as SCSS, up until the next backtick

* [before](https://regex101.com/r/yi6jOv/1/)
* [after](https://regex101.com/r/mNfB4E/1/)
* Set colorize-fixtures as the folder for extensionHost (debugging)
* create a multiline fixture from issue #174
* Fixed by creating two groups, one which was the same as before, and one which adds support for }>` syntax as the beginning. Tests have passed
  • Loading branch information
@jasonwilliams
jasonwilliams authored Apr 23, 2021
1 parent 495723d commit 98e0f90
Show file tree
Hide file tree
Showing 4 changed files with 312 additions and 2 deletions.
5 changes: 4 additions & 1 deletion .vscode/launch.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
"args": [
"--extensionDevelopmentPath=${workspaceRoot}",
"${workspaceFolder}/src/tests/suite/colorize-fixtures"
],
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"sourceMaps": true,
"preLaunchTask": "npm: watch"
Expand Down
5 changes: 5 additions & 0 deletions src/tests/suite/colorize-fixtures/typescript-multiline.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const StyledBroken = styled.div<{
multipleLines: boolean;
}>`
background: red;
`;
299 changes: 299 additions & 0 deletions src/tests/suite/colorize-results/typescript-multiline_ts.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,299 @@
[
{
"c": "const",
"t": "source.ts meta.var.expr.ts storage.type.ts",
"r": {
"dark_plus": "storage.type: #569CD6",
"light_plus": "storage.type: #0000FF",
"dark_vs": "storage.type: #569CD6",
"light_vs": "storage.type: #0000FF",
"hc_black": "storage.type: #569CD6"
}
},
{
"c": " ",
"t": "source.ts meta.var.expr.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "StyledBroken",
"t": "source.ts meta.var.expr.ts meta.var-single-variable.expr.ts meta.definition.variable.ts variable.other.constant.ts",
"r": {
"dark_plus": "variable.other.constant: #4FC1FF",
"light_plus": "variable.other.constant: #0070C1",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "variable: #9CDCFE"
}
},
{
"c": " ",
"t": "source.ts meta.var.expr.ts meta.var-single-variable.expr.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "=",
"t": "source.ts meta.var.expr.ts keyword.operator.assignment.ts",
"r": {
"dark_plus": "keyword.operator: #D4D4D4",
"light_plus": "keyword.operator: #000000",
"dark_vs": "keyword.operator: #D4D4D4",
"light_vs": "keyword.operator: #000000",
"hc_black": "keyword.operator: #D4D4D4"
}
},
{
"c": " ",
"t": "source.ts meta.var.expr.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "styled",
"t": "source.ts meta.var.expr.ts meta.function-call.ts variable.other.object.ts",
"r": {
"dark_plus": "variable: #9CDCFE",
"light_plus": "variable: #001080",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "variable: #9CDCFE"
}
},
{
"c": ".",
"t": "source.ts meta.var.expr.ts meta.function-call.ts punctuation.accessor.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "div",
"t": "source.ts meta.var.expr.ts meta.function-call.ts entity.name.function.ts",
"r": {
"dark_plus": "entity.name.function: #DCDCAA",
"light_plus": "entity.name.function: #795E26",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "entity.name.function: #DCDCAA"
}
},
{
"c": "<",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts punctuation.definition.typeparameters.begin.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "{",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts punctuation.definition.block.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": " ",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts meta.field.declaration.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "multipleLines",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts meta.field.declaration.ts meta.definition.property.ts variable.object.property.ts",
"r": {
"dark_plus": "variable: #9CDCFE",
"light_plus": "variable: #001080",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "variable: #9CDCFE"
}
},
{
"c": ":",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts meta.field.declaration.ts meta.type.annotation.ts keyword.operator.type.annotation.ts",
"r": {
"dark_plus": "keyword.operator: #D4D4D4",
"light_plus": "keyword.operator: #000000",
"dark_vs": "keyword.operator: #D4D4D4",
"light_vs": "keyword.operator: #000000",
"hc_black": "keyword.operator: #D4D4D4"
}
},
{
"c": " ",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts meta.field.declaration.ts meta.type.annotation.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "boolean",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts meta.field.declaration.ts meta.type.annotation.ts support.type.primitive.ts",
"r": {
"dark_plus": "support.type: #4EC9B0",
"light_plus": "support.type: #267F99",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "support.type: #4EC9B0"
}
},
{
"c": ";",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts punctuation.terminator.statement.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "}>",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "`",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts punctuation.definition.string.template.begin.js string.template.js",
"r": {
"dark_plus": "string: #CE9178",
"light_plus": "string: #A31515",
"dark_vs": "string: #CE9178",
"light_vs": "string: #A31515",
"hc_black": "string: #CE9178"
}
},
{
"c": " ",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts source.css.scss",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "background",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts source.css.scss meta.property-name.scss support.type.property-name.css",
"r": {
"dark_plus": "support.type.property-name: #9CDCFE",
"light_plus": "support.type.property-name: #FF0000",
"dark_vs": "support.type.property-name: #9CDCFE",
"light_vs": "support.type.property-name: #FF0000",
"hc_black": "support.type.property-name: #D4D4D4"
}
},
{
"c": ":",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts source.css.scss punctuation.separator.key-value.scss",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": " ",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts source.css.scss",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "red",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts source.css.scss meta.property-value.scss support.constant.color.w3c-standard-color-name.css",
"r": {
"dark_plus": "support.constant.color: #CE9178",
"light_plus": "support.constant.color: #0451A5",
"dark_vs": "default: #D4D4D4",
"light_vs": "support.constant.color: #0451A5",
"hc_black": "support.constant.color: #CE9178"
}
},
{
"c": ";",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts source.css.scss punctuation.terminator.rule.scss",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
},
{
"c": "`",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts punctuation.definition.string.template.end.js string.template.js",
"r": {
"dark_plus": "string: #CE9178",
"light_plus": "string: #A31515",
"dark_vs": "string: #CE9178",
"light_vs": "string: #A31515",
"hc_black": "string: #CE9178"
}
},
{
"c": ";",
"t": "source.ts meta.var.expr.ts meta.type.parameters.ts meta.object.type.ts punctuation.terminator.statement.ts",
"r": {
"dark_plus": "default: #D4D4D4",
"light_plus": "default: #000000",
"dark_vs": "default: #D4D4D4",
"light_vs": "default: #000000",
"hc_black": "default: #FFFFFF"
}
}
]
5 changes: 4 additions & 1 deletion syntaxes/styled-components.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"patterns": [
{
"contentName": "source.css.scss",
"begin": "(?:([\\s\\S][sS][tT][yY][lL][eE][dD](?:<.+>(?=\\())?(?:\\.[_$[:alpha:]][_$[:alnum:]]*|\\s*\\(['\"][_$[:alpha:]][_$[:alnum:]]*['\"]\\)|\\s*\\((.+)\\))(?:\\s*<.+>)?\\(?)|(css|keyframes|injectGlobal|createGlobalStyle|stylesheet)(<.+>)?)\\s*(\\([\\{\\}\\w,\\:\\s]+?\\)\\s*=>\\s*)?(`)",
"begin": "(?:(?:([\\s\\S][sS][tT][yY][lL][eE][dD](?:<.+>(?=\\())?(?:\\.[_$[:alpha:]][_$[:alnum:]]*|\\s*\\(['\"][_$[:alpha:]][_$[:alnum:]]*['\"]\\)|\\s*\\((.+)\\))(?:\\s*<.+>)?\\(?)|(css|keyframes|injectGlobal|createGlobalStyle|stylesheet)(<.+>)?)\\s*(\\([\\{\\}\\w,\\:\\s]+?\\)\\s*=>\\s*)?(`))|}>(`)",
"beginCaptures": {
"1": {
"patterns": [
Expand Down Expand Up @@ -39,6 +39,9 @@
},
"6": {
"name": "punctuation.definition.string.template.begin.js string.template.js"
},
"7": {
"name": "punctuation.definition.string.template.begin.js string.template.js"
}
},
"end": "`",
Expand Down

0 comments on commit 98e0f90

Please sign in to comment.