| | |
| | | import lineClamp from 'windicss/plugin/line-clamp'; |
| | | import colors from 'windicss/colors'; |
| | | const primaryColor = '#0960bd'; |
| | | |
| | | import { defineConfig } from 'vite-plugin-windicss'; |
| | | |
| | | export default defineConfig({ |
| | | export default { |
| | | darkMode: 'class', |
| | | plugins: [lineClamp, createEnterPlugin()], |
| | | plugins: [createEnterPlugin()], |
| | | theme: { |
| | | extend: { |
| | | colors, |
| | | }, |
| | | screens: { |
| | | sm: '576px', |
| | | md: '768px', |
| | | lg: '992px', |
| | | xl: '1200px', |
| | | '2xl': '1600px', |
| | | zIndex: { |
| | | '-1': '-1', |
| | | }, |
| | | colors: { |
| | | primary: primaryColor, |
| | | }, |
| | | screens: { |
| | | sm: '576px', |
| | | md: '768px', |
| | | lg: '992px', |
| | | xl: '1200px', |
| | | '2xl': '1600px', |
| | | }, |
| | | }, |
| | | }, |
| | | }); |
| | | }; |
| | | |
| | | /** |
| | | * Used for animation when the element is displayed |
| | | * @param maxOutput The larger the maxOutput output, the larger the generated css volume |
| | | * 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) { |
| | | function createEnterPlugin(maxOutput = 6) { |
| | | const createCss = (index: number, d = 'x') => { |
| | | const upd = d.toUpperCase(); |
| | | return { |
| | |
| | | }; |
| | | }; |
| | | const handler = ({ addBase }) => { |
| | | const addRawCss = {}; |
| | | for (let index = 1; index < maxOutput; index++) { |
| | | addBase({ |
| | | Object.assign(addRawCss, { |
| | | ...createCss(index, 'x'), |
| | | ...createCss(index, 'y'), |
| | | }); |
| | | } |
| | | |
| | | addBase({ |
| | | ...addRawCss, |
| | | [`@keyframes enter-x-animation`]: { |
| | | to: { |
| | | opacity: '1', |