@ozdao/martyrs 0.2.571 → 0.2.574

package/src/configurator/components/pages/Styles.vue

@@ -14,7 +14,7 @@
 				v-for="subcolor in color.colors"
 				:class="`mn-r-small w-100 h-8r flex-center flex radius-big bg-${subcolor}`"
 			>
-				<span class="uppercase t-semi p-small">{{subcolor}}</span>
+				<span class="uppercase fw-semi p-small">{{subcolor}}</span>
 			</div>
 		</div>
 	</div>
@@ -152,7 +152,7 @@
 	--main:      		0,255,136; 
 	--light-main:  		rgb(var(--main)), 0.1;
 	--second:    		34,102,255;
-	--light-second: 	rgb(var(--second)), 0.1;
+	--light-grey: 	rgb(var(--second)), 0.1;
 	--transparent:   0,0,0,0;
 	// Main and secondary colors
 

package/src/jit/.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash({} ;)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/src/jit/CLAUDE.md

@@ -0,0 +1,387 @@
+# Martyrs JIT CSS Engine
+
+## Архитектура
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      MartyrsJitPlugin                        │
+│  (plugin.js - точка входа для rspack)                       │
+├─────────────────────────────────────────────────────────────┤
+│  1. VirtualModulesPlugin → martyrs-jit.css                  │
+│  2. Loader (pre) → extractFromFile()                        │
+│  3. processAssets → заменяет placeholder на CSS             │
+└─────────────────────────────────────────────────────────────┘
+         │                    │                    │
+         ▼                    ▼                    ▼
+┌─────────────┐      ┌─────────────┐      ┌─────────────┐
+│  loader.js  │      │ extractor.js│      │   core.js   │
+│  (rspack    │      │ (парсинг    │      │ (MartyrsJIT │
+│   loader)   │      │  токенов)   │      │  генерация) │
+└─────────────┘      └─────────────┘      └─────────────┘
+                                                  │
+                           ┌──────────────────────┼──────────────────────┐
+                           ▼                      ▼                      ▼
+                    ┌─────────────┐        ┌─────────────┐        ┌─────────────┐
+                    │  rules.js   │        │ variants.js │        │    cache    │
+                    │  (паттерны  │        │ (mobile:,   │        │   (Map)     │
+                    │   → CSS)    │        │  hover:)    │        │             │
+                    └─────────────┘        └─────────────┘        └─────────────┘
+```
+
+## Файлы
+
+| Файл | Назначение |
+|------|------------|
+| `index.js` | Экспорты |
+| `core.js` | MartyrsJIT класс - ядро генерации CSS |
+| `plugin.js` | MartyrsJitPlugin - rspack плагин |
+| `loader.js` | Rspack loader для извлечения токенов |
+| `rules.js` | Правила: паттерн → CSS |
+| `variants.js` | Модификаторы: mobile:, hover:, dark: |
+| `extractor.js` | Извлечение токенов из исходников |
+
+## Как работает
+
+1. **Loader** (`loader.js`) вызывается для каждого `.vue/.js/.ts` файла
+2. Loader передаёт содержимое в `plugin.extractFromFile()`
+3. **Extractor** (`extractor.js`) парсит токены из `class="..."` и `:class="..."`
+4. В конце сборки `processAssets` hook вызывает `generateCSS()`
+5. **Core** (`core.js`) матчит токены по rules и генерирует CSS
+6. Placeholder `#--martyrs--{layer:__ALL__}` заменяется на CSS
+
+## Формат значений (resolveValue)
+
+```
+[200px]     → 200px           # arbitrary value
+medium      → var(--medium)   # CSS переменная (размеры)
+50r         → 50rem           # rem shorthand
+100vh       → 100vh           # viewport units (vh, vw, dvh, dvw, svh, svw, lvh, lvw)
+100         → 100%            # число = проценты
+auto        → auto            # keywords
+zero        → 0
+full        → 100%
+screen      → 100vh
+min/max/fit → min-content/max-content/fit-content
+```
+
+## Цвета
+
+### Доступные цвета (colorNames)
+
+```
+main, second, third, fourth, fifth     # основные
+black, dark, grey, light, white        # нейтральные
+red, red-nice, green, green-nice       # тона
+orange, orange-nice, yellow, yellow-nice
+youtube, telegram, twitter, instagram, reddit  # бренды
+transparent
+```
+
+### Варианты цветов (colorVariants)
+
+Для main/second/third/fourth/fifth и black/dark/grey/light/white:
+```
+extra, big, semi, medium, regular, small, thin, micro, nano
+```
+
+### Примеры цветовых классов
+
+```html
+<!-- Базовые цвета -->
+<div class="bg-main">           → background: rgb(var(--main))
+<div class="t-black">           → color: rgb(var(--black))
+<div class="fill-white">        → fill: rgb(var(--white))
+<div class="stroke-grey">       → stroke: rgb(var(--grey))
+
+<!-- С вариантами (светлее/темнее) -->
+<div class="bg-main-medium">    → background: var(--main-medium)
+<div class="t-black-thin">      → color: var(--black-thin)
+
+<!-- Прозрачность (transp-0 до transp-100) -->
+<div class="bg-main-transp-50"> → background: rgba(var(--main), 0.5)
+<div class="t-black-transp-25"> → color: rgba(var(--black), 0.25)
+
+<!-- Arbitrary -->
+<div class="bg-[#ff0000]">      → background: #ff0000
+<div class="t-[rgba(0,0,0,0.5)]"> → color: rgba(0,0,0,0.5)
+```
+
+## Трансформации
+
+Трансформации используют CSS переменные для комбинирования:
+
+```html
+<!-- Отдельные трансформации -->
+<div class="translate-x-medium">  → --m-tx: var(--medium)
+<div class="translate-y-50">      → --m-ty: 50%
+<div class="rotate-[45deg]">      → --m-rotate: 45deg
+<div class="scale-[1.5]">         → --m-scale-x: 1.5; --m-scale-y: 1.5
+
+<!-- Комбинирование (все работают вместе) -->
+<div class="translate-x-medium rotate-[45deg] scale-[1.2]">
+```
+
+CSS переменные в `all.scss`:
+```scss
+*, *::before, *::after {
+  --m-tx: 0; --m-ty: 0; --m-rotate: 0deg;
+  --m-skew-x: 0deg; --m-skew-y: 0deg;
+  --m-scale-x: 1; --m-scale-y: 1;
+}
+
+[class*="translate-"], [class*="rotate-"], [class*="scale-"], [class*="skew-"] {
+  transform: translateX(var(--m-tx)) translateY(var(--m-ty))
+             rotate(var(--m-rotate))
+             skewX(var(--m-skew-x)) skewY(var(--m-skew-y))
+             scaleX(var(--m-scale-x)) scaleY(var(--m-scale-y));
+}
+```
+
+## Негативные значения
+
+Суффикс `-negative` для отрицательных значений:
+
+```html
+<div class="mn-t-medium-negative">  → margin-top: calc(var(--medium) * -1)
+<div class="translate-x-50-negative"> → --m-tx: calc(50% * -1)
+<div class="pos-t-small-negative">  → top: calc(var(--small) * -1)
+```
+
+## Варианты (множественные)
+
+Поддерживаются цепочки вариантов:
+
+```html
+<!-- Один вариант -->
+<div class="mobile:d-block">
+<div class="hover:bg-main">
+
+<!-- Множественные варианты -->
+<div class="mobile:hover:bg-main">      → @media (max-width: 640px) { .class:hover { ... } }
+<div class="dark:hover:t-white">        → @media (prefers-color-scheme: dark) { .class:hover { ... } }
+<div class="mobile:focus:active:bg-red"> → все три варианта применяются
+```
+
+### Доступные варианты
+
+**Media queries:**
+- `mobile` — max-width: 640px
+- `tablet` — min-width: 641px and max-width: 1024px
+- `desktop` — min-width: 1025px and max-width: 1440px
+- `widescreen` — min-width: 1441px
+- `dark` — prefers-color-scheme: dark
+- `light` — prefers-color-scheme: light
+- `print` — print
+
+**Pseudo-классы:**
+- `hover`, `focus`, `active`, `disabled`
+- `first`, `last`, `odd`, `even`
+- `group-hover` — `.group:hover .class`
+
+## Добавление правил
+
+В `rules.js`:
+
+```javascript
+// Простое правило
+[/^opacity-(\d+)$/, (m) => `opacity: ${m[1] / 100};`],
+
+// С resolveValue для arbitrary values
+[/^gap-(.+)$/, (m, jit) => {
+  const v = resolveValue(m[1], jit);
+  return v ? `gap: ${v};` : null;
+}],
+
+// С handleNegative для поддержки -negative суффикса
+[/^mn-(.+)$/, (m, jit) => {
+  const v = handleNegative(m[1], jit);
+  return v ? `margin: ${v};` : null;
+}],
+```
+
+### Порядок правил ВАЖЕН!
+
+Более специфичные правила должны идти ПЕРЕД общими:
+
+```javascript
+// ✅ ПРАВИЛЬНО
+[/^bg-(.+)-transp-(\d+)$/, ...],  // transp сначала
+[/^bg-\[(.+)\]$/, ...],            // arbitrary
+[/^bg-([a-z][\w-]*)$/, ...],       // named последним
+
+// ❌ НЕПРАВИЛЬНО - bg-main-transp-50 зматчится как bg-([a-z][\w-]*) = "main-transp-50"
+[/^bg-([a-z][\w-]*)$/, ...],
+[/^bg-(.+)-transp-(\d+)$/, ...],
+```
+
+## Типографика
+
+### Font weight (fw-*)
+
+```html
+<div class="fw-bold">      → font-weight: 900
+<div class="fw-demi">      → font-weight: 700
+<div class="fw-semi">      → font-weight: 600
+<div class="fw-medium">    → font-weight: 500
+<div class="fw-regular">   → font-weight: 400
+<div class="fw-light">     → font-weight: 300
+<div class="fw-500">       → font-weight: 500
+<div class="fw-[650]">     → font-weight: 650
+```
+
+### White-space (ws-*)
+
+```html
+<div class="ws-nowrap">      → white-space: nowrap
+<div class="ws-normal">      → white-space: normal
+<div class="ws-pre">         → white-space: pre
+<div class="ws-pre-line">    → white-space: pre-line
+<div class="ws-pre-wrap">    → white-space: pre-wrap
+<div class="ws-break-spaces"> → white-space: break-spaces
+```
+
+### Line-height (lh-*)
+
+Использует resolveValue — поддерживает CSS переменные и любые значения:
+
+```html
+<div class="lh-medium">    → line-height: var(--medium)
+<div class="lh-125">       → line-height: 125%
+<div class="lh-[1.75]">    → line-height: 1.75
+<div class="lh-[2em]">     → line-height: 2em
+```
+
+### Text transform
+
+```html
+<div class="uppercase">    → text-transform: uppercase
+<div class="lowercase">    → text-transform: lowercase
+<div class="capitalize">   → text-transform: capitalize
+```
+
+### Text decoration
+
+```html
+<div class="underline">    → text-decoration: underline
+<div class="line-through"> → text-decoration: line-through
+```
+
+### User select
+
+```html
+<div class="select-none">  → user-select: none
+```
+
+### Truncate / Line clamp
+
+```html
+<div class="truncate">       → overflow: hidden; text-overflow: ellipsis; white-space: nowrap
+<div class="line-clamp-2">   → -webkit-line-clamp: 2 (многострочное обрезание)
+<div class="line-clamp-5">   → -webkit-line-clamp: 5
+```
+
+## Примеры токенов
+
+```html
+<!-- Grid -->
+<div class="cols-3">                    → grid-template-columns: repeat(3, minmax(0, 1fr))
+<div class="cols-[1fr_3fr]">            → grid-template-columns: 1fr 3fr
+<div class="rows-2">                    → grid-template-rows: repeat(2, minmax(0, 1fr))
+<div class="gap-medium">                → gap: var(--medium)
+
+<!-- Size -->
+<div class="w-100 h-50">                → width: 100%; height: 50%
+<div class="w-[300px] h-[200px]">       → width: 300px; height: 200px
+<div class="w-min-[100px] w-max-full">  → min-width: 100px; max-width: 100%
+
+<!-- Spacing -->
+<div class="pd-medium mn-t-small">      → padding: var(--medium); margin-top: var(--small)
+<div class="mn-t-medium-negative">      → margin-top: calc(var(--medium) * -1)
+
+<!-- Colors -->
+<div class="bg-main t-white">           → background: rgb(var(--main)); color: rgb(var(--white))
+<div class="bg-main-transp-50">         → background: rgba(var(--main), 0.5)
+
+<!-- Typography -->
+<div class="fw-bold ws-nowrap">         → font-weight: 900; white-space: nowrap
+<div class="truncate">                  → text truncation with ellipsis
+<div class="line-clamp-3">              → multiline truncation (3 lines)
+
+<!-- Responsive -->
+<div class="cols-3 mobile:cols-1">      → 3 колонки, на mobile 1
+<div class="d-flex mobile:d-block">     → flex, на mobile block
+
+<!-- States -->
+<div class="hover:bg-main">             → background on hover
+<div class="mobile:hover:bg-main">      → background on hover только на mobile
+```
+
+## Virtual Module
+
+Импорт в приложении:
+```javascript
+import 'martyrs-jit.css';
+```
+
+Rspack alias:
+```
+martyrs-jit.css → node_modules/.martyrs/__martyrs.css
+```
+
+## Watch Mode
+
+Токены хранятся по файлам для корректной работы в watch mode:
+
+```javascript
+// plugin.js
+this.tokensByFile = new Map(); // filename → Set<tokens>
+
+// При watchRun:
+// - Удаляются токены только для удалённых файлов (compiler.removedFiles)
+// - jit.reset() очищает кэш CSS
+// - Токены изменённых файлов обновляются через loader
+```
+
+Это предотвращает потерю токенов из неизменённых файлов при HMR.
+
+## Ограничения
+
+1. **Токены извлекаются статически** - динамически генерируемые классы не работают:
+   ```javascript
+   // ❌ Не работает
+   const size = 'medium';
+   class="pd-${size}"
+
+   // ✅ Работает
+   class="pd-medium"
+   ```
+
+2. **Arbitrary values в квадратных скобках** - underscore `_` заменяется на пробел:
+   ```
+   cols-[1fr_3fr] → grid-template-columns: 1fr 3fr
+   ```
+
+3. **Экранирование селекторов** - специальные символы экранируются:
+   ```
+   cols-[1fr_3fr] → .cols-\[1fr\_3fr\]
+   mobile:d-flex → .mobile\:d-flex
+   ```
+
+4. **Негативные значения только через суффикс** `-negative`:
+   ```
+   // ✅ Правильно
+   mn-t-medium-negative
+
+   // ❌ Не работает
+   -mn-t-medium
+   mn-t--medium
+   ```
+
+## Отладка
+
+В plugin.js выводится статистика:
+```
+[MartyrsJIT] 245 tokens in 3.45ms
+```
+
+Для verbose логов добавить `verbose: true` в options.

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;