Uno.css Bootstrap Preset (unfinished)

uno-bootstrap-preset.ts

import { Preset, Rule } from 'unocss'

const displayRules: Rule[] = 
    ['none','inline','inline-block','block','grid','inline-grid','flex','inline-flex','table','table-row','table-cell']
    .map(display => [`d-${display}`, { display }]);
const flexDirectionRules: Rule[] =
    ['row','row-reverse','column','column-reverse']
    .map(direction => [`flex-${direction}`, { 'flex-direction': direction }]);
const textAlignRules: Rule[] =
    ['left','right','center'].map(alignment => [`text-${alignment}`, { 'text-align': alignment }]);
const textTransformRules: Rule[] =
    ['lowercase','uppercase','capitalize'].map(transform => [`text-${transform}`, { 'text-transform': transform }]);
const borderRules: Rule[] =
    ['border','border-top','border-right','border-bottom','border-left']
    .map(property => [property, { [property]: `var(--border-size, 1px) var(--border-type, solid) var(--border-color, #ccc)` }]);

const overflowValues = ['auto','hidden','visible','scroll'];
const overflowRules: Rule[] = overflowValues.map(value => [`overflow-${value}`, { 'overflow': value }]);
const overflowXRules: Rule[] = overflowValues.map(value => [`overflow-x-${value}`, { 'overflow': value }]);
const overflowYRules: Rule[] = overflowValues.map(value => [`overflow-y-${value}`, { 'overflow': value }]);

const justifyContentRules: Rule[] =
    [
        { c: 'start', v: 'flex-start' },
        { c: 'end', v: 'flex-end' },
        { c: 'center', v: 'center' },
        { c: 'between', v: 'space-between' },
        { c: 'around', v: 'space-around' },
        { c: 'evenly', v: 'space-evenly' },
    ].map(({c, v}) => [`justify-content-${c}`, { 'justify-content': v }]);

const spacingRules: Rule[] = 
    [
        { c: 'p', v: 'padding' },
        { c: 'm', v: 'margin' },
        { c: 'px', v: 'padding-inline' },
        { c: 'mx', v: 'margin-inline' },
        { c: 'py', v: 'padding-block' },
        { c: 'my', v: 'margin-block' },
        { c: 'pt', v: 'padding-top' },
        { c: 'mt', v: 'margin-top' },
        { c: 'pr', v: 'padding-right' },
        { c: 'mr', v: 'margin-right' },
        { c: 'pb', v: 'padding-bottom' },
        { c: 'mb', v: 'margin-bottom' },
        { c: 'pl', v: 'padding-left' },
        { c: 'ml', v: 'margin-left' },
    ].map(({ c, v }) => [
        new RegExp(`^${c}-(\\d)$`),
        ([, size]) => ({ [v]: `${ parseInt(size) * 0.5 }rem` })
    ]);

export default function (): Preset {
    return {
        name: 'bootstrap-preset',
        rules: [
            ...displayRules, ...flexDirectionRules, ...justifyContentRules,
            ...textAlignRules, ...textTransformRules,
            ...borderRules,
            ...overflowRules, ...overflowXRules, ...overflowYRules,
            ...spacingRules,

            [/^opacity\-(\d+)$/, ([, opacity]) => ({ opacity: `${parseInt(opacity) / 100}`})],
            [/^fs\-(\d+)$/, ([, value], { theme }) => ({ 'font-size': `${theme['fontSizes'][value]}rem` })],
            [/^fw\-(\d+)$/, ([, value], { theme }) => ({ 'font-weight': `${theme['fontWeights'][value]}` })],
            [/^border\-([a-z-]+)$/, ([,color], { theme }) => ({ '--border-color': theme['colors'][color] })],
            [/^border\-(\d+)$/, ([, size]) => ({ '--border-size': `${size}px` })],
        ],
        theme: {
            colors: {
                'black': '#111',
                'dark-gray': '#333',
                "mid-gray": '#555',
                'gray': '#777',
                'silver': '#999',
                'light-silver': '#AAA',
                'moon-gray': '#ccc',
                'light-gray': '#eee',
                'near-white': '#f4f4f4',
            },
            fontSizes: {
                1: 1,
                2: 1.25,
                3: 1.5,
                4: 1.75,
                5: 2,
                6: 2.5,
            },
            fontWeights: {
                lighter: 'lighter',
                light: 300,
                normal: 400,
                medium: 500,
                semibold: 600,
                bold: 700,
                bolder: 'bolder',
            },
        }
    }
}