codemirror-textmate/demo/tm/grammars/styled.tmLanguage.json

Textmate based tokenization for CodeMirror

{
    "fileTypes": ["js", "jsx", "ts", "tsx", "vue"],
    "injectionSelector": "L:source -comment -string",
    "patterns": [
      {
        "contentName": "source.css.scss",
        "begin": "(?:([\\s\\S][sS][tT][yY][lL][eE][dD](?:<[_$[:alpha:]][_$[[:alnum:][, '\"]]]+>)?(?:\\.[_$[:alpha:]][_$[:alnum:]]*|\\(['\"][_$[:alpha:]][_$[:alnum:]]*['\"]\\)|\\([_$[:alpha:]][_$\\.[:alnum:]]*(?:\\s+as\\s+.*?)?\\)))|(css|keyframes|injectGlobal|createGlobalStyle))\\s*(`)",
        "beginCaptures": {
          "1": {
            "patterns": [
              {
                "include": "source.ts#expression"
              }
            ]
          },
          "2": {
            "name": "entity.name.function.tagged-template.js"
          },
          "3": {
            "name": "punctuation.definition.string.template.begin.js string.template.js"
          }
        },
        "end": "`",
        "endCaptures": {
          "0": {
            "name": "punctuation.definition.string.template.end.js string.template.js"
          }
        },
        "patterns": [
          {
            "include": "source.css.styled"
          }
        ]
      },
      {
        "contentName": "source.css.scss",
        "begin": "(\\.)(extend)(`)",
        "beginCaptures": {
          "1": {
            "name": "punctuation.accessor.js"
          },
          "2": {
            "name": "entity.name.function.tagged-template.js"
          },
          "3": {
            "name": "punctuation.definition.string.template.begin.js string.template.js"
          }
        },
        "end": "`",
        "endCaptures": {
          "0": {
            "name": "punctuation.definition.string.template.end.js string.template.js"
          }
        },
        "patterns": [
          {
            "include": "source.css.styled"
          }
        ]
      },
      {
        "contentName": "source.css.scss",
        "begin": "([_$[:alpha:]][_$[:alnum:]]*\\.withComponent\\((?:['\"][_$[:alpha:]][_$[:alnum:]]*['\"]|[_$[:alpha:]][_$\\.[:alnum:]]*)\\))\\s*(?:(\\.)(extend))?(`)",
        "beginCaptures": {
          "1": {
            "patterns": [
              {
                "include": "source.ts#expression"
              }
            ]
          },
          "2": {
            "name": "punctuation.accessor.js"
          },
          "3": {
            "name": "entity.name.function.tagged-template.js variable.other.property.js"
          },
          "4": {
            "name": "punctuation.definition.string.template.begin.js string.template.js"
          }
        },
        "end": "`",
        "endCaptures": {
          "0": {
            "name": "punctuation.definition.string.template.end.js string.template.js"
          }
        },
        "patterns": [
          {
            "include": "source.css.styled"
          }
        ]
      },
      {
        "contentName": "source.css.scss",
        "begin": "([mM][eE][dD][iI][aA]\\.[[:alpha:]][[:alnum:]]*(?:\\(.*?\\))?)\\s*(`)",
        "beginCaptures": {
          "1": {
            "patterns": [
              {
                "include": "source.ts#expression"
              }
            ]
          },
          "2": {
            "name": "punctuation.definition.string.template.begin.js string.template.js"
          }
        },
        "end": "`",
        "endCaptures": {
          "0": {
            "name": "punctuation.definition.string.template.end.js string.template.js"
          }
        },
        "patterns": [
          {
            "include": "source.css.styled"
          }
        ]
      },
      {
        "begin": "(?:([\\s\\S][sS][tT][yY][lL][eE][dD](?:<[_$[:alpha:]][_$[:alnum:]]+>)?(?:\\.[_$[:alpha:]][_$[:alnum:]]*|\\(['\"][_$[:alpha:]][_$[:alnum:]]*['\"]\\)|\\([_$[:alpha:]][_$\\.[:alnum:]]*(?:\\s+as\\s+.*?)?\\)))|(\\.)(extend))(?=\\.attrs\\s*\\()",
        "beginCaptures": {
          "1": {
            "patterns": [
              {
                "include": "source.ts#expression"
              }
            ]
          },
          "2": {
            "name": "punctuation.accessor.js"
          },
          "3": {
            "name": "entity.name.function.tagged-template.js"
          }
        },
        "end": "(?<!\\G)(?<=`)",
        "patterns": [
          {
            "contentName": "source.css.scss",
            "begin": "`",
            "beginCaptures": {
              "0": {
                "name": "punctuation.definition.string.template.begin.js string.template.js"
              }
            },
            "end": "`",
            "endCaptures": {
              "0": {
                "name": "punctuation.definition.string.template.begin.js string.template.js"
              }
            },
            "patterns": [
              {
                "include": "source.css.styled"
              }
            ]
          },
          {
            "include": "source.ts#expression"
          }
        ]
      }
    ],
    "scopeName": "styled"
  }