vue-cssgen/rules/opacity.js

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

const opacityValues = {
  '0': '0',
  '25': '0.25',
  '50': '0.5',
  '75': '0.75',
  '100': '1',
};

export default [
  {
    match: /^opacity-(\d+)$/,
    css: cls => {
      const val = opacityValues[cls.match(/^opacity-(\d+)$/)[1]];
      return val ? `.${cls} { opacity: ${val}; }` : null;
    },
    group: 'effect',
    desc: 'opacity',
    modifiable: true,
    examples: ['opacity-25', 'opacity-50', 'opacity-100'],
    values: opacityValues,
    prefix: 'opacity-'
  },
];