Merge pull request #335 from NullVoxPopuli/add-css-highlighting

Use Starbeam for the demo app / site

.changeset/grumpy-timers-warn.md

@@ -0,0 +1,5 @@
+---
+'highlightjs-glimmer': minor
+---
+
+Support <style> tags

.eslintignore

@@ -1,6 +1,12 @@
 dist/
-vendor/
+demo/
+highlight
 coverage/
 node_modules/
 .git/
 .github/
+
+# All folders
+*/
+.github/
+.changeset/

.eslintrc.cjs

@@ -1,33 +1,34 @@
 // .eslintrc.js
 'use strict';
 
-const { configs } = require('@nullvoxpopuli/eslint-configs');
-const {
-  jsBase,
-  moduleBase,
-  baseRulesAppliedLast,
-} = require('@nullvoxpopuli/eslint-configs/configs/base');
+const { configBuilder } = require('@nullvoxpopuli/eslint-configs/configs/node');
+const { forFiles } = require('@nullvoxpopuli/eslint-configs/configs/-utils');
 
-const mjs = configs.node();
+const config = configBuilder();
+const modulesBase = config.modules.js;
 
 module.exports = {
-  ...mjs,
   overrides: [
-    ...mjs.overrides,
     // pull this in to eslint-configs?
     {
-      ...jsBase,
       files: ['*.html'],
-      plugins: [moduleBase.plugins, 'html'].flat(),
+      plugins: [modulesBase.plugins, 'html'].flat(),
+      parser: '@babel/eslint-parser',
       parserOptions: {
+        requireConfigFile: false,
         sourceType: 'module',
         ecmaVersion: 2021,
       },
+      env: {
+        browser: true,
+        node: false,
+      },
       extends: ['eslint:recommended', 'prettier'],
       rules: {
-        ...jsBase.rules,
-        ...baseRulesAppliedLast,
+        ...modulesBase.rules,
+        'no-console': 'off',
       },
     },
+    forFiles('*.cjs', config.commonjs.js),
   ],
 };

.prettierignore

@@ -0,0 +1,7 @@
+# All folders
+*/
+.github/
+.changeset/
+*.md
+*.json5
+*.yaml

.prettierrc.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+module.exports = {
+  singleQuote: true,
+  printWidth: 100,
+  overrides: [
+    {
+      files: ['**/*.hbs'],
+      options: {
+        singleQuote: false,
+      },
+    },
+    {
+      files: ['**/*.gjs', '**/*.gts'],
+      plugins: ['prettier-plugin-ember-template-tag'],
+    },
+  ],
+};

demo/.eslintrc.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const { configs } = require('@nullvoxpopuli/eslint-configs');
+
+module.exports = configs.crossPlatform();

demo/.prettierrc.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+module.exports = {
+  singleQuote: true,
+  printWidth: 100,
+  overrides: [
+    {
+      files: ['**/*.hbs'],
+      options: {
+        singleQuote: false,
+      },
+    },
+    {
+      files: ['**/*.gjs', '**/*.gts'],
+      plugins: ['prettier-plugin-ember-template-tag'],
+    },
+  ],
+};

demo/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
+    "lint:js": "eslint .",
+    "lint:js:fix": "eslint . --fix",
+    "lint:prettier": "prettier --check .",
+    "lint:prettier:fix": "prettier --write ."
+  },
+  "devDependencies": {
+    "@nullvoxpopuli/eslint-configs": "^3.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
+    "concurrently": "^8.2.0",
+    "eslint": "^8.43.0",
+    "prettier": "^2.8.8",
+    "typescript": "^5.1.3"
+  }
+}

demo/samples.js

@@ -1,4 +1,5 @@
 // @ts-check
+/* eslint-disable no-useless-escape */
 
 /**
  * @typedef {Object} Sample
@@ -84,6 +85,20 @@ export const glimmer = {
     {{textarea}}
   {{/if}}
 {{/block-component}}
+
+
+<style data-demo="true" data-x={{(foo "bar")}}>
+  button {
+    font-weight: bold;
+    text-decoration: underline;
+    color: red;
+    background: #554433;
+  }
+
+  [type="button"] {
+    border: 1px solid;
+  }
+</style>
 `,
 };
 
@@ -104,6 +119,12 @@ export default class Hello {
     <button {{on 'click' @onClick}}>
       Hello, <Name @name={{this.name}} />!
     </button>
+
+    <style scoped>
+      button {
+        background: transparent;
+      }
+    </style>
   </template>
 }
 `,
@@ -128,6 +149,12 @@ const setScrollPosition = modifier((element, [position]) => {
       Item #{{plusOne index}}: {{item}}
     {{/each}}
   </div>
+
+  <style>
+    .scroll-container {
+      border: 1px solid;
+    }
+  </style>
 </template>
   `,
 };

highlightjs-glimmer/dist/glimmer.cjs.cjs

@@ -235,7 +235,39 @@ function glimmer(hljs) {
     }
   ];
   STRING.variants.forEach((variant) => variant.contains.push(...MUSTACHE_EXPRESSION));
+  const STYLE_TAG = {
+    className: "tag",
+    /*
+        The lookahead pattern (?=...) ensures that 'begin' only matches
+        '<style' as a single word, followed by a whitespace or an
+        ending bracket.
+        */
+    begin: regex.concat(
+      /<:?/,
+      regex.lookahead(regex.concat("style", regex.either(/\/>/, />/, /\s/)))
+    ),
+    end: /\/?>/,
+    contains: [
+      OPERATORS,
+      ARGUMENTS,
+      TAG_COMMENT,
+      BLOCK_PARAMS,
+      THIS_EXPRESSION,
+      ...MUSTACHE_EXPRESSION,
+      ATTRIBUTES,
+      STRING,
+      ABS_NAME
+    ],
+    starts: {
+      className: "tag",
+      end: /<\/style>/,
+      returnEnd: true,
+      excludeEnd: false,
+      subLanguage: ["css", "glimmer"]
+    }
+  };
   const ANGLE_BRACKET_BLOCK = [
+    STYLE_TAG,
     {
       className: "tag",
       begin: regex.concat(

highlightjs-glimmer/src/glimmer.js

@@ -251,7 +251,40 @@ export default function glimmer(hljs) {
 
   STRING.variants.forEach((variant) => variant.contains.push(...MUSTACHE_EXPRESSION));
 
+  const STYLE_TAG = {
+    className: 'tag',
+    /*
+        The lookahead pattern (?=...) ensures that 'begin' only matches
+        '<style' as a single word, followed by a whitespace or an
+        ending bracket.
+        */
+    begin: regex.concat(
+      /<:?/,
+      regex.lookahead(regex.concat('style', regex.either(/\/>/, />/, /\s/)))
+    ),
+    end: /\/?>/,
+    contains: [
+      OPERATORS,
+      ARGUMENTS,
+      TAG_COMMENT,
+      BLOCK_PARAMS,
+      THIS_EXPRESSION,
+      ...MUSTACHE_EXPRESSION,
+      ATTRIBUTES,
+      STRING,
+      ABS_NAME,
+    ],
+    starts: {
+      className: 'tag',
+      end: /<\/style>/,
+      returnEnd: true,
+      excludeEnd: false,
+      subLanguage: ['css', 'glimmer'],
+    },
+  };
+
   const ANGLE_BRACKET_BLOCK = [
+    STYLE_TAG,
     {
       className: 'tag',
       begin: regex.concat(