@actualwave/codemirror-lang-embed-tailwind 0.0.0-stage → 0.1.0

package/completion.js

@@ -0,0 +1,59 @@
+const { syntaxTree } = require('@codemirror/language');
+const { getTaggedTemplateTagPath, templateContentRanges, docAsInput } = require('@actualwave/codemirror-lang-embed-core');
+const { TAILWIND_CLASS_NAMES } = require('./data.js');
+
+// Finds the innermost TemplateString node at `pos` (if any) whose tag is `tw`.
+// Mirrors embed-core's getTaggedTemplateTagPath usage in parseMixed, but
+// driving a CompletionSource instead of a nested parser — see TODO.md item 6:
+// "same tag-name-matching primitive used for parseMixed, just driving
+// completions instead of a sub-parser."
+function findTwTemplateAt(state, pos) {
+  const tree = syntaxTree(state);
+  const node = tree.resolveInner(pos, -1);
+  for (let cur = node; cur; cur = cur.parent) {
+    if (cur.name !== 'TemplateString') continue;
+    const tagPath = getTaggedTemplateTagPath(cur, docAsInput(state.doc));
+    if (tagPath && tagPath.length === 1 && tagPath[0] === 'tw') return cur;
+  }
+  return null;
+}
+
+function isInsideContentRanges(pos, ranges) {
+  return ranges.some((r) => pos >= r.from && pos <= r.to);
+}
+
+/**
+ * A `CompletionSource` (see @codemirror/autocomplete) that suggests Tailwind
+ * (twrnc) class names while the cursor is inside a `` tw`...` `` tagged
+ * template's literal content, and declines (returns null) everywhere else so
+ * normal JS/TSX completions are unaffected.
+ */
+function tailwindCompletionSource(context) {
+  const templateNode = findTwTemplateAt(context.state, context.pos);
+  if (!templateNode) return null;
+
+  const ranges = templateContentRanges(templateNode);
+  if (!isInsideContentRanges(context.pos, ranges)) return null;
+
+  const word = context.matchBefore(/[^\s`]*/);
+  if (!word) return null;
+  if (word.from === word.to && !context.explicit) return null;
+
+  const query = word.text;
+  const from = word.from;
+
+  // Arbitrary-value bracket syntax (bg-[#123456], p-[13px]) — don't try to
+  // complete inside the brackets, just don't offer suggestions there (stretch
+  // goal per TODO.md item 6; v1 just avoids breaking on it).
+  if (query.includes('[')) return null;
+
+  const options = TAILWIND_CLASS_NAMES.filter((name) => name.startsWith(query)).map((label) => ({
+    label,
+    type: 'class',
+  }));
+  if (!options.length) return null;
+
+  return { from, options, validFor: /^[^\s`]*$/ };
+}
+
+module.exports = { tailwindCompletionSource, findTwTemplateAt, isInsideContentRanges };

package/data.js

