ustatic-css 0.0.1

package/src/css/variables.scss

@@ -0,0 +1,359 @@
+/*
+ * Файл списков для генерации классов
+ *
+ * Этот файл содержит определения переменных и маппингов,
+ * которые используются для генерации CSS-классов в рамках дизайн-системы.
+ * Все значения берутся из токенов через функцию token().
+ */
+
+// Импорты утилит и токенов
+@import './utils/token';
+@import './assets/tokens/ustatic-prefix';
+@import './assets/tokens/ustatic-list';
+
+/**
+ * $screens
+ * 
+ * Определение контрольных точек для адаптивного дизайна.
+ * Используется для генерации responsive-классов.
+ */
+$screens: (
+  "xs": token("base.screen.small"),       // 480px
+  "md": token("base.screen.medium"),   // 768px
+  "def": token("base.screen.default"),   // 1024px (по умолчанию)
+  "lg": token("base.screen.large"),       // 1280px
+) !default;
+
+/**
+ * $directions
+ * 
+ * Направления для отступов, бордеров и других свойств.
+ * Ключ - сокращение, значение - список направлений.
+ * 
+ * @example .mt-1 // margin-top: 4px
+ * @example .px-2 // padding-left: 8px; padding-right: 8px
+ */
+$directions: (
+  "": ("", ""),                 // Все стороны
+  "x": ("left", "right"),     // Горизонтальные
+  "y": ("top", "bottom"),  // Вертикальные
+  "t": ("top", ""),           // Верх
+  "b": ("bottom", ""),      // Низ
+  "l": ("left", ""),          // Лево
+  "r": ("right", ""),         // Право
+) !default;
+
+/**
+ * $sizes-short
+ * 
+ * Сокращенный список размеров для часто используемых значений.
+ * Используется для margin, padding и других spacing-свойств.
+ */
+$sizes-short: (
+  '0d5': token("base.size.0d5"),  // 2px
+  '1': token("base.size.1"),      // 4px
+  '2': token("base.size.2"),      // 8px
+  '3': token("base.size.3"),      // 12px
+  '4': token("base.size.4"),      // 16px
+  '5': token("base.size.5"),      // 20px
+  '6': token("base.size.6"),      // 24px
+  '8': token("base.size.8"),      // 32px
+  '9': token("base.size.9"),     // 36px
+) !default;
+
+/**
+ * $sizes
+ * 
+ * Полный список размеров для всех свойств.
+ * Включает как фиксированные значения, так и относительные (проценты, доли).
+ * 
+ * @example .w-1/2 // width: 50%
+ * @example .h-64 // height: 256px
+ * @example .m-4 // margin: 16px
+ */
+$sizes: (
+  '1': token("base.size.1"),      // 4px
+  '2': token("base.size.2"),      // 8px
+  '3': token("base.size.3"),      // 12px
+  '4': token("base.size.4"),      // 16px
+  '5': token("base.size.5"),      // 20px
+  '6': token("base.size.6"),      // 24px
+  '8': token("base.size.8"),      // 32px
+  '9': token("base.size.9"),     // 36px
+  '10': token("base.size.10"),    // 40px
+  '12': token("base.size.12"),    // 48px
+  '16': token("base.size.16"),   // 64px
+  '18': token("base.size.18"),    // 72px
+  '20': token("base.size.20"),   // 80px
+  '24': token("base.size.24"),    // 96px
+  '32': token("base.size.32"),   // 128px
+  '40': token("base.size.40"),    // 160px
+  '48': token("base.size.48"),    // 192px
+  '56': token("base.size.56"),    // 224px
+  '64': token("base.size.64"),    // 256px
+  '72': token("base.size.72"),    // 288px
+  '80': token("base.size.80"),    // 320px
+  '96': token("base.size.96"),    // 384px
+  '112': token("base.size.112"),  // 448px
+  '128': token("base.size.128"),  // 512px
+  '144': token("base.size.144"),  // 576px
+  '160': token("base.size.160"),  // 640px
+  '192': token("base.size.192"), // 768px
+  '224': token("base.size.224"),  // 896px
+  '256': token("base.size.256"),  // 1024px
+
+  1\/4: token("base.size.1/4"),   // 25%
+  1\/3: token("base.size.1/3"),   // 33.333%
+  1\/2: token("base.size.1/2"),   // 50%
+  2\/3: token("base.size.2/3"),   // 66.666%
+  3\/4: token("base.size.3/4"),   // 75%
+  4\/5: token("base.size.4/5"),   // 80%
+  
+  'px': token("base.size.px"),    // 1px
+  '0d5': token("base.size.0d5"), // 2px
+  'full': token("base.size.full"), // 100%
+  'auto': token("base.size.auto"), // auto
+  'none': token("base.size.none"), // none
+  'fit': token("base.size.fit")   // fit-content
+) !default;
+
+// Генератор viewport единиц
+// Добавляет размеры в vh и vw от 5 до 100
+@for $i from 5 through 100 {
+  $sizes: map-merge($sizes, (
+    '#{$i}vh': token("base.position.#{$i}vh"),
+    '#{$i}vw': token("base.position.#{$i}vw")
+  ));
+}
+
+/**
+ * $positions
+ * 
+ * Значения для позиционирования элементов.
+ * Используется в свойствах top, right, bottom, left.
+ * 
+ * @example .top-0 // top: 0
+ * @example .left-1/2 // left: 50%
+ */
+$positions: (
+  0: token("base.position.0"),     // 0px
+  px: token("base.position.px"),  // 1px
+  1: token("base.position.1"),     // 4px
+  2: token("base.position.2"),     // 8px
+  3: token("base.position.3"),     // 12px
+  4: token("base.position.4"),     // 16px
+  5: token("base.position.5"),     // 20px
+  6: token("base.position.6"),     // 24px
+  7: token("base.position.7"),     // 28px
+  8: token("base.position.8"),     // 32px
+  9: token("base.position.9"),     // 36px
+  10: token("base.position.10"),   // 40px
+  12: token("base.position.12"),   // 48px
+  18: token("base.position.18"),   // 72px
+  64: token("base.position.64"),   // 256px
+
+  1\/4: token("base.position.1/4"), // 25%
+  1\/2: token("base.position.1/2"), // 50%
+  3\/4: token("base.position.3/4"), // 75%
+  4\/5: token("base.position.4/5"), // 80%
+
+  auto: token("base.position.auto"), // auto
+  full: token("base.position.full"), // 100%
+) !default;
+
+/**
+ * $steps
+ * 
+ * Шаги для свойств, требующих дискретных значений.
+ * Используется для z-index, order и других свойств.
+ */
+$steps: (
+  0: token("base.step.0"),
+  1: token("base.step.1"),
+  2: token("base.step.2"),
+  3: token("base.step.3"),
+  4: token("base.step.4"),
+  5: token("base.step.5"),
+  6: token("base.step.6"),
+  7: token("base.step.7"),
+  8: token("base.step.8"),
+  9: token("base.step.9"),
+  10: token("base.step.10"),
+  auto: token("base.step.auto"),
+) !default;
+
+/**
+ * $flex-orders
+ * 
+ * Значения для CSS-свойства order.
+ * Используется для управления порядком элементов в flex-контейнерах.
+ * 
+ * @example .order-1 // order: 1
+ * @example .order-last // order: 99999
+ */
+$flex-orders: (
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  last: 99999
+) !default;
+
+/**
+ * $text-sizes
+ * 
+ * Размеры текста и соответствующая высота строки.
+ * Каждый элемент содержит пару (font-size, line-height).
+ * 
+ * @example .text-sm // font-size: 14px; line-height: 20px
+ */
+$text-sizes: (
+  '2xs': (token("base.text.size.2xs"), token("base.text.line.height.2xs")),      // 10px / 12px
+  'xs': (token("base.text.size.xs"), token("base.text.line.height.xs")),          // 12px / 16px
+  'sm': (token("base.text.size.sm"), token("base.text.line.height.sm")),        // 14px / 20px
+  'base': (token("base.text.size.base"), token("base.text.line.height.base")),  // 16px / 24px
+  'lg': (token("base.text.size.lg"), token("base.text.line.height.lg")),            // 18px / 28px
+  'xl': (token("base.text.size.xl"), token("base.text.line.height.xl")),            // 20px / 28px
+  '2xl': (token("base.text.size.2xl"), token("base.text.line.height.2xl")),        // 24px / 32px
+);
+
+/**
+ * $text-algins
+ * 
+ * Возможные значения для text-align.
+ * 
+ * @example .text-center // text-align: center
+ */
+$text-algins: (
+  left,
+  center,
+  right,
+  justify,
+  start,
+  end
+);
+
+/**
+ * $vertical-algins
+ * 
+ * Возможные значения для vertical-align.
+ * 
+ * @example .align-middle // vertical-align: middle
+ */
+$vertical-algins: (
+  top,
+  middle,
+  bottom,
+  baseline,
+  text-top,
+  text-bottom,
+  sub,
+  super
+);
+
+/**
+ * $font-weights
+ * 
+ * Толщина шрифта.
+ * 
+ * @example .font-bold // font-weight: 700
+ */
+$font-weights: (
+  'thin': token('base.font.weight.thin'),               // 100
+  'extralight': token('base.font.weight.extralight'), // 200
+  'light': token('base.font.weight.light'),             // 300
+  'regular': token('base.font.weight.regular'),       // 400
+  'medium': token('base.font.weight.medium'),      // 500
+  'semibold': token('base.font.weight.semibold'),   // 600
+  'bold': token('base.font.weight.bold'),              // 700
+  'extrabold': token('base.font.weight.extrabold'), // 800
+  'black': token('base.font.weight.black')            // 900
+);
+
+/**
+ * $colors-variants
+ *
+ * Цветовые варианты.
+ * Каждый элемент содержит значение цвета.
+ *
+ * @example .bg-primary // background-color: #3b82f6
+ * @example .text-primary // color: #3b82f6
+ */
+$colors-variants: (
+  "primary": token("base.color.variant.primary"),
+  "secondary": token("base.color.variant.secondary"),
+  "success": token("base.color.variant.success"),
+  "info": token("base.color.variant.info"),
+  "warning": token("base.color.variant.warning"),
+  "danger": token("base.color.variant.danger"),
+) !default;
+
+/**
+ * $radiuses
+ * 
+ * Радиусы скругления углов.
+ * 
+ * @example .rounded-md // border-radius: 6px
+ */
+$radiuses: (
+  none: token("base.border.radius.none"),  // 0px
+  sm: token("base.border.radius.sm"),      // 2px
+  base: token("base.border.radius.base"),  // 4px
+  md: token("base.border.radius.md"),      // 6px
+  lg: token("base.border.radius.lg"),        // 8px
+  xl: token("base.border.radius.xl"),        // 12px
+  2xl: token("base.border.radius.2xl"),     // 16px
+  3xl: token("base.border.radius.3xl"),     // 24px
+  full: token("base.border.radius.full")     // 9999px
+);
+
+/**
+ * $opacities
+ * 
+ * Значения прозрачности.
+ * 
+ * @example .opacity-50 // opacity: 0.5
+ */
+$opacities: (
+  0,    // 0%
+  5,    // 5%
+  10,   // 10%
+  20,   // 20%
+  25,   // 25%
+  30,   // 30%
+  40,   // 40%
+  50,   // 50%
+  60,   // 60%
+  70,   // 70%
+  75,   // 75%
+  80,   // 80%
+  90,   // 90%
+  95,   // 95%
+  100   // 100%
+);
+
+/**
+ * $rotations
+ * 
+ * Углы поворота для трансформаций.
+ * 
+ * @example .rotate-90 // transform: rotate(90deg)
+ */
+$rotations: (
+  0: token("base.rotation.0"),       // 0deg
+  45: token("base.rotation.45"),    // 45deg
+  90: token("base.rotation.90"),    // 90deg
+  135: token("base.rotation.135"), // 135deg
+  180: token("base.rotation.180"), // 180deg
+  225: token("base.rotation.225"), // 225deg
+  270: token("base.rotation.270"), // 270deg
+  315: token("base.rotation.315")  // 315deg
+);

