generated `utils.css.ts` for margin, padding of "vanilla-extract"

import fs from 'fs';
import path from 'path';

const sizes = [1, 2, 4, 6, 8, 10, 12, 16, 20] as const;
const spaceSuffix = ['y', 'x', 't', 'r', 'b', 'l'] as const;
type SpaceSuffix = typeof spaceSuffix[number];

let output =
  "import { style } from '@vanilla-extract/css';\n" +
  "import { vars } from './variables.css';\n\n";

const getSpaceStyle = ({
  property,
  suffix,
  value,
}: {
  property: 'margin' | 'padding';
  suffix?: SpaceSuffix;
  value: string;
}) => {
  let output = 'style({\n';
  switch (suffix) {
    case 'y': {
      output += `  ${property}Top: ${value},\n  ${property}Bottom: ${value},\n`;
      break;
    }
    case 'x': {
      output += `  ${property}Right: ${value},\n  ${property}Left: ${value},\n`;
      break;
    }
    case 't': {
      output += `  ${property}Top: ${value},\n`;
      break;
    }
    case 'r': {
      output += `  ${property}Right: ${value},\n`;
      break;
    }
    case 'b': {
      output += `  ${property}Bottom: ${value},\n`;
      break;
    }
    case 'l': {
      output += `  ${property}Left: ${value},\n`;
      break;
    }
    default: {
      output += `  ${property}: ${value},\n`;
    }
  }
  output += '});\n\n';

  return output;
};

output += '// margin\n';
output += `export const m_auto = ${getSpaceStyle({
  property: 'margin',
  value: `'auto'`,
})}`;
spaceSuffix.forEach((suffix) => {
  output += `export const m${suffix}_auto = ${getSpaceStyle({
    property: 'margin',
    suffix,
    value: `'auto'`,
  })}`;
});
sizes.forEach((size) => {
  output += `export const m_${size} = ${getSpaceStyle({
    property: 'margin',
    value: `vars.space[${size}]`,
  })}`;
  spaceSuffix.forEach((suffix) => {
    output += `export const m${suffix}_${size} = ${getSpaceStyle({
      property: 'margin',
      suffix,
      value: `vars.space[${size}]`,
    })}`;
  });
});

output += '// padding\n';
output += `export const p_auto = ${getSpaceStyle({
  property: 'padding',
  value: `'auto'`,
})}`;
spaceSuffix.forEach((suffix) => {
  output += `export const p${suffix}_auto = ${getSpaceStyle({
    property: 'padding',
    suffix,
    value: `'auto'`,
  })}`;
});
sizes.forEach((size) => {
  output += `export const p_${size} = ${getSpaceStyle({
    property: 'padding',
    value: `vars.space[${size}]`,
  })}`;
  spaceSuffix.forEach((suffix) => {
    output += `export const p${suffix}_${size} = ${getSpaceStyle({
      property: 'padding',
      suffix,
      value: `vars.space[${size}]`,
    })}`;
  });
});

fs.writeFileSync(path.join(__dirname, 'utils.css.ts'), output);

import { createGlobalTheme } from '@vanilla-extract/css';

export const vars = createGlobalTheme(':root', {
  space: {
    1: '8px',
    2: '16px',
    4: '32px',
    6: '48px',
    8: '64px',
    10: '80px',
    12: '96px',
    16: '128px',
    20: '160px',
  },
});

import { style } from '@vanilla-extract/css';
import { vars } from './variables.css';

// margin
export const m_auto = style({
  margin: 'auto',
});

export const my_auto = style({
  marginTop: 'auto',
  marginBottom: 'auto',
});

export const mx_auto = style({
  marginRight: 'auto',
  marginLeft: 'auto',
});

export const mt_auto = style({
  marginTop: 'auto',
});

export const mr_auto = style({
  marginRight: 'auto',
});

export const mb_auto = style({
  marginBottom: 'auto',
});

export const ml_auto = style({
  marginLeft: 'auto',
});

export const m_1 = style({
  margin: vars.space[1],
});

export const my_1 = style({
  marginTop: vars.space[1],
  marginBottom: vars.space[1],
});

export const mx_1 = style({
  marginRight: vars.space[1],
  marginLeft: vars.space[1],
});

export const mt_1 = style({
  marginTop: vars.space[1],
});

export const mr_1 = style({
  marginRight: vars.space[1],
});

export const mb_1 = style({
  marginBottom: vars.space[1],
});

export const ml_1 = style({
  marginLeft: vars.space[1],
});

export const m_2 = style({
  margin: vars.space[2],
});

export const my_2 = style({
  marginTop: vars.space[2],
  marginBottom: vars.space[2],
});

export const mx_2 = style({
  marginRight: vars.space[2],
  marginLeft: vars.space[2],
});

export const mt_2 = style({
  marginTop: vars.space[2],
});

