vue-cssgen/rules/sizes.js

Инструмент для автоматизации работы со стилями в Vue 3-проектах

const sizeValues = {
  'auto': 'auto',
  'full': '100%',
  'screen': '100vw',
  '4': '1rem',
  '8': '2rem',
};

const minHeightValues = {
  'screen': '100vh',
};

export default [
  {
    match: /^w-(auto|full|screen|\d+)$/,
    css: cls => {
      const val = sizeValues[cls.match(/^w-(auto|full|screen|\d+)$/)[1]];
      return val ? `.${cls} { width: ${val}; }` : null;
    },
    group: 'sizing',
    desc: 'width',
    modifiable: true,
    examples: ['w-auto', 'w-full', 'w-4'],
    values: sizeValues,
    prefix: 'w-'
  },
  {
    match: /^h-(auto|full|screen|\d+)$/,
    css: cls => {
      const val = sizeValues[cls.match(/^h-(auto|full|screen|\d+)$/)[1]];
      return val ? `.${cls} { height: ${val}; }` : null;
    },
    group: 'sizing',
    desc: 'height',
    modifiable: true,
    examples: ['h-auto', 'h-full', 'h-4'],
    values: sizeValues,
    prefix: 'h-'
  },
  {
    match: /^min-h-(screen)$/,
    css: cls => {
      const val = minHeightValues[cls.match(/^min-h-(screen)$/)[1]];
      return val ? `.${cls} { min-height: ${val}; }` : null;
    },
    group: 'sizing',
    desc: 'min-height',
    modifiable: true,
    examples: ['min-h-screen'],
    values: minHeightValues,
    prefix: 'min-h-'
  },
];