@@ -0,0 +1,135 @@
+// Categorized Tailwind/twrnc utility class list, generated from small scale
+// tables rather than hand-listed one by one — see TODO.md item 6: "Category
+// must be data-driven per class, not prefix-derived. Tailwind overloads
+// prefixes across categories (`text-lg` is typography, `text-red-500` is
+// color, `text-center` is alignment/layout, all starting with `text-`)."
+// Web-only categories (grid, filters, tables, SVG) are intentionally omitted
+// — this targets the RN-relevant subset twrnc actually implements.
+
+const SPACING_SCALE = [
+  '0', 'px', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '5', '6', '7', '8',
+  '9', '10', '11', '12', '14', '16', '20', '24', '28', '32', '36', '40', '44',
+  '48', '52', '56', '60', '64', '72', '80', '96',
+];
+
+const FRACTIONS = [
+  '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', '1/5', '2/5', '3/5', '4/5',
+  '1/6', '2/6', '3/6', '4/6', '5/6',
+  '1/12', '2/12', '3/12', '4/12', '5/12', '6/12', '7/12', '8/12', '9/12', '10/12', '11/12',
+  'full',
+];
+
+const COLOR_NAMES = [
+  'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow',
+  'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet',
+  'purple', 'fuchsia', 'pink', 'rose',
+];
+
+const COLOR_SHADES = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
+
+const OPACITY_SCALE = ['0', '5', '10', '20', '25', '30', '40', '50', '60', '70', '75', '80', '90', '95', '100'];
+
+const ROUNDED_SIZES = ['none', 'sm', '', 'md', 'lg', 'xl', '2xl', '3xl', 'full'];
+const ROUNDED_CORNERS = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'];
+
+// class -> category, built up by the add() calls below.
+const CLASSES = new Map();
+
+function add(category, ...names) {
+  for (const name of names) {
+    if (name) CLASSES.set(name, category);
+  }
+}
+
+function addScaled(category, prefixes, scales) {
+  for (const prefix of prefixes) {
+    for (const scale of scales) {
+      add(category, `${prefix}-${scale}`);
+    }
+  }
+}
+
+// --- Spacing: padding, margin (+ negative), gap, space-between ---
+addScaled('spacing', ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'], SPACING_SCALE);
+addScaled('spacing', ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'], SPACING_SCALE);
+for (const prefix of ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my']) {
+  for (const scale of SPACING_SCALE) add('spacing', `-${prefix}-${scale}`);
+}
+addScaled('spacing', ['gap', 'gap-x', 'gap-y'], SPACING_SCALE);
+addScaled('spacing', ['space-x', 'space-y'], SPACING_SCALE);
+add('spacing', 'space-x-reverse', 'space-y-reverse');
+
+// --- Sizing: width/height (+ min/max), fractions, full/screen/auto ---
+const SIZING_PREFIXES = ['w', 'h', 'min-w', 'min-h', 'max-w', 'max-h'];
+addScaled('sizing', SIZING_PREFIXES, SPACING_SCALE);
+addScaled('sizing', SIZING_PREFIXES, FRACTIONS);
+for (const prefix of SIZING_PREFIXES) {
+  add('sizing', `${prefix}-auto`, `${prefix}-screen`, `${prefix}-min`, `${prefix}-max`, `${prefix}-fit`);
+}
+
+// --- Layout: display, flexbox container/item, alignment, order ---
+add('layout', 'flex', 'hidden', 'inline', 'inline-block', 'block');
+add('layout', 'flex-row', 'flex-row-reverse', 'flex-col', 'flex-col-reverse');
+add('layout', 'flex-wrap', 'flex-wrap-reverse', 'flex-nowrap');
+add('layout', 'flex-1', 'flex-auto', 'flex-initial', 'flex-none');
+add('layout', 'grow', 'grow-0', 'shrink', 'shrink-0');
+addScaled('layout', ['basis'], SPACING_SCALE);
+addScaled('layout', ['basis'], FRACTIONS);
+add('layout', 'basis-auto');
+add('layout', 'items-start', 'items-end', 'items-center', 'items-baseline', 'items-stretch');
+add('layout', 'content-start', 'content-end', 'content-center', 'content-between', 'content-around', 'content-evenly');
+add('layout', 'self-auto', 'self-start', 'self-end', 'self-center', 'self-stretch', 'self-baseline');
+add('layout', 'justify-start', 'justify-end', 'justify-center', 'justify-between', 'justify-around', 'justify-evenly');
+for (let i = 1; i <= 12; i++) add('layout', `order-${i}`);
+add('layout', 'order-first', 'order-last', 'order-none');
+
+// --- Positioning: position, inset/top/right/bottom/left, z-index ---
+add('positioning', 'absolute', 'relative', 'static');
+addScaled('positioning', ['inset', 'inset-x', 'inset-y', 'top', 'right', 'bottom', 'left'], SPACING_SCALE);
+add('positioning', 'z-0', 'z-10', 'z-20', 'z-30', 'z-40', 'z-50', 'z-auto');
+
+// --- Typography: size/weight/style/align/decoration/transform/spacing ---
+add('typography', 'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl', 'text-6xl');
+add('typography', 'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black');
+add('typography', 'italic', 'not-italic');
+add('typography', 'text-left', 'text-center', 'text-right', 'text-justify');
+add('typography', 'underline', 'line-through', 'no-underline');
+add('typography', 'uppercase', 'lowercase', 'capitalize', 'normal-case');
+add('typography', 'tracking-tighter', 'tracking-tight', 'tracking-normal', 'tracking-wide', 'tracking-wider', 'tracking-widest');
+add('typography', 'leading-none', 'leading-tight', 'leading-snug', 'leading-normal', 'leading-relaxed', 'leading-loose');
+addScaled('typography', ['leading'], ['3', '4', '5', '6', '7', '8', '9', '10']);
+
+// --- Colors: background/text/border color scales (distinct strings from the
+// typography/border families above — e.g. `text-red-500` vs `text-lg`) ---
+for (const prefix of ['bg', 'text', 'border']) {
+  for (const color of COLOR_NAMES) {
+    for (const shade of COLOR_SHADES) add('colors', `${prefix}-${color}-${shade}`);
+  }
+  add('colors', `${prefix}-black`, `${prefix}-white`, `${prefix}-transparent`, `${prefix}-current`);
+}
+
+// --- Borders: width/side/style/radius (border *color* lives in "colors") ---
+add('borders', 'border', 'border-0', 'border-2', 'border-4', 'border-8');
+for (const side of ['t', 'r', 'b', 'l']) {
+  add('borders', `border-${side}`, `border-${side}-0`, `border-${side}-2`, `border-${side}-4`, `border-${side}-8`);
+}
+add('borders', 'border-solid', 'border-dashed', 'border-dotted');
+for (const size of ROUNDED_SIZES) add('borders', size ? `rounded-${size}` : 'rounded');
+for (const corner of ROUNDED_CORNERS) {
+  for (const size of ROUNDED_SIZES) add('borders', size ? `rounded-${corner}-${size}` : `rounded-${corner}`);
+}
+
+// --- Effects: opacity, shadow ---
+for (const value of OPACITY_SCALE) add('effects', `opacity-${value}`);
+add('effects', 'shadow', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl', 'shadow-none');
+
+/** @type {ReadonlyMap<string, string>} className -> category */
+const TAILWIND_CLASSES = CLASSES;
+
+/** Sorted array of all known class names, for completion filtering. */
+const TAILWIND_CLASS_NAMES = Array.from(CLASSES.keys()).sort();
+
+/** All category names, in the order documented by TODO.md item 6. */
+const TAILWIND_CATEGORIES = ['layout', 'spacing', 'sizing', 'typography', 'colors', 'borders', 'effects', 'positioning'];
+
+module.exports = { TAILWIND_CLASSES, TAILWIND_CLASS_NAMES, TAILWIND_CATEGORIES };

package/decoration.js

@@ -0,0 +1,106 @@
+const { syntaxTree } = require('@codemirror/language');
+const { Decoration, ViewPlugin, EditorView } = require('@codemirror/view');
+const { RangeSetBuilder, Prec } = require('@codemirror/state');
+const { getTaggedTemplateTagPath, templateContentRanges, docAsInput } = require('@actualwave/codemirror-lang-embed-core');
+const { TAILWIND_CLASSES, TAILWIND_CATEGORIES } = require('./data.js');
+
+const TOKEN_RE = /[^\s`]+/g;
+
+const decorationByCategory = new Map(
+  TAILWIND_CATEGORIES.map((category) => [category, Decoration.mark({ class: `cm-tw-${category}` })]),
+);
+
+// Collects every `tw`-tagged TemplateString's content ranges that intersect
+// [from, to) — same tag-matching primitive embed-core uses for parseMixed and
+// completion.js uses for the CompletionSource, just driving decoration this
+// time (see TODO.md item 6).
+function twContentRangesIn(state, from, to) {
+  const ranges = [];
+  syntaxTree(state).iterate({
+    from,
+    to,
+    enter(node) {
+      if (node.name !== 'TemplateString') return;
+      const tagPath = getTaggedTemplateTagPath(node.node, docAsInput(state.doc));
+      if (!tagPath || tagPath.length !== 1 || tagPath[0] !== 'tw') return;
+      for (const range of templateContentRanges(node.node)) ranges.push(range);
+    },
+  });
+  return ranges;
+}
+
+function buildDecorations(view) {
+  const builder = new RangeSetBuilder();
+  const seen = [];
+  for (const { from, to } of view.visibleRanges) {
+    for (const range of twContentRangesIn(view.state, from, to)) {
+      seen.push(range);
+    }
+  }
+  // Visible ranges can overlap at chunk boundaries — dedupe by range identity
+  // (same node can't produce the same [from,to) twice from disjoint queries,
+  // but a template spanning multiple visible chunks could; sort+merge is
+  // unnecessary for correctness here since Decoration ranges just need
+  // ascending, non-overlapping input, and token matches within one template
+  // range never repeat).
+  seen.sort((a, b) => a.from - b.from || a.to - b.to);
+
+  const text = view.state.doc;
+  for (const { from, to } of seen) {
+    const chunk = text.sliceString(from, to);
+    TOKEN_RE.lastIndex = 0;
+    let match;
+    while ((match = TOKEN_RE.exec(chunk))) {
+      const token = match[0];
+      const category = TAILWIND_CLASSES.get(token);
+      if (!category) continue; // unknown/arbitrary-value token — leave undecorated (v1)
+      const start = from + match.index;
+      builder.add(start, start + token.length, decorationByCategory.get(category));
+    }
+  }
+  return builder.finish();
+}
+
+// Mark decorations nest by facet precedence — the higher-precedence one
+// becomes the *inner* DOM element (see @codemirror/view's Decoration.mark
+// doc comment). @codemirror/language's syntaxHighlighting() wraps its
+// treeHighlighter in Prec.high(...), so it paints `.tok-string` as the
+// innermost span around the whole `tw`-tagged template content. Without
+// out-precedencing that, our per-category `.cm-tw-*` span ends up as the
+// *outer* element and `.tok-string`'s own color always wins (an element's
+// own matching rule beats an ancestor's color regardless of specificity).
+// Prec.highest here makes ours the inner span instead, so it wins.
+const tailwindHighlightPlugin = Prec.highest(
+  ViewPlugin.fromClass(
+    class {
+      constructor(view) {
+        this.decorations = buildDecorations(view);
+      }
+
+      update(update) {
+        if (update.docChanged || update.viewportChanged) {
+          this.decorations = buildDecorations(update.view);
+        }
+      }
+    },
+    { decorations: (v) => v.decorations },
+  ),
+);
+
+// Default category colors. Downstream (react-native-codeditor's editor.html)
+// overrides these per active editor theme, the same way _themePackageMap
+// remaps @uiw theme exports — see TODO.md item 6's "Category colors need to
+// be defined per editor theme... not hardcoded" note. These are just the
+// standalone/demo defaults so the plugin isn't inert without that wiring.
+const tailwindHighlightTheme = EditorView.baseTheme({
+  '.cm-tw-layout': { color: '#569cd6' },
+  '.cm-tw-spacing': { color: '#9cdcfe' },
+  '.cm-tw-sizing': { color: '#4ec9b0' },
+  '.cm-tw-typography': { color: '#c586c0' },
+  '.cm-tw-colors': { color: '#ce9178' },
+  '.cm-tw-borders': { color: '#d7ba7d' },
+  '.cm-tw-effects': { color: '#b5cea8' },
+  '.cm-tw-positioning': { color: '#dcdcaa' },
+});
+
+module.exports = { tailwindHighlightPlugin, tailwindHighlightTheme };

package/index.js

@@ -0,0 +1,21 @@
+const { tailwindCompletionSource } = require('./completion.js');
+const { tailwindHighlightPlugin, tailwindHighlightTheme } = require('./decoration.js');
+
+// Unlike the other embed-* packages (embed-sql/embed-graphql/embed-css/
+// embed-sksl), Tailwind has no grammar to parse — `` tw`...` `` content is a
+// flat space-separated list of utility class names (see TODO.md item 6: "no
+// language structure inside `tw`...` ` to parse... this isn't a parseMixed
+// grammar problem like the other DSLs"). So instead of `createEmbedding()`
+// (matcher + nested Language for the tag registry), this package exports
+// `createSupportExtension(jsLanguageSupport)`, returning plain CM extensions
+// (a completion source + a decoration ViewPlugin) to merge into the JS/TSX
+// language's `support` array.
+function createSupportExtension(jsLanguageSupport) {
+  return [
+    jsLanguageSupport.language.data.of({ autocomplete: tailwindCompletionSource }),
+    tailwindHighlightPlugin,
+    tailwindHighlightTheme,
+  ];
+}
+
+module.exports = { createSupportExtension };

package/package.json

@@ -1,6 +1,25 @@
 {
   "name": "@actualwave/codemirror-lang-embed-tailwind",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Tailwind (twrnc) class-name completion and category-colored highlighting inside `tw` tagged templates in JS/TSX",
+  "main": "index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/burdiuz/codemorror-lang-modules.git",
+    "directory": "packages/embed-tailwind"
+  },
+  "bugs": {
+    "url": "https://github.com/burdiuz/codemorror-lang-modules/issues"
+  },
+  "homepage": "https://github.com/burdiuz/codemorror-lang-modules/tree/main/packages/embed-tailwind",
+  "dependencies": {
+    "@actualwave/codemirror-lang-embed-core": "*"
+  },
+  "peerDependencies": {
+    "@codemirror/autocomplete": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.