search

sakamies / postcss-gridlover

Enables using Gridlover sx and gr units in your CSS
MIT License
13 stars 1 forks source link

Grid units on border do not work. #10

Open custa1200 opened 7 years ago

custa1200 commented 7 years ago

Tried to have a border of 1.5gr and got an unexpected result.

:root {
--base-font-size: 16px;
--base-line-height: 1.5;
--base-scale-factor: 1.618;
--base-units: rem;
font-size: var(--base-font-size);
line-height: var(--base-line-height);
}

.object {
  font-size: 0sx;
  line-height: 0.5gr;
  width: ((1gr)*5);
  height: 2gr;
  border: 1.5gr;
}

renders to 

.object {
  font-size: 1rem;
  line-height: 1.5rem;
  width: 7.5rem;
  height: 3rem;
  border: 1.7.5rem;
}
gavinmcfarland commented 7 years ago

Hi @custa1200 have you tried updating postcss-gridlover to see if the changes that were added a few days ago solve this issue?

custa1200 commented 7 years ago

Still shows the same issue of 1.7.5rem :(

custa1200 commented 7 years ago

If I made it just 1gr with no decimal it works as expected but as soon as I introduce decimals it's causing the issues.

1gr = 1.5rem vs 1.5gr = 1.7.5rem

gavinmcfarland commented 7 years ago

Hi @custa1200, perhaps @sakamies has yet to update the npm version of the plugin. I have tried it using what you provided and this is what it outputs.

html, :root {
--base-font-size: 16px;
--base-line-height: 1.5;
--base-scale-factor: 1.618;
--base-units: rem;
font-size: var(--base-font-size);
line-height: var(--base-line-height);
}
.object {
  font-size: 1rem;
  line-height: 1.5rem;
  width: ((1.5rem)*5);
  height: 3rem;
  border: 2.25rem;
}

You could for the time being manually update the module. Let me know if you need some guidance on how to do that.

sakamies commented 7 years ago

I totally forgot to publish the module. Sorry about that! I'll publish the update now.