CodeMirror CSS theme export

main.ts

import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
import { classHighlighter } from '@lezer/highlight';
import { defaultHighlightStyle } from '@codemirror/language';

const ss = new CSSStyleSheet();
for (const spec of oneDarkHighlightStyle.specs) {
  const { tag: _tags, class: _, ...rules } = spec;

  const tags: Extract<typeof _tags, readonly any[]> = Array.isArray(_tags)
    ? _tags
    : [_tags];

  const className =
    spec.class ??
    classHighlighter
      .style(tags)
      ?.split(' ')
      .map((className) => `.${className}`)
      .join(', ') ??
    tags.map((tag) => `.tok-${tag.name}`).join('\n');

  const rule = `${className} {}`;

  ss.insertRule(rule, ss.cssRules.length);
  for (const [rule, value] of Object.entries(rules)) {
    const r = ss.cssRules[ss.cssRules.length - 1];
    if (r instanceof CSSStyleRule) {
      try {
        r.styleMap.set(
          rule.replace(
            /([a-z])([A-Z])/g,
            (_, l, r) => `${l}-${r.toLowerCase()}`
          ),
          value
        );
      } catch (e) {
        console.error(e);
      }
    }
  }
}

// one dark editor settings
const ss2 = new CSSStyleSheet();
const _r = '.wp-block-a8c-cee-codemirror-code-block {}';
ss2.insertRule(_r, 0);

if (true) {
  const chalky = '#e5c07b',
    coral = '#e06c75',
    cyan = '#56b6c2',
    invalid = '#ffffff',
    ivory = '#abb2bf',
    stone = '#7d8799', // Brightened compared to original to increase contrast
    malibu = '#61afef',
    sage = '#98c379',
    whiskey = '#d19a66',
    violet = '#c678dd',
    darkBackground = '#21252b',
    highlightBackground = '#2c313a',
    background = '#282c34',
    tooltipBackground = '#353a42',
    selection = '#3E4451',
    cursor = '#528bff';

  const color = {
    chalky,
    coral,
    cyan,
    invalid,
    ivory,
    stone,
    malibu,
    sage,
    whiskey,
    violet,
    darkBackground,
    highlightBackground,
    background,
    tooltipBackground,
    selection,
    cursor,
  };
  const o = {
    '&': {
      color: ivory,
      backgroundColor: background,
    },

    '.cm-content': {
      caretColor: cursor,
    },

    '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
      { backgroundColor: selection },

    '.cm-panels': { backgroundColor: darkBackground, color: ivory },
    '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },

    '.cm-searchMatch': {
      backgroundColor: '#72a1ff59',
      outline: '1px solid #457dff',
    },
    '.cm-searchMatch.cm-searchMatch-selected': {
      backgroundColor: '#6199ff2f',
    },

    '.cm-activeLine': { backgroundColor: '#6699ff0b' },
    '.cm-selectionMatch': { backgroundColor: '#aafe661a' },

    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
      backgroundColor: '#bad0f847',
    },

    '.cm-gutters': {
      backgroundColor: background,
      color: stone,
      border: 'none',
    },

    '.cm-activeLineGutter': {
      backgroundColor: highlightBackground,
    },

    '.cm-foldPlaceholder': {
      backgroundColor: 'transparent',
      border: 'none',
      color: '#ddd',
    },

    '.cm-tooltip': {
      border: 'none',
      backgroundColor: tooltipBackground,
    },
    '.cm-tooltip .cm-tooltip-arrow:before': {
      borderTopColor: 'transparent',
      borderBottomColor: 'transparent',
    },
    '.cm-tooltip .cm-tooltip-arrow:after': {
      borderTopColor: tooltipBackground,
      borderBottomColor: tooltipBackground,
    },
    '.cm-tooltip-autocomplete': {
      '& > ul > li[aria-selected]': {
        backgroundColor: highlightBackground,
        color: ivory,
      },
    },
  };



  const r2 = ss2.cssRules[0];

  for (const [selector, innerVal] of Object.entries(o)) {
    //console.log("",innerR,innerVal);

    r2.insertRule(`${selector}{}`, r2.cssRules.length);

    for (const [rule, value] of Object.entries(innerVal)) {
      const r = r2.cssRules[r2.cssRules.length - 1];
      if (r instanceof CSSStyleRule) {
        try {
          r.styleMap.set(
            rule.replace(
              /([a-z])([A-Z])/g,
              (_, l, r) => `${l}-${r.toLowerCase()}`
            ),
            value
          );
        } catch (e) {
          console.error(e);
        }
      }
    }
  }
}

const style = document.createElement('pre');
for (const rule of ss.cssRules) {
  ss2.cssRules[0].insertRule(rule.cssText, ss2.cssRules[0].cssRules.length)
}
for (const rule of ss2.cssRules) {
  style.textContent += `${rule.cssText}\n`;
}


document.body.appendChild(style);