vue-cssgen/rules/position.js

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

const positionValues = {
  'static': 'static',
  'fixed': 'fixed',
  'absolute': 'absolute',
  'relative': 'relative',
  'sticky': 'sticky',
};

const zIndexValues = {
  '0': '0',
  '10': '10',
  '20': '20',
  '30': '30',
  '40': '40',
  '50': '50',
  'auto': 'auto',
};

export default [
  {
    match: /^(static|fixed|absolute|relative|sticky)$/,
    css: cls => {
      return positionValues[cls] ? `.${cls} { position: ${positionValues[cls]}; }` : null;
    },
    group: 'position',
    desc: 'position',
    modifiable: true,
    examples: ['absolute', 'relative', 'fixed'],
    values: positionValues,
    prefix: ''
  },
  {
    match: /^inset-(\d+)$/,
    css: cls => {
      const val = cls.match(/^inset-(\d+)$/)[1];
      return val === '0' ? `.${cls} { top: 0; right: 0; bottom: 0; left: 0; }` : null;
    },
    group: 'position',
    desc: 'inset',
    modifiable: true,
    examples: ['inset-0'],
    values: { '0': '0' },
    prefix: 'inset-'
  },
  {
    match: /^bottom-(\d+)$/,
    css: cls => {
      const val = cls.match(/^bottom-(\d+)$/)[1];
      return val === '0' ? `.${cls} { bottom: 0; }` : null;
    },
    group: 'position',
    desc: 'bottom',
    modifiable: true,
    examples: ['bottom-0'],
    values: { '0': '0' },
    prefix: 'bottom-'
  },
  {
    match: /^z-(\d+|auto)$/,
    css: cls => {
      const val = zIndexValues[cls.match(/^z-(\d+|auto)$/)[1]];
      return val ? `.${cls} { z-index: ${val}; }` : null;
    },
    group: 'position',
    desc: 'z-index',
    modifiable: true,
    examples: ['z-0', 'z-10', 'z-20', 'z-auto'],
    values: zIndexValues,
    prefix: 'z-'
  },
];