Still in development
git clone https://github.com/lamualfa/csure.git
cd csrure
pnpm i
pnpm dev
Preset value.
const presets = {
keys: {
// key: [CSS Attributes or properties, group values]
mt: ['margin-top', 'spacing'],
pr: ['padding-right', 'spacing'],
},
values: {
spacing: (val) => {
return `${parseInt(val) * 0.25}rem`;
},
},
};
-mt-2 pr-1 pr-3
pr-1
will be override withpr-3
.-mt-2 {
margin-top: -0.5rem;
}
.pr-3 {
padding-right: 0.75rem;
}
Variants grouping.
pr-3 hover:md(text-lg pt-1) =sm(bg-green.200)
md
for Medium screen or larger.=sm
for Small screen only.
.pr-3 {
padding-right: 0.75rem;
}
/* In Progress */
@media (min-width: 640px) {
.hover\:md\(text-lg\ pt-1\):hover {
font-size: 3rem;
}
.hover\:md\(text-lg\ pt-1\):hover {
padding-top: 0.25rem;
}
}
/* In Progress */
@media (min-width: 480px) and (max-width: 640px) {
.\=sm\(bg-green\.200\) {
background-color: #00ff00;
}
}
In production,
=sm(bg-green.200)
will replace by short unique identifier likeaaa
,aab
,aac
, etc.
Dynamic value. No presets needed.
-mt-5rem p-10rem bg-#fff
.-mt-5rem {
margin-top: -5rem;
}
.p-10rem {
padding: 1rem;
}
.bg-\#fff {
background-color: #fff;
}