Windi CSS JavaScript API

關(guān)于

如果使用 CLI 不適合您的工作流程，您可以直接使用 Windi CSS API。

安裝

添加包：

npm i -D windicss

用法

設(shè)置解釋模式

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

export function generateStyles(html) {
  // Get windi processor
  const processor = new Processor()

  // Parse all classes and put into one line to simplify operations
  const htmlClasses = new HTMLParser(html)
    .parseClasses()
    .map(i => i.result)
    .join(' ')

  // Generate preflight based on the HTML we input
  const preflightSheet = processor.preflight(html)

  // Process the HTML classes to an interpreted style sheet
  const interpretedSheet = processor.interpret(htmlClasses).styleSheet

  // Build styles
  const APPEND = false
  const MINIFY = false
  const styles = interpretedSheet.extend(preflightSheet, APPEND).build(MINIFY)

  return styles
}

使用編譯模式設(shè)置

編譯模式需要更多的工作來將編譯后的類名換成當(dāng)前類名。

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

export function generateStyles(html) {
  // Get windi processor
  const processor = new Processor()

  // Parse HTML to get array of class matches with location
  const parser = new HTMLParser(html)

  // Generate preflight based on the HTML we input
  const preflightSheet = processor.preflight(html)

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

  parser.parseClasses().forEach((p) => {
    // add HTML substring from index to match start
    outputHTML += html.substring(indexStart, p.start)

    // generate stylesheet
    const style = processor.compile(p.result, PREFIX)

    // add the styleSheet to the styles stack
    outputCSS.push(style.styleSheet)

    // append ignored classes and push to output
    outputHTML += [style.className, ...style.ignored].join(' ')

    // mark the end as our new start for next iteration
    indexStart = p.end
  })

  // append the remainder of html
  outputHTML += html.substring(indexStart)

  // Build styles
  const MINIFY = false
  const styles = outputCSS
    // extend the preflight sheet with each sheet from the stack
    .reduce((acc, curr) => acc.extend(curr), preflightSheet)
    .build(MINIFY)

  return {
    styles,
    outputHTML,
  }
}

使用歸因模式設(shè)置

歸因模式需要更多的工作來解析每個(gè)單獨(dú)的屬性。

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

export function generateStyles(html) {
  // Get windi processor
  const processor = new Processor()

  // Parse HTML to get array of class matches with location
  const parser = new HTMLParser(html)

  // Generate preflight based on the HTML we input
  const preflightSheet = processor.preflight(html)

  // Always returns array
  const castArray = val => (Array.isArray(val) ? val : [val])

  const attrs = parser.parseAttrs().reduceRight((acc, curr) => {
    // get current match key
    const attrKey = curr.key

    // ignore class or className attributes
    if (attrKey === 'class' || attrKey === 'className') return acc

    // get current match value as array
    const attrValue = castArray(curr.value)

    // if current match key is already in accumulator
    if (attrKey in acc) {
      // get current attr key value as array
      const attrKeyValue = castArray(acc[attrKey])

      // append current value to accumulator value
      acc[attrKey] = [...attrKeyValue, ...attrValue]
    } else {
      // else add attribute value array to accumulator
      acc[attrKey] = attrValue
    }

    return acc
  }, {})

  // Build styles
  const MINIFY = false
  const styles = processor
    .attributify(attrs)
    .styleSheet.extend(preflightSheet)
    .build(MINIFY)

  return styles
}