search

sylvainpolletvillard / postcss-grid-kiss

A PostCSS plugin to keep CSS grids stupidly simple
https://sylvainpolletvillard.github.io/grid-kiss-playground/index.html
MIT License
1.32k stars 53 forks source link

Text recognition is line based instead of string based #23

Closed YPetremann closed 3 years ago

YPetremann commented 3 years ago

My current case is this grid which work perfectly:

grid-kiss:
  "+--------------------------+ --   "
  "| .header                  | 48px "
  "+--------------------------+ --   "
  "+--------+ +---------------+ --   "
  "| .aside | | .main         | auto "
  "+--------+ +---------------+ --   "
  "| 48px   | | auto          |      ";

But my current postcss chain transform it to:

grid-kiss: "+--------------------------+ --   " "| header                   | 48px " "+--------------------------+ --   " "+--------+ +---------------+ --   " "| aside  | | main          | auto " "+--------+ +---------------+ --   " "| 48px   | | auto          |      ";

In fact if we follow how css works, it should works too but here grid-kiss can't parse correctly

sylvainpolletvillard commented 3 years ago

Hello,

I should be able to fix this, I don't see any reason why this shouldn't work.

In the mean time, the easiest workaround is to change the order of your PostCSS transforms to make cssnano/your other minifier run after postcss-grid-kiss

sylvainpolletvillard commented 3 years ago

should be fixed in 3.0.2 :)

YPetremann commented 3 years ago

In the mean time, the easiest workaround is to change the order of your PostCSS transforms to make cssnano/your other minifier run after postcss-grid-kiss

The fact is that I couldn't do that because the transform I applied responsible of the minification was also the one that permitted to alias grid-kiss from grid-template-kiss (and I've done that because prettier didn't want to keep one string by line and any grid-template-* property are kept one string by line)