Created
June 4, 2023 22:19
-
-
Save jojojojojoj5564656465465/c500f6f784fe84eac622171104c01752 to your computer and use it in GitHub Desktop.
use my amazing config won't regret
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
defineConfig, | |
presetAttributify, | |
presetIcons, | |
presetTagify, | |
presetWebFonts, | |
presetWind, | |
transformerDirectives, | |
transformerVariantGroup | |
} from 'unocss' | |
export default defineConfig({ | |
//extractors: [extractorSvelte], | |
transformers: [transformerDirectives(), transformerVariantGroup()], | |
presets: [ | |
presetWind(), | |
presetAttributify({ ignoreAttributes: ['block'] }), | |
presetTagify(), | |
presetIcons({ | |
cdn: 'https://esm.sh/', | |
extraProperties: { | |
display: 'inline-block', | |
'vertical-align': 'middle', | |
height: '1.2em', | |
width: '1.2em' | |
} | |
}), | |
presetWebFonts({ | |
provider: 'google', | |
fonts: { | |
// these will extend the default theme | |
// custom ones | |
playfair: [ | |
{ | |
name: 'playfair display', | |
weights: ['200', '500', '800'], | |
italic: false | |
} | |
], | |
ysra: [ | |
{ | |
name: 'ysra', | |
weights: ['200', '400', '600', '800'], | |
italic: true | |
} | |
], | |
hind: [ | |
{ | |
name: 'hind guntur', | |
weights: ['200', '400', '600', '800'], | |
italic: true | |
} | |
] | |
} | |
}) | |
], | |
exclude: [ | |
'node_modules', | |
'dist', | |
'.git', | |
'.husky', | |
'.vscode', | |
'public', | |
'build', | |
'mock', | |
'./stats.html' | |
], | |
rules: [ | |
[ | |
'text-shadow', | |
{ | |
'text-shadow': | |
'-1px -1px 1px #000, 1px -1px 1px #673b2c, -1px 1px 1px #673b2c, 1px 1px 1px #673b2c' | |
} | |
], | |
[ | |
'card-box', | |
{ | |
'box-shadow': '0 0 10px 0 #176a73', | |
border: '2px solid #176a73' | |
} | |
], | |
[ | |
/^flex-(row|col)-([1-9])$/, | |
([, direction, number]) => { | |
type PositionProps = Readonly<'start' | 'center' | 'end' | ''> | |
const positions: Record<number, [PositionProps, PositionProps]> = { | |
1: ['start', 'start'], | |
2: ['center', 'start'], | |
3: ['end', 'start'], | |
4: ['start', 'center'], | |
5: ['center', 'center'], | |
6: ['end', 'center'], | |
7: ['start', 'end'], | |
8: ['center', 'end'], | |
9: ['end', 'end'] | |
} | |
function getPosition(n: number): [PositionProps, PositionProps] { | |
return positions[n] || ['', ''] | |
} | |
//IIFE ==> | |
type Direction = Readonly<'row' | 'col'> | |
const direction2 = ((): 'row' | 'column' => { | |
const d: Direction = direction as Direction; | |
return d === 'row' ? 'row' : 'column'; | |
})() | |
const [justify, align] = getPosition(Number(number)) | |
return { | |
display: 'flex', | |
'flex-direction': direction2, | |
'justify-content': justify, | |
'align-items': align | |
} as const | |
} | |
], | |
[ | |
/^p-(\d+)-(\d+)?-?(\d+)?-?(\d+)?$/, | |
([, t, r, b, l]) => { | |
const effectiveArr: string[] = [t, r, b, l].filter( | |
Boolean | |
) /* check if it's true */ | |
const numReg = /^((?![A-Za-z]).)*$/ /* check no letters */ | |
const paddingList = effectiveArr.map((e): string => | |
numReg.test(e) ? `${~~e / 4}rem` : e | |
) | |
return effectiveArr.length === 0 | |
? { padding: '0px' } | |
: { padding: paddingList.join(' ') } | |
} | |
], | |
[ | |
/^m-(\d+)-(\d+)?-?(\d+)?-?(\d+)?$/, | |
([, t, r, b, l]) => { | |
const numReg = /^((?![A-Za-z]).)*$/ | |
const marginList: string[] = [t, r, b, l] | |
.filter(Boolean) | |
.map((e: string): string => (numReg.test(e) ? `${~~e / 4}rem` : e)) | |
return marginList.length === 0 | |
? { margin: '0px' } | |
: { margin: marginList.join(' ') } | |
} | |
] | |
], | |
shortcuts: [ | |
{ | |
btn: 'focus:outline-none focus:(ring ring-offset-4 ring-4) inline m-0.25 font-semibold rounded-lg shadow-md cursor-pointer md:(p-2-4)' | |
}, | |
[ | |
/^btn-(.*)-(\d+)$/, | |
([, c, d]) => { | |
const e: string = | |
~~d > 500 ? (~~d - 200).toString() : (~~d + 200).toString() | |
return `bg-${c}-${d} hover:bg-${c}-${e} active:rotate-2 focus:(rotate-1 bg-${c}-${e}) font-semibold rounded-lg block border md:inline-block font-medium text-center focus:outline-none focus:ring ` | |
} | |
], | |
[ | |
/^border-(\d)(?<!\\)\|([a-z]+)-([1-8][0-9]{2}|900)$/, | |
([, px, color, power]) => { | |
return `border-${px} border-${color}-${power} border` | |
} | |
], | |
[ | |
/^text-([a-z]+)(?<!\\)\|(.*)$/, | |
([, px, color]) => { | |
return `text-${px} text-${color}` | |
} | |
], | |
[ | |
//text-sm|red-600|center | |
/^text-([a-z]+)(?<!\\)\|(.*)?(?<!\\)\|(start|center|end|justify)?$/, | |
([, px, color, align]) => `text-${px} text-${color} text-${align}` | |
], | |
{ | |
container: | |
'px-1 relative 2xl:px-[calc(50%-(81rem/2))] xl:(px-[calc(50%-(71rem/2))] mx-auto) box-border' | |
}, | |
{ | |
'absolute-center': '-translate-1/2 left-1/2 top-1/2' | |
}, | |
[/^size-(.*)$/, ([, s]) => `h-${s} w-${s}`] | |
], | |
theme: { | |
colors: { | |
primary: '#294936', | |
secondary: '#3E6259', | |
ternary: '#5B8266', | |
text: { | |
dark: '#212922', | |
light: '#AEF6C7' | |
} | |
}, | |
fontFamily: { | |
primary: 'Playfair Display', | |
secondary: 'Yrsa', | |
ternary: 'Hind Guntur' | |
}, | |
fontSize: { | |
cqi: ['clamp(0.60rem, .65cqi, .9cqi)', '1'], | |
xs: ['clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem)', '1'], | |
sm: ['clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem)', '1'], | |
base: ['clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem)', '1'], | |
md: ['clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem)', '1'], | |
lg: ['clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem)', '1'], | |
xl: ['clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem)', '1'], | |
'2xl': ['clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem)', '1'], | |
'3xl': ['clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem)', '1'], | |
'4xl': ['clamp(3.36rem, calc(2.87rem + 2.45vw), 4.77rem)', '1'], | |
'5xl': ['clamp(4.03rem, calc(3.36rem + 3.36vw), 5.96rem)', '1'], | |
'6xl': ['clamp(4.84rem, calc(3.93rem + 4.54vw), 7.45rem)', '1'] | |
}, | |
container: { | |
center: true, | |
padding: { | |
DEFAULT: '1rem', | |
sm: '2rem', | |
lg: '4rem', | |
xl: '5rem', | |
'2xl': '6rem' | |
} | |
}, | |
breakpoints: { | |
xs: '280px', | |
sm: '480px', | |
md: '720px', | |
lg: '1024px', | |
xl: '1280px', | |
'2xl': '1680px' | |
}, | |
aspectRatio: { | |
'4/3': '4 / 3', | |
'1/3': '1 / 3', | |
'1/2': '1 / 2' | |
} | |
}, | |
safelist: 'dark light prose prose-sm m-auto text-left'.split(' ') | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment