Editor and linting

Syntax highlighting

• The css template is plain CSS, so any editor plugin that highlights css tagged templates works.
• In VS Code, the vscode-styled-components extension highlights css`...` templates. It also offers CSS completions inside them.
• The template inside <style jsx> is an untagged template literal. Editor plugins that look for a css tag do not treat it as CSS. Use css if you want highlighting.
• Scope markers such as s:c-1a2b3c-0 only exist in the compiled output, so you never write them by hand.

CSS comments in VS Code

• Inside <style jsx>, the VS Code comment command writes a JSX comment ({/* ... */}), which is not valid CSS.
• The keybindings below toggle CSS comments (/* ... */) instead.
• ctrl+shift+/ toggles a comment on the current line. No selection is needed.
• ctrl+shift+oem_7 toggles a comment around the selected lines. oem_7 is the ' key on a US keyboard.
• Change the keys as needed. Put the entries in your keybindings.json (command palette, Preferences: Open Keyboard Shortcuts (JSON)).

[
  {
    // Toggle a comment on the current line. No selection needed.
    "key": "ctrl+shift+/",
    "command": "runCommands",
    "args": {
      "commands": [
        "cursorEnd", // so the cursor stays on the same line
        "cursorHomeSelect",
        {
          "command": "editor.action.insertSnippet",
          "args": {
            "snippet": "${TM_SELECTED_TEXT/(\\/\\* )(.+)( \\*\\/)|(.*)/$2${4:+/* }$4${4:+ */}/}",
          },
        },
      ],
    },
    "when": "resourceExtname =~ /\\.(js|ts|r)(?!on)/",
  },
  {
    // Toggle a comment around a selected block.
    "key": "ctrl+shift+oem_7",
    "command": "editor.action.insertSnippet",
    "args": {
      "snippet": "${TM_SELECTED_TEXT/(\\/\\*)([\\s\\S]*?)(\\*\\/)|([\\s\\S]+)/$2${4:+/* }$4${4:+ */}/}",
    },
    "when": "resourceExtname =~ /\\.(js|ts|r)(?!on)/",
  },
]

• The when clause matches .js, .jsx, .ts and .tsx files, and skips .json. Edit it to match your file types.
• These keybindings were shared by @AverTry in #40.

Linting

• A bare css`...`; statement is an unused expression to linters. The no-unused-expressions rule reports it as Expected an assignment or function call and instead saw an expression.
• Set allowTaggedTemplates: true on the rule to allow tagged templates used as statements.

ESLint:

// eslint.config.js
export default [
  {
    rules: {
      'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
    },
  },
];

typescript-eslint replaces the core rule, so turn the core rule off and set the option on its own rule:

// eslint.config.js
export default [
  {
    rules: {
      'no-unused-expressions': 'off',
      '@typescript-eslint/no-unused-expressions': ['error', { allowTaggedTemplates: true }],
    },
  },
];

oxlint takes the same option:

// .oxlintrc.json
{
  "rules": {
    "no-unused-expressions": ["error", { "allowTaggedTemplates": true }],
  },
}