💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎.
/*
stylify-components
'modal--backdrop': `u-overflow-x:hidden u-overflow-y:hidden u-opacity:0.7`
/stylify-components
*/
//
//
// This file contains several cases and most of them do not work well
// Especially for the build with "rewriteSelectorInFiles" (dynamic class, conditional class) in file or
// components.
//
// In defaultPreset React for example, regexes (selectorAreas) must be taken into account because they are
// common use cases.
//
// All the cases listed here should work by default (selectorAreas). It supports conditional or dynamic classes
//
//
const Index = () => {
const modalBackdropElement = document.getElementsByClassName("a") // build work here -- modal--backdrop
const _class = "stylify"
const dynamicClass = (value) => // conditional/dynamic class
_class === value
? "u-bg:blue u-color:white" //////// build not work here or not work well
: "u-clear:both u-color:black" //////// build not work here or not work well
return (
<div className="a"> // build work here
<div className="header" onClick={...}>
<div
//////// build not work here but regex work on regex101 (with regex options or not)
className={somethingMethod("u-font-size:15px", {
"u-text-uppercase": true,
"u-font-weight:bold": true
})}
//////// build not work here with backtick (multilines)
className={somethingMethod(`u-font-size:15px`, {
"u-text-transform:uppercase": true,
})}
//////// build not work here with backtick (multilines/multiple selectors)
className={somethingMethod(`
u-font-size:15px
`, {
"u-text-transform:uppercase u-font-weight:bold": true,
})}
//////// build not work here multiple back to the line (multilines)
className={somethingMethod(
"u-display:flex u-align-items:baseline u-justify-content:space-between u-width:100%",
{
"u-justify-content:center": true
}
)}
//////// build not work here (inline/backtick)
className={`somethingMethod("u-font-size:15px")`}
//////// another case ↓
className={somethingMethod(
{
"u-m-t:40px": true,
"u-m-b:40px": false,
"u-transform:translate(0px,-5px) u-border:1px_solid_blue u-box-shadow:0px_0px_6px_0px_blue)": true
},
` // backtick
u-box-shadow:0px_0px_0px_0px_black
u-width:270px u-margin:auto
u-font-size:15px u-transition:transform_0.3s_ease hover:transform:translate(0,-5px)
` // backtick
)}
>
...
</div>
</div>
<div className="b"> // build work here
...
</div>
</div>
)
}
export default Index
Describe the bug
This code isn't mangled correctly. https://stackblitz.com/edit/stylify-remix-example-eqmg9w?file=index.txt
Reproduction
.
Logs
System Info