npm - ustatic-css - Versions diffs - 0.0.1 - Mend

ustatic-css 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/LICENSE +21 -0
package/README.md +202 -0
package/dist/_ustatic-vars-Cx6_uZJY.cjs +1 -0
package/dist/_ustatic-vars-D2NgNZNI.js +4 -0
package/dist/css/modules/align.css +1 -0
package/dist/css/modules/animations.css +1 -0
package/dist/css/modules/base.css +1 -0
package/dist/css/modules/bg.css +1 -0
package/dist/css/modules/border.css +1 -0
package/dist/css/modules/cursor.css +1 -0
package/dist/css/modules/display.css +1 -0
package/dist/css/modules/effects.css +1 -0
package/dist/css/modules/filters.css +1 -0
package/dist/css/modules/flexbox.css +1 -0
package/dist/css/modules/grid.css +1 -0
package/dist/css/modules/hide.css +1 -0
package/dist/css/modules/interactivity.css +1 -0
package/dist/css/modules/outline.css +1 -0
package/dist/css/modules/position.css +1 -0
package/dist/css/modules/scroll.css +1 -0
package/dist/css/modules/sizing.css +1 -0
package/dist/css/modules/spacing.css +1 -0
package/dist/css/modules/typography.css +1 -0
package/dist/css/ustatic-vars.css +1 -0
package/dist/css/ustatic.css +1 -0
package/dist/js/index.cjs.js +9 -0
package/dist/js/index.es.js +175 -0
package/dist/types/package.json.d.ts +102 -0
package/dist/types/src/index.d.ts +4 -0
package/dist/types/src/index.d.ts.map +1 -0
package/dist/types/src/plugins/vue.plugin.d.ts +15 -0
package/dist/types/src/plugins/vue.plugin.d.ts.map +1 -0
package/dist/types/src/utils/styleLoader.d.ts +35 -0
package/dist/types/src/utils/styleLoader.d.ts.map +1 -0
package/dist/types/src/utils/styleloader.classmap.d.ts +2 -0
package/dist/types/src/utils/styleloader.classmap.d.ts.map +1 -0
package/dist/types/src/utils/useCssProperties.d.ts +17 -0
package/dist/types/src/utils/useCssProperties.d.ts.map +1 -0
package/dist/types/src/utils/useTokens.d.ts +21 -0
package/dist/types/src/utils/useTokens.d.ts.map +1 -0
package/dist/ustatic-index-1SZfqZon.js +4 -0
package/dist/ustatic-index-QcZrD98s.cjs +1 -0
package/package.json +99 -0
package/src/css/assets/tokens/_ustatic-list.scss +460 -0
package/src/css/assets/tokens/_ustatic-prefix.scss +1 -0
package/src/css/assets/tokens/_ustatic-vars.scss +757 -0
package/src/css/modules/align/index.scss +17 -0
package/src/css/modules/animations/index.scss +151 -0
package/src/css/modules/base/index.scss +406 -0
package/src/css/modules/base/scrollbar.scss +21 -0
package/src/css/modules/bg/index.scss +60 -0
package/src/css/modules/border/border.scss +88 -0
package/src/css/modules/border/divider.scss +38 -0
package/src/css/modules/border/index.scss +3 -0
package/src/css/modules/border/rounded.scss +70 -0
package/src/css/modules/cursor/index.scss +33 -0
package/src/css/modules/display/index.scss +19 -0
package/src/css/modules/effects/index.scss +35 -0
package/src/css/modules/filters/index.scss +34 -0
package/src/css/modules/flexbox/flex.scss +132 -0
package/src/css/modules/flexbox/gap.scss +15 -0
package/src/css/modules/flexbox/index.scss +2 -0
package/src/css/modules/grid/index.scss +94 -0
package/src/css/modules/hide/index.scss +27 -0
package/src/css/modules/interactivity/index.scss +28 -0
package/src/css/modules/outline/index.scss +63 -0
package/src/css/modules/position/index.scss +94 -0
package/src/css/modules/scroll/index.scss +68 -0
package/src/css/modules/sizing/index.scss +91 -0
package/src/css/modules/spacing/index.scss +56 -0
package/src/css/modules/typography/index.scss +139 -0
package/src/css/tokens/base/animations/underline.yaml +5 -0
package/src/css/tokens/base/border/color.yaml +17 -0
package/src/css/tokens/base/border/radius.yaml +33 -0
package/src/css/tokens/base/border/width.yaml +19 -0
package/src/css/tokens/base/color/accent.yaml +416 -0
package/src/css/tokens/base/color/base.yaml +492 -0
package/src/css/tokens/base/color/opacity.yaml +4 -0
package/src/css/tokens/base/color/variant.yaml +18 -0
package/src/css/tokens/base/cursor/base.yaml +18 -0
package/src/css/tokens/base/font/weight.yaml +23 -0
package/src/css/tokens/base/grid/base.yaml +9 -0
package/src/css/tokens/base/position/base.yaml +253 -0
package/src/css/tokens/base/rotation/base.yaml +20 -0
package/src/css/tokens/base/screen/base.yaml +10 -0
package/src/css/tokens/base/scroll/base.yaml +16 -0
package/src/css/tokens/base/size/base.yaml +16 -0
package/src/css/tokens/base/text/color.yaml +20 -0
package/src/css/tokens/base/text/size.yaml +37 -0
package/src/css/tokens/base/visibility/base.yaml +61 -0
package/src/css/ustatic-index.scss +24 -0
package/src/css/utils/_token.scss +56 -0
package/src/css/variables.scss +359 -0
package/src/index.ts +6 -0
package/src/plugins/vue.plugin.ts +77 -0
package/src/utils/styleLoader.ts +257 -0
package/src/utils/styleloader.classmap.ts +109 -0
package/src/utils/useCssProperties.ts +152 -0
package/src/utils/useTokens.ts +287 -0

