Logo Windi CSS

Windi CSS JavaScript API

Введение

Если использование интерфейса командной строки не подходит для вашего рабочего процесса, вы можете напрямую использовать API CSS Windi.

Установка

Добавьте пакет:

npm i -D windicss

Применение

Настройка в режиме интерпретации 

const { Processor } = require('windicss/lib')
const { HTMLParser } = require('windicss/utils/parser')

export function generateStyles(html) {
  // Получите процессор Windi
  const processor = new Processor()

  // Разберите все классы и поместите в одну строку, чтобы упростить операции
  const htmlClasses = new HTMLParser(html)
    .parseClasses()
    .map(i => i.result)
    .join(' ')

  // Генерация предпечатной проверки на основе введенного html
  const preflightSheet = processor.preflight(html)

  // Обработка классов html в интерпретируемую таблицу стилей
  const interpretedSheet = processor.interpret(htmlClasses).styleSheet

  // Стили сборки
  const APPEND = false
  const MINIFY = false
  const styles = interpretedSheet.extend(preflightSheet, APPEND).build(MINIFY)

  return styles
}

Настройка в режиме компиляции

В режиме компиляции требуется немного больше усилий, чтобы заменить скомпилированные имена классов на текущие.

Подробнее о режиме компиляции здесь.

const { Processor } = require('windicss/lib')
const { HTMLParser } = require('windicss/utils/parser')

export function generateStyles(html) {
  // Получите процессор Windi
  const processor = new Processor()

  // Разберите html, чтобы получить массив совпадений классов с местоположением
  const parser = new HTMLParser(html)

  // Генерация предпечатной проверки на основе введенного html
  const preflightSheet = processor.preflight(html)

  const PREFIX = 'windi-'
  const outputCSS = []
  let outputHTML = ''
  let indexStart = 0

  parser.parseClasses().forEach((p) => {
    // добавить подстроку HTML из индекса для соответствия началу
    outputHTML += html.substring(indexStart, p.start)

    // создать таблицу стилей
    const style = processor.compile(p.result, PREFIX)

    // добавить таблицу стилей в стек стилей
    outputCSS.push(style.styleSheet)

    // добавить игнорируемые классы и нажать на вывод
    outputHTML += [style.className, ...style.ignored].join(' ')

    // отметьте конец как новый старт для следующей итерации
    indexStart = p.end
  })

  // добавить оставшуюся часть HTML
  outputHTML += html.substring(indexStart)

  // Стили сборки
  const MINIFY = false
  const styles = outputCSS
    // расширять предпечатный лист каждым листом из стопки
    .reduce((acc, curr) => acc.extend(curr), preflightSheet)
    .build(MINIFY)

  return {
    styles,
    outputHTML,
  }
}

Настройка в режиме атрибуции

В режиме атрибуции требуется немного больше работы для анализа каждого отдельного атрибута.

Подробнее о режиме атрибуции здесь И вы можете найти синтаксис здесь

const { Processor } = require('windicss/lib')
const { HTMLParser } = require('windicss/utils/parser')

export function generateStyles(html) {
  // Получите процессор Windi
  const processor = new Processor()

  // Разберите html, чтобы получить массив совпадений классов с местоположением
  const parser = new HTMLParser(html)

  // Генерация предпечатной проверки на основе введенного html
  const preflightSheet = processor.preflight(html)

  // Всегда возвращает массив
  const castArray = val => (Array.isArray(val) ? val : [val])

  const attrs = parser.parseAttrs().reduceRight((acc, curr) => {
    // получить текущий ключ соответствия
    const attrKey = curr.key

    // игнорировать атрибуты class или className
    if (attrKey === 'class' || attrKey === 'className') return acc

    // получить текущее значение соответствия в виде массива
    const attrValue = castArray(curr.value)

    // если текущий ключ совпадения уже находится в аккумуляторе
    if (attrKey in acc) {
      // получить текущее значение ключа attr в виде массива
      const attrKeyValue = castArray(acc[attrKey])

      // добавить текущее значение к значению аккумулятора
      acc[attrKey] = [...attrKeyValue, ...attrValue]
    } else {
      // иначе добавить массив значений атрибута в аккумулятор
      acc[attrKey] = attrValue
    }

    return acc
  }, {})

  // Стили сборки
  const MINIFY = false
  const styles = processor
    .attributify(attrs)
    .styleSheet.extend(preflightSheet)
    .build(MINIFY)

  return styles
}