oled-nnw/uno.config.ts

import fs from 'node:fs'
import { defineConfig, presetAttributify, presetIcons, presetTypography, presetUno } from 'unocss'
import { ARTICLE_TEXT, DIRECTORY_NAME } from './constant'

function getMainCss() {
  const env = process.env.NODE_ENV
  const input = fs.readFileSync('main.css', 'utf8')
  if (env === 'development')
    return input
  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
  const CleanCSS = require('clean-css')
  return new CleanCSS().minify(input).styles
}

export default defineConfig({
  cli: {
    entry: {
      patterns: [`${DIRECTORY_NAME}/template.html`],
      outFile: `${DIRECTORY_NAME}/stylesheet.css`,
    },
  },

  shortcuts: [
    [/^(.*)Text$/, ([,c]) => `text-${ARTICLE_TEXT[c]}`],
    {
      link: 'text-dark dark:text-white no-underline border-bottom-',
    },
  ],

  theme: {
    maxWidth: {
      prose: '80ch',
    },
    fontFamily: {
      sans: ['ui-sans-serif', 'system-ui'],
      serif: ['ui-serif', 'Georgia'],
      mono: ['ui-monospace', 'SFMono-Regular'],
      display: ['ui-sans-serif'],
      body: ['ui-sans-serif'],
    },
  },

  presets: [
    presetUno({
      dark: 'media',
    }),
    presetAttributify(),
    presetIcons({
      extraProperties: {
        display: 'inline-block',
      },
    }),
    presetTypography({
      cssExtend: {
        'h1': {
          color: 'var(--c-text-base)',
        },
        'a': {
          'color': 'var(--c-prose-links)',
          'text-decoration': 'none',
          'border-bottom': '1px dashed currentColor',
          'padding-bottom': '2px',
          'font-weight': '500',
        },
        'a:hover': {
          color: 'var(--c-prose-primary)',
        },
        'blockquote': {
          'font-style': 'none',
          'color': 'var(--c-blockquote)',
          'border-left': '.2em solid var(--c-prose-borders)',
        },
        'hr': {
          'width': '48px',
          'height': '2px',
          'background': 'var(--c-prose-hr)',
          'border-radius': '24px',
          'margin': '2em auto',
          'border': 'none',
          'opacity': '0.5',
        },

        'code': {
          'color': 'var(--c-prose-code)',
          'font-size': '.875em',
          'font-family': 'var(--un-prose-font-mono)',
          'background': 'var(--c-prose-inline-bg-color) !important',
          'padding': '0.2rem 0.375rem',
          'border-radius': '0.25rem',
          'font-weight': 400,
        },

        'pre,code': {
          background: 'var(--c-prose-pre-bg)',
        },

        'pre > code': {
          background: 'transparent !important',
        },

        'pre': {
          border: '1px solid var(--c-prose-pre-border)',
          background: 'var(--c-prose-pre-bg)',
        },

        ':not(pre) > code::before,:not(pre) > code::after': {
          content: '',
        },
      },
    }),
  ],

  preflights: [
    {
      layer: 'my-style',
      getCSS: () => getMainCss(),
    },
  ],

  safelist: [...Object.keys(ARTICLE_TEXT).map(i => `${i}Text`)],
})