export const mr_2 = style({
  marginRight: vars.space[2],
});

export const mb_2 = style({
  marginBottom: vars.space[2],
});

export const ml_2 = style({
  marginLeft: vars.space[2],
});

export const m_4 = style({
  margin: vars.space[4],
});

export const my_4 = style({
  marginTop: vars.space[4],
  marginBottom: vars.space[4],
});

export const mx_4 = style({
  marginRight: vars.space[4],
  marginLeft: vars.space[4],
});

export const mt_4 = style({
  marginTop: vars.space[4],
});

export const mr_4 = style({
  marginRight: vars.space[4],
});

export const mb_4 = style({
  marginBottom: vars.space[4],
});

export const ml_4 = style({
  marginLeft: vars.space[4],
});

export const m_6 = style({
  margin: vars.space[6],
});

export const my_6 = style({
  marginTop: vars.space[6],
  marginBottom: vars.space[6],
});

export const mx_6 = style({
  marginRight: vars.space[6],
  marginLeft: vars.space[6],
});

export const mt_6 = style({
  marginTop: vars.space[6],
});

export const mr_6 = style({
  marginRight: vars.space[6],
});

export const mb_6 = style({
  marginBottom: vars.space[6],
});

export const ml_6 = style({
  marginLeft: vars.space[6],
});

export const m_8 = style({
  margin: vars.space[8],
});

export const my_8 = style({
  marginTop: vars.space[8],
  marginBottom: vars.space[8],
});

export const mx_8 = style({
  marginRight: vars.space[8],
  marginLeft: vars.space[8],
});

export const mt_8 = style({
  marginTop: vars.space[8],
});

export const mr_8 = style({
  marginRight: vars.space[8],
});

export const mb_8 = style({
  marginBottom: vars.space[8],
});

export const ml_8 = style({
  marginLeft: vars.space[8],
});

export const m_10 = style({
  margin: vars.space[10],
});

export const my_10 = style({
  marginTop: vars.space[10],
  marginBottom: vars.space[10],
});

export const mx_10 = style({
  marginRight: vars.space[10],
  marginLeft: vars.space[10],
});

export const mt_10 = style({
  marginTop: vars.space[10],
});

export const mr_10 = style({
  marginRight: vars.space[10],
});

export const mb_10 = style({
  marginBottom: vars.space[10],
});

export const ml_10 = style({
  marginLeft: vars.space[10],
});

export const m_12 = style({
  margin: vars.space[12],
});

export const my_12 = style({
  marginTop: vars.space[12],
  marginBottom: vars.space[12],
});

export const mx_12 = style({
  marginRight: vars.space[12],
  marginLeft: vars.space[12],
});

export const mt_12 = style({
  marginTop: vars.space[12],
});

export const mr_12 = style({
  marginRight: vars.space[12],
});

export const mb_12 = style({
  marginBottom: vars.space[12],
});

export const ml_12 = style({
  marginLeft: vars.space[12],
});

export const m_16 = style({
  margin: vars.space[16],
});

export const my_16 = style({
  marginTop: vars.space[16],
  marginBottom: vars.space[16],
});

export const mx_16 = style({
  marginRight: vars.space[16],
  marginLeft: vars.space[16],
});

export const mt_16 = style({
  marginTop: vars.space[16],
});

export const mr_16 = style({
  marginRight: vars.space[16],
});

export const mb_16 = style({
  marginBottom: vars.space[16],
});

export const ml_16 = style({
  marginLeft: vars.space[16],
});

export const m_20 = style({
  margin: vars.space[20],
});

export const my_20 = style({
  marginTop: vars.space[20],
  marginBottom: vars.space[20],
});

export const mx_20 = style({
  marginRight: vars.space[20],
  marginLeft: vars.space[20],
});

export const mt_20 = style({
  marginTop: vars.space[20],
});

export const mr_20 = style({
  marginRight: vars.space[20],
});

export const mb_20 = style({
  marginBottom: vars.space[20],
});

export const ml_20 = style({
  marginLeft: vars.space[20],
});

// padding
export const p_auto = style({
  padding: 'auto',
});

export const py_auto = style({
  paddingTop: 'auto',
  paddingBottom: 'auto',
});

export const px_auto = style({
  paddingRight: 'auto',
  paddingLeft: 'auto',
});

export const pt_auto = style({
  paddingTop: 'auto',
});

export const pr_auto = style({
  paddingRight: 'auto',
});

export const pb_auto = style({
  paddingBottom: 'auto',
});

export const pl_auto = style({
  paddingLeft: 'auto',
});

export const p_1 = style({
  padding: vars.space[1],
});

export const py_1 = style({
  paddingTop: vars.space[1],
  paddingBottom: vars.space[1],
});

export const px_1 = style({
  paddingRight: vars.space[1],
  paddingLeft: vars.space[1],
});