package/src/index.ts

@@ -0,0 +1,6 @@
+
+// export * from './utils/styleLoader'
+export * from './utils/useCssProperties'
+export * from './utils/useTokens'
+
+export * from './plugins/vue.plugin'

package/src/plugins/vue.plugin.ts

@@ -0,0 +1,77 @@
+import type { IStyleLoaderOptions } from '@/utils/styleLoader'
+
+export interface PluginOptions extends IStyleLoaderOptions {
+  /**
+   * Загружать ли стили автоматически при установке плагина
+   * @default true
+   */
+  autoLoad?: boolean
+
+  modules?: string[]
+
+  classes?: string[]
+}
+
+export const ustaticCss = {
+  install(app: any, options?: PluginOptions) {
+    // Проверяем, что document доступен (не SSR)
+    if (typeof document === 'undefined') return
+
+    const {
+      autoLoad = true,
+      modules
+    } = options ?? {}
+
+    // // Предоставляем глобальную функцию для загрузки стилей
+    // app.config.globalProperties.$loadUStaticStyles = (opts?: IStyleLoaderOptions) => {
+    //   return loadStyles({ ...options, ...opts })
+    // }
+
+    // Автозагрузка при установке плагина
+    if (document && autoLoad) {
+
+      /* @ts-expect-error чему тут вариант записи УРЛ не нравится */
+      import('@css/ustatic-index.scss?url')
+        .then(({ default: css }) => {
+          const head = document.head
+          const existingLink = Array.from(head.getElementsByTagName('link')).find(
+            (linkElement) => linkElement.getAttribute('href')?.includes(css)
+          )
+          if (!existingLink) {
+            const linkEl = document.createElement('link')
+            linkEl.type = 'text/css'
+            linkEl.rel = 'preload stylesheet'
+            linkEl.setAttribute('async', '')
+            linkEl.setAttribute('ustatic', '')
+            // Vite заменит этот импорт на правильный URL во время сборки
+            linkEl.href = `${css}?nocache=${Date.now()}`
+            head.appendChild(linkEl)
+          }
+        })
+        .catch((error) => {
+          console.error('[uStaticCSS load base styles ERROR: ', error)
+        })
+      /* @ts-expect-error чему тут вариант записи УРЛ не нравится */
+      import('@css/assets/tokens/_ustatic-vars.scss?url')
+        .then(({ default: css }) => {
+          const head = document.head
+          const existingLink = Array.from(head.getElementsByTagName('link')).find(
+            (linkElement) => linkElement.getAttribute('href')?.includes(css)
+          )
+          if (!existingLink) {
+            const linkEl = document.createElement('link')
+            linkEl.type = 'text/css'
+            linkEl.rel = 'stylesheet'
+            linkEl.setAttribute('async', '')
+            linkEl.setAttribute('ustatic', '')
+            // Vite заменит этот импорт на правильный URL во время сборки
+            linkEl.href = `${css}?nocache=${Date.now()}`
+            head.appendChild(linkEl)
+          }
+        })
+        .catch((error) => {
+          console.error('[uStaticCSS load variables for styles ERROR: ', error)
+        })
+    }
+  }
+}