Logo Windi CSS

Интерфейсы плагина

Вы можете легко создать плагин через интерфейс windicss. Windicss построен на основе TypeScript, поэтому мы настоятельно рекомендуем вам использовать Typescript для создания плагинов, он даст вам хорошую поддержку типов и советы по завершению, конечно, если вы хотите использовать JavaScript, он также поддерживается.

Добавить статические утилиты

Основное использование 

import plugin from 'windicss/plugin'

plugin(({ addUtilities }) => {
  addUtilities({
    '.aspect-none': {
      'position': 'static',
      'paddingBottom': '0',
      '> *': {
        position: 'static',
        height: 'auto',
        width: 'auto',
        top: 'auto',
        right: 'auto',
        bottom: 'auto',
        left: 'auto',
      },
    },
  })
})

Добавить динамические утилиты

Основное использование 

addDynamic('filter', ({ Utility, Style }) => {
  return Utility.handler
    .handleStatic(Style('filter'))
    .createProperty(['-webkit-filter', 'filter'])
})

Добавить компоненты 

import plugin from 'windicss/plugin'

plugin(({ addComponents }) => {
  addComponents({
    '.btn': {
      padding: '.5rem 1rem',
      borderRadius: '.25rem',
      fontWeight: '600',
    },
    '.btn-blue': {
      'backgroundColor': '#3490dc',
      'color': '#fff',
      '&:hover': {
        backgroundColor: '#2779bd',
      },
    },
  })
})

Добавить варианты

Изменить селекторы 

import plugin from 'windicss/plugin'

plugin(({ addVariant }) => {
  addVariant('pointer-group-hover', ({ modifySelectors }) => {
    return modifySelectors(({ className }) => {
      return `.no-touch .group:hover .${className}`
    })
  })
})

Добавить базовые стили 

import plugin from 'windicss/plugin'

plugin(({ addBase, theme }) => {
  addBase({
    h1: { fontSize: theme('fontSize.2xl') },
    h2: { fontSize: theme('fontSize.xl') },
    h3: { fontSize: theme('fontSize.lg') },
  })
})

Прочие инструменты

CSS Escape

e()

Ручной префикс

prefix()

Получить пользовательские варианты

variants()

Получить тему пользователя

theme()

Получить конфигурацию пользователя

config()

Отладка

Использование интерфейса loadPlugin 

import { Processor } from 'windicss/lib'
import aspectRatio from 'windicss/plugin/aspect-ratio'

describe('Aspect Ratio Plugin', () => {
  it('should generate correct css', () => {
    const processor = new Processor()
    processor.loadPlugin(aspectRatio)
    const result = processor.interpret('aspect-none aspect-w-16 aspect-h-9 aspect-9/16')
    expect(result.ignored.length).toEqual(0)
    expect(result.styleSheet.build()).toEqual('...')
  })
})

Использование конфигурации 

import { Processor } from 'windicss/lib'
import aspectRatio from 'windicss/plugin/aspect-ratio'

describe('Aspect Ratio Plugin', () => {
  it('should generate correct css', () => {
    const processor = new Processor({
      plugins: [
        aspectRatio(),
      ],
    })
    const result = processor.interpret('aspect-none aspect-w-16 aspect-h-9 aspect-9/16')
    expect(result.ignored.length).toEqual(0)
    expect(result.styleSheet.build()).toEqual('...')
  })
})