export const pt_1 = style({
  paddingTop: vars.space[1],
});

export const pr_1 = style({
  paddingRight: vars.space[1],
});

export const pb_1 = style({
  paddingBottom: vars.space[1],
});

export const pl_1 = style({
  paddingLeft: vars.space[1],
});

export const p_2 = style({
  padding: vars.space[2],
});

export const py_2 = style({
  paddingTop: vars.space[2],
  paddingBottom: vars.space[2],
});

export const px_2 = style({
  paddingRight: vars.space[2],
  paddingLeft: vars.space[2],
});

export const pt_2 = style({
  paddingTop: vars.space[2],
});

export const pr_2 = style({
  paddingRight: vars.space[2],
});

export const pb_2 = style({
  paddingBottom: vars.space[2],
});

export const pl_2 = style({
  paddingLeft: vars.space[2],
});

export const p_4 = style({
  padding: vars.space[4],
});

export const py_4 = style({
  paddingTop: vars.space[4],
  paddingBottom: vars.space[4],
});

export const px_4 = style({
  paddingRight: vars.space[4],
  paddingLeft: vars.space[4],
});

export const pt_4 = style({
  paddingTop: vars.space[4],
});

export const pr_4 = style({
  paddingRight: vars.space[4],
});

export const pb_4 = style({
  paddingBottom: vars.space[4],
});

export const pl_4 = style({
  paddingLeft: vars.space[4],
});

export const p_6 = style({
  padding: vars.space[6],
});

export const py_6 = style({
  paddingTop: vars.space[6],
  paddingBottom: vars.space[6],
});

export const px_6 = style({
  paddingRight: vars.space[6],
  paddingLeft: vars.space[6],
});

export const pt_6 = style({
  paddingTop: vars.space[6],
});

export const pr_6 = style({
  paddingRight: vars.space[6],
});

export const pb_6 = style({
  paddingBottom: vars.space[6],
});

export const pl_6 = style({
  paddingLeft: vars.space[6],
});

export const p_8 = style({
  padding: vars.space[8],
});

export const py_8 = style({
  paddingTop: vars.space[8],
  paddingBottom: vars.space[8],
});

export const px_8 = style({
  paddingRight: vars.space[8],
  paddingLeft: vars.space[8],
});

export const pt_8 = style({
  paddingTop: vars.space[8],
});

export const pr_8 = style({
  paddingRight: vars.space[8],
});

export const pb_8 = style({
  paddingBottom: vars.space[8],
});

export const pl_8 = style({
  paddingLeft: vars.space[8],
});

export const p_10 = style({
  padding: vars.space[10],
});

export const py_10 = style({
  paddingTop: vars.space[10],
  paddingBottom: vars.space[10],
});

export const px_10 = style({
  paddingRight: vars.space[10],
  paddingLeft: vars.space[10],
});

export const pt_10 = style({
  paddingTop: vars.space[10],
});

export const pr_10 = style({
  paddingRight: vars.space[10],
});

export const pb_10 = style({
  paddingBottom: vars.space[10],
});

export const pl_10 = style({
  paddingLeft: vars.space[10],
});

export const p_12 = style({
  padding: vars.space[12],
});

export const py_12 = style({
  paddingTop: vars.space[12],
  paddingBottom: vars.space[12],
});

export const px_12 = style({
  paddingRight: vars.space[12],
  paddingLeft: vars.space[12],
});

export const pt_12 = style({
  paddingTop: vars.space[12],
});

export const pr_12 = style({
  paddingRight: vars.space[12],
});

export const pb_12 = style({
  paddingBottom: vars.space[12],
});

export const pl_12 = style({
  paddingLeft: vars.space[12],
});

export const p_16 = style({
  padding: vars.space[16],
});

export const py_16 = style({
  paddingTop: vars.space[16],
  paddingBottom: vars.space[16],
});

export const px_16 = style({
  paddingRight: vars.space[16],
  paddingLeft: vars.space[16],
});

export const pt_16 = style({
  paddingTop: vars.space[16],
});

export const pr_16 = style({
  paddingRight: vars.space[16],
});

export const pb_16 = style({
  paddingBottom: vars.space[16],
});

export const pl_16 = style({
  paddingLeft: vars.space[16],
});

export const p_20 = style({
  padding: vars.space[20],
});

export const py_20 = style({
  paddingTop: vars.space[20],
  paddingBottom: vars.space[20],
});

export const px_20 = style({
  paddingRight: vars.space[20],
  paddingLeft: vars.space[20],
});

export const pt_20 = style({
  paddingTop: vars.space[20],
});

export const pr_20 = style({
  paddingRight: vars.space[20],
});

export const pb_20 = style({
  paddingBottom: vars.space[20],
});

export const pl_20 = style({
  paddingLeft: vars.space[20],
});