search

static-dev / axis

terse, modular & powerful css library
http://axis.netlify.com
Other
320 stars 45 forks source link

Rewrite of grid-area values #337

Open BriceG-D opened 7 years ago

BriceG-D commented 7 years ago

Using this sample code https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas#Example

Actual behaviour

Axis does rename the grid-area: nav; to navigation which does break everything.

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

Expected behaviour

It should not touch the name of the grid-area

jescalan commented 7 years ago

Hey there! So this is actually an issue with the way that stylus works -- any keyword that isn't in quotes will attempt to render a function, even if called without parens. So what it's trying to do is use this function alias.

I'm not sure how to resolve this without making a large breaking change. Honestly I might just fork it and remove that line referenced above, that should solve it. Axis is also in the process of being moved to a postcss plugin since stylus is kind of on it's way to death.

j-walker23 commented 6 years ago

@jescalan Hey, just curious. Why did you say stylus is on it's way to death? I am just about to start a project with it and i noticed your comment while looking at this repo. Do you think/know if this is still true? If so you might have saved me, thanks.

jescalan commented 6 years ago

Hi @j-walker23 -- yeah, I'd recommend postcss for sure. if that's too far, go with sass, although sass will eventually be replaced by postcss as well imo.

j-walker23 commented 6 years ago

@jescalan That's to bad, I just got done going over the full stylus feature set. I have been using sass for 3 or 4 years and stylus seems to have so much more. Thanks for your response.