package/src/utils/styleLoader.ts ADDED Viewed

@@ -0,0 +1,257 @@
+import { classMap } from './styleloader.classmap'
+export interface IStyleLoaderOptions {
+  modules?: string[];
+  classes?: string[];
+}
+let icssLoaded = false
+export const getModulesFromClasses = (classes: string | string[]): string[] => {
+  if (!classes) return []
+  let _classes = Array.isArray(classes) ? classes : []
+  if (classes?.length > 0 && !Array.isArray(classes)) {
+    _classes = classes?.replaceAll(' ', '')?.split(',')
+  }
+  const modules = new Set<string>()
+  _classes.forEach(className => {
+    // Проверяем точные соответствия
+    if (classMap[className]) {
+      modules.add(classMap[className])
+      return
+    }
+    // Проверяем частичные соответствия (префиксы)
+    for (const [ prefix, module ] of Object.entries(classMap)) {
+      // проверим классы на совпадение с префиксом в модуле
+      if (className.split('-')?.[0] === prefix?.split('-')?.[0]) {
+        modules.add(module)
+        break
+      }
+    }
+  })
+  return Array.from(modules)
+}
+export interface IStyleLink {
+  href: string
+  rel: string
+  type: string
+}
+export interface IStyleLinksOptions extends IStyleLoaderOptions {
+  /**
+   * Базовый путь для CSS файлов
+   * По умолчанию используется для SSR: пути относительно public папки
+   * Для браузера: используется import(...?url) для получения правильного URL
+   */
+  basePath?: string
+  /**
+   * Режим работы: 'ssr' | 'browser'
+   * Если не указан, определяется автоматически
+   */
+  mode?: 'ssr' | 'browser'
+}
+/**
+ * Определяет режим работы автоматически
+ */
+const detectMode = (): 'ssr' | 'browser' => {
+  return typeof document === 'undefined' ? 'ssr' : 'browser'
+}
+/**
+ * Возвращает список ссылок на CSS файлы для SSR и браузера
+ * Использует ту же логику формирования путей, что и loadStyles
+ *
+ * @param options - опции загрузчика стилей
+ * @param options.mode - режим работы ('ssr' или 'browser'), по умолчанию определяется автоматически
+ * @param options.basePath - базовый путь для CSS файлов (для SSR режима)
+ * @returns Promise с массивом объектов IStyleLink для вставки в <head>
+ */
+export const getStyleLinks = async (options?: IStyleLinksOptions): Promise<IStyleLink[]> => {
+  const mode = options?.mode ?? detectMode()
+  const basePath = options?.basePath ?? '/ustatic-css'
+  let modulesToLoad: string[] = getModulesFromClasses(options?.classes ?? [])
+  // Если переданы модули, используем их
+  if (options?.modules && options.modules.length > 0) {
+    modulesToLoad = modulesToLoad.concat(options.modules
+      .filter((module: string) => {
+        return !modulesToLoad.includes(module)
+      })
+    )
+  }
+  const linkPromises: Promise<IStyleLink>[] = []
+  // Функция для получения URL в зависимости от режима
+  const getHref = async (modulePath: string, moduleName: string): Promise<string> => {
+    if (mode === 'browser') {
+      // В браузере используем import(...?url) для получения правильного URL от Vite
+      try {
+        const { default: css } = await import(`${modulePath}?url`)
+        return css
+      } catch (error) {
+        console.error('Failed to get CSS URL:', error)
+        throw error
+      }
+    } else {
+      // В SSR режиме возвращаем путь относительно public папки
+      // moduleName - это имя файла без .css или имя модуля
+      return `${basePath}/${moduleName}`
+    }
+  }
+  // Если ничего не передано, загружаем все модули
+  if (modulesToLoad?.length === 0) {
+    linkPromises.push(
+      getHref('../css/ustatic.css', 'ustatic.css').then(href => ({ href, rel: 'stylesheet', type: 'text/css' })),
+      getHref('../css/vars.css', 'vars.css').then(href => ({ href, rel: 'stylesheet', type: 'text/css' }))
+    )
+  } else if (modulesToLoad.includes('ustatic.css') || modulesToLoad.includes('vars.css')) {
+    // Загружаем основные CSS файлы
+    linkPromises.push(
+      getHref('../css/ustatic.css', 'ustatic.css').then(href => ({ href, rel: 'stylesheet', type: 'text/css' })),
+      getHref('../css/vars.css', 'vars.css').then(href => ({ href, rel: 'stylesheet', type: 'text/css' }))
+    )
+  } else {
+    // Загружаем модули по отдельности
+    modulesToLoad.forEach(module => {
+      if (module === 'ustatic.css' || module === 'vars.css') {
+        return
+      }
+      linkPromises.push(
+        getHref(`../css/modules/${module}.css`, `modules/${module}.css`).then(href => ({ href, rel: 'stylesheet', type: 'text/css' }))
+      )
+    })
+    // Всегда добавляем vars.css
+    linkPromises.push(
+      getHref('../css/vars.css', 'vars.css').then(href => ({ href, rel: 'stylesheet', type: 'text/css' }))
+    )
+  }
+  return Promise.all(linkPromises)
+}
+/**
+ * Добавляет <link> на CSS файл в <head>
+ * @param href - URL CSS файла
+ */
+const loadCSS = (href: string): void => {
+  if (typeof document === 'undefined') return
+  const head = document.head
+  // Проверяем, существует ли уже ссылка на этот CSS
+  const existingLink = Array.from(head.getElementsByTagName('link')).find(
+    (linkElement) => {
+      const linkHref = linkElement.getAttribute('href')
+      if (!linkHref) return false
+      // Сравниваем пути без параметров и timestamp
+      const cleanHref = linkHref.split('?')[0]
+      const cleanNewHref = href.split('?')[0]
+      return cleanHref === cleanNewHref
+    }
+  )
+  if (!existingLink) {
+    const linkEl = document.createElement('link')
+    linkEl.type = 'text/css'
+    linkEl.rel = 'stylesheet'
+    linkEl.href = href
+    head.appendChild(linkEl)
+  }
+}
+/**
+ * Формирует URL CSS файла на основе basePath
+ * @param cssPath - относительный путь к CSS файлу
+ * @param basePath - базовый путь из options
+ * @returns URL CSS файла
+ */
+const getCssUrl = (cssPath: string, basePath: string): string => {
+  // Убираем ведущие "../" из пути
+  const cleanPath = cssPath.replace(/^\.\.\//, '')
+  // Формируем полный путь
+  return basePath ? `${basePath}/${cleanPath}` : `/${cleanPath}`
+}
+export const loadStyles = async (options?: IStyleLoaderOptions): Promise<void> => {
+  console.log('ustatic-css - loadStyles', { options })
+  // Проверяем, что document доступен
+  if (typeof document === 'undefined') return
+  if (icssLoaded) return
+  icssLoaded = true
+  console.log('ustatic-css - loadStyles - start loading', { options })
+  // Определяем basePath из options или из <base> тега
+  let basePath = options?.basePath || ''
+  if (!basePath && typeof document !== 'undefined') {
+    const baseElement = document.querySelector('base')
+    if (baseElement) {
+      basePath = baseElement.getAttribute('href')?.replace(/\/$/, '') || ''
+    }
+  }
+  let modulesToLoad: string[] = getModulesFromClasses(options?.classes ?? [])
+  // Если переданы модули, используем их
+  if (options?.modules && options.modules.length > 0) {
+    modulesToLoad = modulesToLoad.concat(options.modules
+      .filter((module: string) => {
+        return !modulesToLoad.includes(module)
+      })
+    )
+  }
+  // Если ничего не передано, загружаем все модули
+  if (modulesToLoad?.length === 0) {
+    modulesToLoad = [
+      'ustatic.css',
+      'vars.css'
+    ]
+  }
+  console.info('uCSS modules for load', { modulesToLoad, basePath, options })
+  try {
+    if (modulesToLoad.includes('ustatic.css') || modulesToLoad.includes('vars.css')) {
+      // Загружаем основные CSS файлы
+      loadCSS(getCssUrl('../css/ustatic.css', basePath))
+      loadCSS(getCssUrl('../css/vars.css', basePath))
+    } else if (modulesToLoad?.length > 0) {
+      // Загружаем модули по отдельности
+      const modulePromises: Promise<void>[] = []
+      modulesToLoad.forEach(module => {
+        if (module === 'ustatic.css' || module === 'vars.css') {
+          return
+        }
+        // Формируем путь к модулю
+        const modulePath = getCssUrl(`../css/modules/${module}.css`, basePath)
+        modulePromises.push(loadCSS(modulePath))
+      })
+      modulePromises.push(loadCSS(getCssUrl('../css/vars.css', basePath)))
+      await Promise.all(modulePromises)
+    } else {
+      console.log('No css for load')
+    }
+  } catch (error) {
+    console.error('Failed to load CSS files:', error)
+  }
+}

package/src/utils/styleloader.classmap.ts ADDED Viewed

@@ -0,0 +1,109 @@
+export const classMap: Record<string, string> = {
+  // flexbox
+  'flex': 'flexbox',
+  'flex-column': 'flexbox',
+  'flex-row': 'flexbox',
+  'flex-wrap': 'flexbox',
+  'flex-nowrap': 'flexbox',
+  'items': 'flexbox',
+  'justify': 'flexbox',
+  'content': 'flexbox',
+  'self': 'flexbox',
+  'shrink': 'flexbox',
+  'grow': 'flexbox',
+  'order': 'flexbox',
+  // display
+  'inline': 'display',
+  'block': 'display',
+  'inline-block': 'display',
+  'table': 'display',
+  'table-cell': 'display',
+  'overflow': 'display',
+  // align
+  'align': 'align',
+  // position
+  'position': 'position',
+  'top': 'position',
+  'right': 'position',
+  'bottom': 'position',
+  'left': 'position',
+  // border
+  'border': 'border',
+  'rounded': 'border',
+  'divider': 'border',
+  // typography
+  'text': 'typography',
+  'font': 'typography',
+  'leading': 'typography',
+  'tracking': 'typography',
+  // spacing
+  'm': 'spacing',
+  'mx': 'spacing',
+  'my': 'spacing',
+  'mt': 'spacing',
+  'mr': 'spacing',
+  'mb': 'spacing',
+  'ml': 'spacing',
+  'p': 'spacing',
+  'px': 'spacing',
+  'py': 'spacing',
+  'pt': 'spacing',
+  'pr': 'spacing',
+  'pb': 'spacing',
+  'pl': 'spacing',
+  // sizing
+  'w': 'sizing',
+  'h': 'sizing',
+  'min-w': 'sizing',
+  'min-h': 'sizing',
+  'max-w': 'sizing',
+  'max-h': 'sizing',
+  // bg
+  'bg': 'bg',
+  // effects
+  'shadow': 'effects',
+  'opacity': 'effects',
+  // interactivity
+  'cursor': 'interactivity',
+  'pointer-events': 'interactivity',
+  'resize': 'interactivity',
+  // scroll
+  'scroll': 'scroll',
+  // animations
+  'animate': 'animations',
+  // outline
+  'outline': 'outline',
+  // grid
+  'grid': 'grid',
+  'col': 'grid',
+  'row': 'grid',
+  // filters
+  'filter': 'filters',
+  'blur': 'filters',
+  'brightness': 'filters',
+  'contrast': 'filters',
+  'grayscale': 'filters',
+  'hue-rotate': 'filters',
+  'invert': 'filters',
+  'saturate': 'filters',
+  'sepia': 'filters',
+  // hide
+  'hide': 'hide',
+  'show': 'hide',
+}

package/src/utils/useCssProperties.ts ADDED Viewed

@@ -0,0 +1,152 @@
+/**
+ * Хук для управления CSS-свойствами через классы
+ * @param params - Параметры конфигурации
+ * @param params.resetOnUnmount - Флаг, определяющий нужно ли сбрасывать свойства при размонтировании компонента.
+ * По умолчанию true
+ */
+export const useCssProperties = () => {
+  const styleId = 'css-features'
+  const generalProperties: Set<string> = new Set()
+  const classes: Set<string> = new Set()
+  /**
+   * Устанавливает CSS-свойства для указанного класса
+   * @param className - Имя класса
+   * @param properties - Объект с CSS-свойствами и их значениями
+   */
+  const setCssPropertiesViaClass = (className: string, properties: Record<string, string>): void => {
+    // Найти или создать тег <style> с нужным id
+    let styleTag = document.getElementById(styleId) as HTMLStyleElement
+    if (!styleTag) {
+      styleTag = document.createElement('style')
+      styleTag.id = styleId
+      document.head.appendChild(styleTag)
+    }
+    // Создаем CSS-свойства для указанного класса
+    const classProperties = Object.entries(properties)
+      .map(([ property, value ]) => `${property}: ${value};`)
+      .join('\n  ')
+    // Генерируем новый CSS-код для класса
+    const classContent = `.${className} {\n  ${classProperties}\n}`
+    // Удаляем старую запись для этого класса, если она существует
+    let styleContent = styleTag.textContent || ''
+    const classRegex = new RegExp(`\\.${className}\\s*\\{[^}]*\\}`, 'g')
+    styleContent = styleContent.replace(classRegex, '')
+    // Добавляем обновлённый контент для класса
+    styleContent += `\n${classContent}`
+    // Обновляем содержимое тега <style>
+    styleTag.textContent = styleContent
+    classes.add(className)
+  }
+  /**
+   * Получает значение CSS-свойства для указанного класса
+   * @param className - Имя класса
+   * @param property - Имя CSS-свойства
+   * @returns Значение свойства или пустая строка, если свойство не найдено
+   */
+  const getCssPropertyViaClass = (className: string, property: string): string => {
+    // Найти или создать тег <style> с нужным id
+    const styleTag = document.getElementById(styleId) as HTMLStyleElement
+    if (!styleTag) {
+      return ''
+    }
+    // Получаем содержимое тега <style>
+    const styleContent = styleTag.textContent
+    // Ищем нужный класс в содержимом
+    const classRegex = new RegExp(`\\.${className}\\s*\\{[^}]*\\}`, 'g')
+    const classContent = styleContent?.match(classRegex)
+    if (!classContent) {
+      return ''
+    }
+    // Получаем значение свойства
+    const propertyRegex = new RegExp(`${property}:\\s*([^;]+);`, 'g')
+    const propertyStr = classContent[0].match(propertyRegex)?.[0]
+    if (!propertyStr) {
+      return ''
+    }
+    return propertyStr.split(':')[1].trim()
+  }
+  /**
+   * Удаляет CSS-свойства для указанного класса
+   * @param className - Имя класса
+   */
+  const removeClassWithProperties = (className: string): void => {
+    // Найти или создать тег <style> с нужным id
+    const styleTag = document.getElementById(styleId) as HTMLStyleElement
+    if (!styleTag) {
+      return
+    }
+    // Удаляем запись для этого класса, если она существует
+    let styleContent = styleTag.textContent || ''
+    const classRegex = new RegExp(`\\.${className}\\s*\\{[^}]*\\}`, 'g')
+    styleContent = styleContent.replace(classRegex, '')
+    // Обновляем содержимое тега <style>
+    styleTag.textContent = styleContent
+    // Удаляем класс из списка
+    classes.delete(className)
+  }
+  /**
+   * Очищает все CSS-свойства для всех классов
+   */
+  const clearClassWithProperties = (): void => {
+    classes.forEach(className => {
+      removeClassWithProperties(className)
+    })
+  }
+  /**
+   * Устанавливает CSS-свойство для элемента
+   * @param property - Имя CSS-свойства
+   * @param value - Значение свойства
+   */
+  const setCssProperty = (property: string, value: string): void => {
+    generalProperties.add(property)
+    document.documentElement.style.setProperty(property, value)
+  }
+  /**
+   * Удаляет CSS-свойство для элемента
+   * @param property - Имя CSS-свойства
+   */
+  const removeCssProperty = (property: string): void => {
+    generalProperties.delete(property)
+    document.documentElement.style.removeProperty(property)
+  }
+  /**
+   * Очищает все CSS-свойства для элемента
+   */
+  const clearCssProperties = (): void => {
+    generalProperties.forEach(property => {
+      removeCssProperty(property)
+    })
+  }
+  // Очистка при размонтировании компонента
+  const clearAll = () => {
+    clearCssProperties()
+    clearClassWithProperties()
+  }
+  return {
+    setCssPropertiesViaClass,
+    getCssPropertyViaClass,
+    removeClassWithProperties,
+    clearClassWithProperties,
+    setCssProperty,
+    removeCssProperty,
+    clearCssProperties,
+    clearAll
+  }
+}