@ozdao/martyrs 0.2.570 → 0.2.572

package/src/jit/core.js

@@ -0,0 +1,274 @@
+/**
+ * Martyrs JIT CSS Engine - Core
+ */
+
+export class MartyrsJIT {
+  constructor(options = {}) {
+    this.rules = options.rules || [];
+    this.variants = options.variants || [];
+    this.cache = new Map();
+    this.usedTokens = new Set();
+  }
+
+  /**
+   * Добавить правило
+   * @param {RegExp} pattern - паттерн для матча токена
+   * @param {Function} handler - (match) => css string
+   */
+  addRule(pattern, handler) {
+    this.rules.push([pattern, handler]);
+  }
+
+  /**
+   * Добавить вариант
+   * @param {string} name - имя варианта (mobile, hover, etc)
+   * @param {Function} wrapper - (selector, css) => wrapped css
+   */
+  addVariant(name, wrapper) {
+    this.variants.push({ name, wrapper });
+  }
+
+  /**
+   * Генерирует CSS для одного токена
+   * @param {string} token - CSS класс (например "cols-[1fr_3fr]" или "mobile:hover:bg-main")
+   * @returns {string|null} CSS или null если не матчит
+   */
+  generateForToken(token) {
+    // Проверяем кэш
+    if (this.cache.has(token)) {
+      return this.cache.get(token);
+    }
+
+    // Извлекаем ВСЕ варианты последовательно (mobile:hover:focus:bg-main → [mobile, hover, focus])
+    const appliedVariants = [];
+    let baseToken = token;
+
+    while (true) {
+      let found = false;
+      for (const variant of this.variants) {
+        if (baseToken.startsWith(variant.name + ':')) {
+          appliedVariants.push(variant);
+          baseToken = baseToken.slice(variant.name.length + 1);
+          found = true;
+          break;
+        }
+      }
+      if (!found) break;
+    }
+
+    // Ищем подходящее правило для базового токена
+    for (const [pattern, handler] of this.rules) {
+      const match = baseToken.match(pattern);
+      if (match) {
+        let css = handler(match, this);
+        if (!css) continue;
+
+        const selector = this.escapeSelector(token);
+
+        if (appliedVariants.length === 0) {
+          // Без вариантов — просто оборачиваем в селектор
+          css = `.${selector} { ${css} }`;
+        } else {
+          // Разделяем варианты на pseudo-классы и media queries
+          const pseudoVariants = appliedVariants.filter(v =>
+            ['hover', 'focus', 'active', 'disabled', 'first', 'last', 'odd', 'even', 'group-hover'].includes(v.name)
+          );
+          const mediaVariants = appliedVariants.filter(v =>
+            ['mobile', 'tablet', 'desktop', 'widescreen', 'dark', 'light', 'print'].includes(v.name)
+          );
+
+          // Собираем псевдо-классы
+          let pseudoSuffix = '';
+          for (const v of pseudoVariants) {
+            const pseudoMap = {
+              'hover': ':hover',
+              'focus': ':focus',
+              'active': ':active',
+              'disabled': ':disabled',
+              'first': ':first-child',
+              'last': ':last-child',
+              'odd': ':nth-child(odd)',
+              'even': ':nth-child(even)',
+              'group-hover': '' // special case
+            };
+            pseudoSuffix += pseudoMap[v.name] || '';
+          }
+
+          // Базовый селектор с псевдо-классами
+          let result;
+          if (pseudoVariants.some(v => v.name === 'group-hover')) {
+            result = `.group:hover .${selector}${pseudoSuffix} { ${css} }`;
+          } else {
+            result = `.${selector}${pseudoSuffix} { ${css} }`;
+          }
+
+          // Оборачиваем в media queries (в обратном порядке — внутренние первые)
+          for (const v of mediaVariants.reverse()) {
+            const mediaMap = {
+              'mobile': '@media (max-width: 640px)',
+              'tablet': '@media (min-width: 641px) and (max-width: 1024px)',
+              'desktop': '@media (min-width: 1025px) and (max-width: 1440px)',
+              'widescreen': '@media (min-width: 1441px)',
+              'dark': '@media (prefers-color-scheme: dark)',
+              'light': '@media (prefers-color-scheme: light)',
+              'print': '@media print'
+            };
+            const media = mediaMap[v.name];
+            if (media) {
+              result = `${media} { ${result} }`;
+            }
+          }
+
+          css = result;
+        }
+
+        this.cache.set(token, css);
+        return css;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Экранирует специальные символы в CSS селекторе
+   */
+  escapeSelector(selector) {
+    return selector
+      .replace(/\[/g, '\\[')
+      .replace(/\]/g, '\\]')
+      .replace(/\(/g, '\\(')
+      .replace(/\)/g, '\\)')
+      .replace(/:/g, '\\:')
+      .replace(/\//g, '\\/')
+      .replace(/%/g, '\\%')
+      .replace(/\./g, '\\.')
+      .replace(/,/g, '\\,')
+      .replace(/_/g, '\\_')
+      .replace(/#/g, '\\#')
+      .replace(/\+/g, '\\+')
+      .replace(/\*/g, '\\*')
+      .replace(/!/g, '\\!')
+      .replace(/'/g, "\\'")
+      .replace(/"/g, '\\"')
+      .replace(/`/g, '\\`')
+      .replace(/;/g, '\\;')
+      .replace(/\{/g, '\\{')
+      .replace(/\}/g, '\\}');
+  }
+
+  /**
+   * Генерирует CSS для массива токенов
+   * @param {string[]} tokens
+   * @returns {string} CSS
+   */
+  generate(tokens) {
+    // Группы в порядке вывода CSS
+    const groups = {
+      base: [],
+      hover: [],
+      focus: [],
+      active: [],
+      disabled: [],
+      first: [],
+      last: [],
+      odd: [],
+      even: [],
+      groupHover: [],
+      widescreen: [],
+      desktop: [],
+      tablet: [],
+      mobile: [],
+      dark: [],
+      light: [],
+      print: []
+    };
+
+    for (const token of tokens) {
+      if (this.usedTokens.has(token)) continue;
+
+      const css = this.generateForToken(token);
+      if (!css) continue;
+
+      this.usedTokens.add(token);
+
+      // Определяем группу по первому media-варианту или pseudo
+      if (token.includes('mobile:')) groups.mobile.push(css);
+      else if (token.includes('tablet:')) groups.tablet.push(css);
+      else if (token.includes('desktop:')) groups.desktop.push(css);
+      else if (token.includes('widescreen:')) groups.widescreen.push(css);
+      else if (token.includes('dark:')) groups.dark.push(css);
+      else if (token.includes('light:')) groups.light.push(css);
+      else if (token.includes('print:')) groups.print.push(css);
+      else if (token.includes('group-hover:')) groups.groupHover.push(css);
+      else if (token.includes('hover:')) groups.hover.push(css);
+      else if (token.includes('focus:')) groups.focus.push(css);
+      else if (token.includes('active:')) groups.active.push(css);
+      else if (token.includes('disabled:')) groups.disabled.push(css);
+      else if (token.includes('first:')) groups.first.push(css);
+      else if (token.includes('last:')) groups.last.push(css);
+      else if (token.includes('odd:')) groups.odd.push(css);
+      else if (token.includes('even:')) groups.even.push(css);
+      else groups.base.push(css);
+    }
+
+    // Вывод в строгом порядке
+    return [
+      ...groups.base,
+      ...groups.hover,
+      ...groups.focus,
+      ...groups.active,
+      ...groups.disabled,
+      ...groups.first,
+      ...groups.last,
+      ...groups.odd,
+      ...groups.even,
+      ...groups.groupHover,
+      ...groups.widescreen,
+      ...groups.desktop,
+      ...groups.tablet,
+      ...groups.mobile,
+      ...groups.dark,
+      ...groups.light,
+      ...groups.print
+    ].join('\n');
+  }
+
+  /**
+   * Парсит значение в скобках [...]
+   * Заменяет _ на пробел (как в Tailwind)
+   * Добавляет пробелы вокруг + и - в calc()
+   * @param {string} value - например "1fr_3fr" или "var(--medium)"
+   * @returns {string} - "1fr 3fr" или "var(--medium)"
+   */
+  parseArbitraryValue(value) {
+    // Заменяем _ на пробел
+    let result = value.replace(/_/g, ' ');
+
+    // Добавляем пробелы вокруг + и - в calc() выражениях
+    // Но не трогаем знаки в начале чисел (например -20px) и в экспонентах
+    result = result.replace(/(\d)([+-])(\d)/g, '$1 $2 $3');
+    result = result.replace(/(\))([+-])(\d)/g, '$1 $2 $3');
+    result = result.replace(/(\d)([+-])(\()/g, '$1 $2 $3');
+    result = result.replace(/(%)([+-])(\d)/g, '$1 $2 $3');
+
+    return result;
+  }
+
+  /**
+   * Получить весь сгенерированный CSS
+   */
+  getCSS() {
+    return Array.from(this.cache.values()).join('\n');
+  }
+
+  /**
+   * Очистить кэш (для watch mode)
+   */
+  reset() {
+    this.cache.clear();
+    this.usedTokens.clear();
+  }
+}
+
+export default MartyrsJIT;

package/src/jit/extractor.js

@@ -0,0 +1,140 @@
+/**
+ * Martyrs JIT CSS Engine - Token Extractor
+ *
+ * Извлекает CSS классы (токены) из исходного кода.
+ * Как Tailwind/UnoCSS: собирает ВСЕ потенциальные токены,
+ * фильтрация через rules происходит в core.js
+ */
+
+// Широкий паттерн для любых токенов (как Tailwind)
+// Матчит: d-flex, pd-medium, w-100, cols-[1fr_3fr], mobile:cols-2
+const TOKEN_REGEX = /[A-Za-z][A-Za-z0-9_:-]*(?:\[[^\]]+\])?/g;
+
+// Паттерн для извлечения классов из HTML/Vue templates
+const CLASS_ATTR_REGEX = /class(?:Name)?=["'`]([^"'`]+)["'`]/g;
+
+// Паттерн для извлечения классов из :class bindings в Vue
+const DYNAMIC_CLASS_REGEX = /:class=["'`{[]([^"'`]+)["'`}\]]/g;
+
+// JS/HTML слова которые точно не классы
+const BLOCKLIST = new Set([
+  // JS keywords
+  'import', 'export', 'from', 'const', 'let', 'var', 'function', 'return',
+  'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue',
+  'true', 'false', 'null', 'undefined', 'this', 'new', 'class', 'extends',
+  'async', 'await', 'try', 'catch', 'finally', 'throw', 'typeof', 'instanceof',
+  'default', 'delete', 'do', 'in', 'of', 'void', 'with', 'yield',
+  // HTML tags
+  'div', 'span', 'template', 'script', 'style', 'head', 'body', 'html',
+  'section', 'article', 'header', 'footer', 'nav', 'aside', 'main',
+  'form', 'input', 'button', 'select', 'option', 'textarea', 'label',
+  'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
+  'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+  'a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'img', 'video', 'audio', 'canvas', 'svg', 'path',
+  'slot', 'component', 'transition', 'keep-alive',
+  // Vue
+  'ref', 'reactive', 'computed', 'watch', 'onMounted', 'onUnmounted',
+  'defineProps', 'defineEmits', 'defineExpose', 'withDefaults',
+  // Common
+  'props', 'emit', 'attrs', 'slots', 'setup', 'data', 'methods', 'mounted'
+]);
+
+/**
+ * Проверяет валидность токена
+ * Отфильтровывает JS/HTML и явно невалидные токены
+ */
+function isValidToken(token) {
+  // Слишком короткие
+  if (token.length < 2) return false;
+  // В blocklist
+  if (BLOCKLIST.has(token)) return false;
+  // Placeholder'ы из документации
+  if (token.includes('...')) return false;
+  // Пустые скобки
+  if (token.includes('[]')) return false;
+  // Чисто цифровые
+  if (/^\d+$/.test(token)) return false;
+  // Начинается с цифры
+  if (/^\d/.test(token)) return false;
+  // Только буквы без дефиса (скорее всего переменная)
+  if (/^[a-z]+$/i.test(token) && token.length > 10) return false;
+
+  return true;
+}
+
+/**
+ * Извлекает все токены из содержимого файла
+ * @param {string} content - содержимое файла
+ * @param {string} filename - имя файла (для определения типа)
+ * @returns {Set<string>} множество уникальных токенов
+ */
+export function extractTokens(content, filename = '') {
+  const tokens = new Set();
+
+  // 1. Извлекаем из class="..."
+  for (const match of content.matchAll(CLASS_ATTR_REGEX)) {
+    const classString = match[1];
+    const classes = classString.split(/\s+/).filter(Boolean);
+    for (const cls of classes) {
+      if (isValidToken(cls)) {
+        tokens.add(cls);
+      }
+    }
+  }
+
+  // 2. Извлекаем из :class bindings
+  for (const match of content.matchAll(DYNAMIC_CLASS_REGEX)) {
+    const binding = match[1];
+
+    // Ищем все токены внутри binding
+    const bindingTokens = binding.match(TOKEN_REGEX) || [];
+    for (const cls of bindingTokens) {
+      if (isValidToken(cls)) {
+        tokens.add(cls);
+      }
+    }
+
+    // Также ищем строковые литералы внутри binding
+    const stringLiterals = binding.match(/['"]([^'"]+)['"]/g) || [];
+    for (const literal of stringLiterals) {
+      const cleaned = literal.slice(1, -1);
+      const classes = cleaned.split(/\s+/).filter(Boolean);
+      for (const cls of classes) {
+        if (isValidToken(cls)) {
+          tokens.add(cls);
+        }
+      }
+    }
+  }
+
+  // 3. Глобальный поиск токенов во всём контенте
+  for (const match of content.matchAll(TOKEN_REGEX)) {
+    const token = match[0];
+    if (isValidToken(token)) {
+      tokens.add(token);
+    }
+  }
+
+  return tokens;
+}
+
+/**
+ * Извлекает токены из нескольких файлов
+ * @param {Map<string, string>} files - Map<filename, content>
+ * @returns {Set<string>} множество уникальных токенов
+ */
+export function extractFromFiles(files) {
+  const allTokens = new Set();
+
+  for (const [filename, content] of files) {
+    const tokens = extractTokens(content, filename);
+    for (const token of tokens) {
+      allTokens.add(token);
+    }
+  }
+
+  return allTokens;
+}
+
+export default { extractTokens, extractFromFiles };

package/src/jit/index.js

@@ -0,0 +1,19 @@
+/**
+ * Martyrs JIT CSS Engine
+ *
+ * Экспортирует:
+ * - MartyrsJIT: ядро генерации CSS
+ * - MartyrsJitPlugin: rspack плагин
+ * - rules: набор правил для arbitrary values
+ * - variants: модификаторы (mobile:, hover:, etc)
+ * - extractTokens: извлечение токенов из кода
+ */
+
+export { MartyrsJIT } from './core.js';
+export { MartyrsJitPlugin } from './plugin.js';
+export { rules } from './rules.js';
+export { variants } from './variants.js';
+export { extractTokens, extractFromFiles } from './extractor.js';
+
+// Default export - плагин
+export { MartyrsJitPlugin as default } from './plugin.js';

package/src/jit/loader.js

@@ -0,0 +1,46 @@
+/**
+ * Martyrs JIT CSS Engine - Token Extraction Loader
+ *
+ * Этот loader вызывается rspack для каждого .vue/.js/.ts файла.
+ * 1. Извлекает токены для JIT engine
+ * 2. Оборачивает <style> блоки в @layer components для приоритета JIT
+ */
+
+/**
+ * @param {string} source - содержимое файла
+ * @returns {string} - source с обёрнутыми стилями
+ */
+export default function martyrsLoader(source) {
+  // Получаем options и plugin instance
+  const options = this.getOptions() || {};
+  const plugin = options.plugin;
+
+  if (!plugin) {
+    return source;
+  }
+
+  const resourcePath = this.resourcePath;
+
+  // Извлекаем токены через метод плагина
+  try {
+    plugin.extractFromFile(source, resourcePath);
+  } catch (error) {
+    console.warn(`[MartyrsJIT] Error extracting tokens from ${resourcePath}:`, error.message);
+  }
+
+  // Для .vue файлов оборачиваем содержимое <style> в @layer components
+  if (resourcePath.endsWith('.vue')) {
+    source = source.replace(
+      /<style([^>]*)>([\s\S]*?)<\/style>/gi,
+      (match, attrs, css) => {
+        // Пропускаем пустые стили или уже обёрнутые в @layer
+        if (!css.trim() || css.includes('@layer')) {
+          return match;
+        }
+        return `<style${attrs}>@layer components {\n${css}\n}</style>`;
+      }
+    );
+  }
+
+  return source;
+}

package/src/jit/plugin.js

@@ -0,0 +1,209 @@
+/**
+ * Martyrs JIT CSS Engine - Rspack Plugin
+ *
+ * 1. Transform hook (loader) - парсит токены на лету при обработке каждого файла
+ * 2. Virtual module - import 'martyrs-jit.css' через rspack.experiments.VirtualModulesPlugin
+ * 3. processAssets hook - заменяет placeholder на сгенерированный CSS
+ */
+
+import { MartyrsJIT } from './core.js';
+import { rules } from './rules.js';
+import { variants } from './variants.js';
+import { extractTokens } from './extractor.js';
+import path from 'path';
+import { experiments } from '@rspack/core';
+
+const { VirtualModulesPlugin } = experiments;
+
+const PLUGIN_NAME = 'MartyrsJitPlugin';
+
+// Virtual module
+const VIRTUAL_MODULE_ID = 'martyrs-jit.css';
+const VIRTUAL_MODULE_PATH = 'node_modules/.martyrs/__martyrs.css';
+
+// Placeholder
+const LAYER_PLACEHOLDER = '#--martyrs--{layer:__ALL__}';
+const LAYER_PLACEHOLDER_RE = /#--martyrs--\s*\{\s*layer\s*:\s*(.+?)\s*;?\s*\}/g;
+
+export class MartyrsJitPlugin {
+  constructor(options = {}) {
+    this.options = {
+      extensions: options.extensions || ['.vue', '.js', '.jsx', '.ts', '.tsx'],
+      include: options.include || ['src'],
+      exclude: options.exclude || ['node_modules', 'dist', '.git'],
+      verbose: options.verbose || false,
+      ...options
+    };
+
+    // JIT engine
+    this.jit = new MartyrsJIT();
+
+    for (const [pattern, handler] of rules) {
+      this.jit.addRule(pattern, handler);
+    }
+
+    for (const variant of variants) {
+      this.jit.addVariant(variant.name, variant.wrapper);
+    }
+
+    // Токены собранные из всех файлов (по файлам для watch mode)
+    this.tokensByFile = new Map(); // filename → Set<tokens>
+
+    // Virtual modules plugin instance (создаётся в apply)
+    this.virtualModules = null;
+  }
+
+  apply(compiler) {
+    const projectRoot = compiler.context;
+
+    // ========================================
+    // 1. VIRTUAL MODULE через rspack.experiments.VirtualModulesPlugin
+    // ========================================
+
+    // Создаём virtual modules plugin с начальным placeholder
+    this.virtualModules = new VirtualModulesPlugin({
+      [VIRTUAL_MODULE_PATH]: LAYER_PLACEHOLDER
+    });
+
+    // Применяем virtual modules plugin
+    this.virtualModules.apply(compiler);
+
+    // Регистрируем alias для удобного импорта
+    compiler.options.resolve = compiler.options.resolve || {};
+    compiler.options.resolve.alias = compiler.options.resolve.alias || {};
+    compiler.options.resolve.alias[VIRTUAL_MODULE_ID] = path.join(projectRoot, VIRTUAL_MODULE_PATH);
+
+    // ========================================
+    // 2. LOADER для извлечения токенов
+    // ========================================
+
+    const loaderPath = path.resolve(import.meta.dirname, 'loader.js');
+    const extensionsRegex = new RegExp(
+      `\\.(${this.options.extensions.map(e => e.slice(1)).join('|')})$`
+    );
+
+    compiler.options.module = compiler.options.module || {};
+    compiler.options.module.rules = compiler.options.module.rules || [];
+
+    // Loader для извлечения токенов из .vue/.js/.ts
+    compiler.options.module.rules.unshift({
+      test: extensionsRegex,
+      enforce: 'pre',
+      use: [{
+        loader: loaderPath,
+        options: {
+          plugin: this,
+          include: this.options.include,
+          exclude: this.options.exclude,
+        }
+      }],
+    });
+
+    // ========================================
+    // 3. PROCESS ASSETS - заменяем placeholder на CSS
+    // ========================================
+
+    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: compilation.constructor.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+        },
+        (assets) => {
+          const startTime = performance.now();
+          const css = this.generateCSS();
+          const duration = performance.now() - startTime;
+
+          for (const [filename, asset] of Object.entries(assets)) {
+            if (!filename.endsWith('.css') && !filename.endsWith('.js')) {
+              continue;
+            }
+
+            let source = asset.source().toString();
+            let replaced = false;
+
+            // Заменяем placeholder
+            source = source.replace(LAYER_PLACEHOLDER_RE, () => {
+              replaced = true;
+              return css;
+            });
+
+            // Для JS бандлов - escaped версия
+            if (source.includes('#--martyrs--')) {
+              source = source.replace(
+                /#--martyrs--[^}]*\{[^}]*layer[^}]*:[^}]*__ALL__[^}]*;?\s*\}/g,
+                css.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+              );
+              replaced = true;
+            }
+
+            if (replaced) {
+              const { RawSource } = compiler.webpack.sources;
+              compilation.updateAsset(filename, new RawSource(source));
+              console.log(`[MartyrsJIT] ${this.tokens.size} tokens in ${duration.toFixed(2)}ms`);
+            }
+          }
+        }
+      );
+    });
+
+
+    // ========================================
+    // 5. WATCH MODE
+    // ========================================
+
+    compiler.hooks.watchRun.tap(PLUGIN_NAME, (compiler) => {
+      // Удаляем токены только для удалённых файлов
+      if (compiler.removedFiles) {
+        for (const file of compiler.removedFiles) {
+          this.tokensByFile.delete(file);
+        }
+      }
+      // Сбрасываем кэш CSS (токены изменённых файлов обновятся через loader)
+      this.jit.reset();
+    });
+  }
+
+  /**
+   * Извлекает токены из файла (вызывается из loader)
+   */
+  extractFromFile(content, filename) {
+    const isIncluded = this.options.include.some(dir =>
+      filename.includes(`/${dir}/`) || filename.includes(`\\${dir}\\`) || filename.includes(dir)
+    );
+
+    const isExcluded = this.options.exclude.some(dir =>
+      filename.includes(dir)
+    );
+
+    if (!isIncluded || isExcluded) {
+      return;
+    }
+
+    const fileTokens = extractTokens(content, filename);
+    this.tokensByFile.set(filename, new Set(fileTokens));
+  }
+
+  /**
+   * Собирает все токены из всех файлов (дедупликация через Set)
+   */
+  get tokens() {
+    const allTokens = new Set();
+    for (const tokens of this.tokensByFile.values()) {
+      for (const t of tokens) allTokens.add(t);
+    }
+    return allTokens;
+  }
+
+  /**
+   * Генерирует CSS
+   */
+  generateCSS() {
+    const tokens = Array.from(this.tokens);
+    const css = this.jit.generate(tokens);
+    // Порядок: base < components < utilities (последний = высший приоритет)
+    return `/* Martyrs JIT - ${tokens.length} tokens */\n@layer base, components, utilities;\n@layer utilities {\n${css}\n}`;
+  }
+}
+
+export default MartyrsJitPlugin;