cldV2react/unocss.config.ts

import { defineConfig, presetWind } from 'unocss'
import proSettings from './config/defaultSettings'
export function createConfig({ dev = true } = {}) {
  return defineConfig({
    envMode: dev ? 'dev' : 'build',
    presets: [presetWind()],
    theme: {
      colors: {
        primary: proSettings.primaryColor
      },
      screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        '2xl': '1600px'
      },
      boxShadow: {
        card: '0 0 13px 0 rgba(74, 53, 107, 0.08)'
      }
    },
    preflights: [
      {
        getCSS: () =>
          `*> .enter-x:nth-child(1) {transform:translateX(50px);}*> .-enter-x:nth-child(1) {transform:translateX(-50px);}* > .enter-x:nth-child(1),* > .-enter-x:nth-child(1) {z-index:9;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.1s;}*> .enter-y:nth-child(1) {transform:translateY(50px);}*> .-enter-y:nth-child(1) {transform:translateY(-50px);}* > .enter-y:nth-child(1),* > .-enter-y:nth-child(1) {z-index:9;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.1s;}*> .enter-x:nth-child(2) {transform:translateX(50px);}*> .-enter-x:nth-child(2) {transform:translateX(-50px);}* > .enter-x:nth-child(2),* > .-enter-x:nth-child(2) {z-index:8;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.2s;}*> .enter-y:nth-child(2) {transform:translateY(50px);}*> .-enter-y:nth-child(2) {transform:translateY(-50px);}* > .enter-y:nth-child(2),* > .-enter-y:nth-child(2) {z-index:8;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.2s;}*> .enter-x:nth-child(3) {transform:translateX(50px);}*> .-enter-x:nth-child(3) {transform:translateX(-50px);}* > .enter-x:nth-child(3),* > .-enter-x:nth-child(3) {z-index:7;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.3s;}*> .enter-y:nth-child(3) {transform:translateY(50px);}*> .-enter-y:nth-child(3) {transform:translateY(-50px);}* > .enter-y:nth-child(3),* > .-enter-y:nth-child(3) {z-index:7;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.3s;}*> .enter-x:nth-child(4) {transform:translateX(50px);}*> .-enter-x:nth-child(4) {transform:translateX(-50px);}* > .enter-x:nth-child(4),* > .-enter-x:nth-child(4) {z-index:6;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.4s;}*> .enter-y:nth-child(4) {transform:translateY(50px);}*> .-enter-y:nth-child(4) {transform:translateY(-50px);}* > .enter-y:nth-child(4),* > .-enter-y:nth-child(4) {z-index:6;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.4s;}*> .enter-x:nth-child(5) {transform:translateX(50px);}*> .-enter-x:nth-child(5) {transform:translateX(-50px);}* > .enter-x:nth-child(5),* > .-enter-x:nth-child(5) {z-index:5;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.5s;}*> .enter-y:nth-child(5) {transform:translateY(50px);}*> .-enter-y:nth-child(5) {transform:translateY(-50px);}* > .enter-y:nth-child(5),* > .-enter-y:nth-child(5) {z-index:5;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.5s;}*> .enter-x:nth-child(6) {transform:translateX(50px);}*> .-enter-x:nth-child(6) {transform:translateX(-50px);}* > .enter-x:nth-child(6),* > .-enter-x:nth-child(6) {z-index:4;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.6s;}*> .enter-y:nth-child(6) {transform:translateY(50px);}*> .-enter-y:nth-child(6) {transform:translateY(-50px);}* > .enter-y:nth-child(6),* > .-enter-y:nth-child(6) {z-index:4;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.6s;}*> .enter-x:nth-child(7) {transform:translateX(50px);}*> .-enter-x:nth-child(7) {transform:translateX(-50px);}* > .enter-x:nth-child(7),* > .-enter-x:nth-child(7) {z-index:3;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.7s;}*> .enter-y:nth-child(7) {transform:translateY(50px);}*> .-enter-y:nth-child(7) {transform:translateY(-50px);}* > .enter-y:nth-child(7),* > .-enter-y:nth-child(7) {z-index:3;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.7s;}*> .enter-x:nth-child(8) {transform:translateX(50px);}*> .-enter-x:nth-child(8) {transform:translateX(-50px);}* > .enter-x:nth-child(8),* > .-enter-x:nth-child(8) {z-index:2;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.8s;}*> .enter-y:nth-child(8) {transform:translateY(50px);}*> .-enter-y:nth-child(8) {transform:translateY(-50px);}* > .enter-y:nth-child(8),* > .-enter-y:nth-child(8) {z-index:2;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.8s;}*> .enter-x:nth-child(9) {transform:translateX(50px);}*> .-enter-x:nth-child(9) {transform:translateX(-50px);}* > .enter-x:nth-child(9),* > .-enter-x:nth-child(9) {z-index:1;opacity:0;animation:enter-x-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.9s;}*> .enter-y:nth-child(9) {transform:translateY(50px);}*> .-enter-y:nth-child(9) {transform:translateY(-50px);}* > .enter-y:nth-child(9),* > .-enter-y:nth-child(9) {z-index:1;opacity:0;animation:enter-y-animation 0.4s ease-in-out 0.3s;animation-fill-mode:forwards;animation-delay:0.9s;}@keyframes enter-x-animation {to {opacity:1;transform:translateX(0);}}@keyframes enter-y-animation {to {opacity:1;transform:translateY(0);}}`
      }
    ]
    // preflights: [
    //   {
    //     getCSS: () => createEnterPlugin()
    //   }
    // ]
    // transformers: [transformerDirectives()]
    // rules: [createEnterPlugin()]
    // variants: [createEnterPlugin()]
  })
}

export default createConfig()
/**
 * Used for animation when the element is displayed
 * @param maxOutput The larger the maxOutput output, the larger the generated css volume
 */
// function createEnterPlugin(maxOutput = 10): string {
//   const createCss = (index: number, d = 'x') => {
//     const upd = d.toUpperCase()
//     return {
//       [`*> .enter-${d}:nth-child(${index})`]: {
//         transform: `translate${upd}(50px)`
//       },
//       [`*> .-enter-${d}:nth-child(${index})`]: {
//         transform: `translate${upd}(-50px)`
//       },
//       [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
//         'z-index': `${10 - index}`,
//         opacity: '0',
//         animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
//         'animation-fill-mode': 'forwards',
//         'animation-delay': `${(index * 1) / 10}s`
//       }
//     }
//   }
//   const handler = () => {
//     const addRawCss = {}
//     for (let index = 1; index < maxOutput; index++) {
//       Object.assign(addRawCss, {
//         ...createCss(index, 'x'),
//         ...createCss(index, 'y')
//       })
//     }
//     const entriesToCss = (arr?: CSSEntries) => {
//       if (!arr) return ''
//       return clearIdenticalEntries(arr)
//         .map(([key, value]) => {
//           if (isObject(value)) {
//             return value !== null ? `${key} {${entriesToCss(normalizeCSSEntries(value))}}` : undefined
//           }
//           return value !== null ? `${key}:${value};` : undefined
//         })
//         .filter(Boolean)
//         .join('')
//     }
//     return entriesToCss(
//       normalizeCSSEntries({
//         ...addRawCss,
//         [`@keyframes enter-x-animation`]: {
//           to: {
//             opacity: '1',
//             transform: 'translateX(0)'
//           }
//         },
//         [`@keyframes enter-y-animation`]: {
//           to: {
//             opacity: '1',
//             transform: 'translateY(0)'
//           }
//         }
//       })
//     )
//   }
//   return handler()
// }