microsoft / griffel

CSS-in-JS with ahead-of-time compilation ⚡️
https://griffel.js.org
MIT License
1.2k stars 60 forks source link

core: Support object literal with multiline keys #474

Open gaoqiangz opened 11 months ago

gaoqiangz commented 11 months ago
const useStyles = makeStyles({
    root: {
        [`
            & .item:hover,
            & .item-selected
        `]: {
            backgroundColor: '#fff',
        }
    }
});
layershifter commented 11 months ago

FYI, following works:

makeStyles({
  root: {
    [`& .item:hover, & .item-selected`]: {
       backgroundColor: '#fff',
    }
  }
});
Shubhdeep12 commented 5 months ago

Hey @layershifter how about parsing the slots styles first and as you suggested above, fixing the property by something like this - property.replace(/(\r\n|\n|\r)/gm, " ").replace(/\s+/g, " ").trim()

this will remove the multiline and extra spaces