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

Allow "->" arrows #15

Closed rossjrw closed 4 years ago

rossjrw commented 4 years ago

It'd be really nice to be able to use full ASCII arrows in grid-kiss. I actually thought that unicode arrows were the only available option until I tracked though the source code to make this PR, because the examples only use the unicode arrow and scrolling down would go against every moral bone in my body.

This works really well with ligature fonts such as Fira Code:

Screenshot 2019-11-02 at 00 22 25

Currently, the above syntax would give justify-self: center to an element of type -.conversation-container-.

This PR would allow ASCII arrows (-> and <-) to be used instead of > and <.

sylvainpolletvillard commented 4 years ago

scrolling down would go against every moral bone in my body.

what you mean by "scrolling down" is reading the appropriate section in the documentation ? Because all the examples for horizontal alignment clearly use both < > and ← → characters: https://github.com/sylvainpolletvillard/postcss-grid-kiss#horizontal-alignment-inside-a-zone

Note that not all Unicode arrows are accepted, because they are lots of them. Only → (U+2192, &rightarrow; HTML entity, Alt+26 alt code on Windows) and ← (U+2190, &leftarrow; , Alt+27) are accepted.

If you want to add hyphens to these arrows for your font ligatures or any other reason, I'm going to allow any amount of hyphens, in case someone prefers --> or <-----. Hyphens are already ignored on zone borders, they are only decorative. I won't ignore them entirely for the whole zone content because obviously they are needed in many selectors my-tag, .item-a, :first-child etc. ; but outside the main selector part, I think it is safe to ignore them.

sylvainpolletvillard commented 4 years ago

Done and published in v2.3.0

Closing this PR in favor of https://github.com/sylvainpolletvillard/postcss-grid-kiss/commit/ebe932eb5f74bbc4be8eba201abe079273e1d2b4