@actualwave/codemirror-lang-embed-css 0.1.0

package/index.js

@@ -0,0 +1,35 @@
+const { cssLanguage, css } = require('@codemirror/lang-css');
+
+// Matches the bare `css` tag as well as any styled-components-shaped tag:
+// `styled.View`/`styled.Text`/... (MemberExpression) and `styled(Component)`
+// (CallExpression, which readIdentifierPath collapses to the callee's own
+// path, so it also resolves to a `['styled', ...]` path).
+function matchCssTag(tagPath) {
+  return tagPath[0] === 'css' || tagPath[0] === 'styled';
+}
+
+// css`...`/styled`...` content is a bare declaration list (`color: #fff;
+// padding: 12px;`), not a full stylesheet with a `selector { ... }` wrapper.
+// Parsed with cssLanguage's default "StyleSheet" top rule, the parser treats
+// that content as sitting *before* any rule block, so cssCompletionSource
+// (which only offers property names when the cursor's ancestor is "Block" or
+// "Styles" — see @codemirror/lang-css's completion.js) falls back to
+// selector/tag-name completion instead (hence "main"/"small"/"summary").
+// @codemirror/lang-html hits this exact same shape for `style="..."`
+// attribute values and fixes it by reparsing with the grammar's alternate
+// "Styles" top rule (see its dist: `cssLanguage.parser.configure({top:
+// "Styles"})`) — same grammar, same NodeSet, so the languageDataProp
+// (autocomplete source) attached at cssLanguage's original definition still
+// resolves correctly off the "Styles" top node. Only `.parser` is used here;
+// embed-core's registry never touches other Language fields (see resolve()).
+const stylesParser = cssLanguage.parser.configure({ top: 'Styles' });
+
+function createEmbedding() {
+  return {
+    matcher: matchCssTag,
+    language: { parser: stylesParser },
+    extension: css().support,
+  };
+}
+
+module.exports = { createEmbedding };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@actualwave/codemirror-lang-embed-css",
+  "version": "0.1.0",
+  "description": "Registers `css`/`styled.*`/`styled(...)` tagged-template tags for embedded CSS highlighting inside JS/TSX",
+  "main": "index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/burdiuz/codemorror-lang-modules.git",
+    "directory": "packages/embed-css"
+  },
+  "bugs": {
+    "url": "https://github.com/burdiuz/codemorror-lang-modules/issues"
+  },
+  "homepage": "https://github.com/burdiuz/codemorror-lang-modules/tree/main/packages/embed-css",
+  "dependencies": {
+    "@actualwave/codemirror-lang-embed-core": "*"
+  },
+  "peerDependencies": {
+    "@codemirror/lang-css": "^6.0.0"
+  }
+}