erikjung / postcss-modular-scale-unit

PostCSS plugin to support a unit for modular scale numbers
MIT License
9 stars 1 forks source link

Some msu values are incorrectly ordered or missing #15

Closed adrinux closed 8 years ago

adrinux commented 8 years ago

There seem to be two probably interconnected issues here. Firstly, when compared to modularscale.com's calculator the lowest value (-6) is missing causing all values to be off by one (except 0msu). As a result the value for 1msu ends up at -1msu.

You can test output msu values with a little css of course (change the selector if you don't have a header element):

header::after {
  content: "-6msu, -5msu, -4msu, -3msu, -2msu, -1msu, 0msu, 1msu, 2msu, 3msu, 4msu, 5msu, 6msu, 7msu, 8msu, 9msu, 10msu";
  color: red;
}

I'm using the following for config:

:root {
  --modular-scale: 1.125 1 1.225;
}

And here's the relevant results on modularscale.com

To make this a little clearer:

units == output == modularscale.com
-6msu == 0.765  == 0.702
-5msu == 0.790  == 0.765
-4msu == 0.860  == 0.790
-3msu == 0.889  == 0.860
-2msu == 0.968  == 0.889
-1msu == 1.089  == 0.968
-0msu == 1      == 1
 1msu == 1.125  == 1.089
 2msu == 1.225  == 1.125
 3msu == 1.266  == 1.225
 4msu == 1.378  == and so on
 5msu == 1.424
 6msu == 1.550
 7msu == 1.602
 8msu == 1.744
 9msu == 1.802
10msu == 1.962
adrinux commented 8 years ago

Further investigation. The config used in tests seems to work perfectly, specifically:

:root {
  --modular-scale: 1.5 1 1.125 1.25;
}

Will experiment with different ratios.

adrinux commented 8 years ago

It seems that the two ratios, minor second and major second, cause issues no matter what bases are used. e.g.

--modular-scale: 1.067 1 1.125;
or
--modular-scale: 1.125 1 1.33;

That the numbers come out different from modularscale.com is one thing, but missing numbers and numbers higher than one listed below one is obviously a problem.

EDITED: Correction. Choice of base does make a difference, using the square root of the ratio for the second base (as you suggested elsewhere) works ok:

  --modular-scale: 1.125 1 1.061;
erikjung commented 8 years ago

At first glance, this appears to be an issue whenever the ratio is smaller than the second base value. Good catch, I'll look into this.

erikjung commented 8 years ago

@adrinux These issues should now be gone in v0.3.4.

https://www.npmjs.com/package/postcss-modular-scale-unit

I ended up taking this as an opportunity to fully rewrite the internal class used by the plugin. Should be more solid overall now.

A few test fixtures were added to account for your use case:

https://github.com/erikjung/postcss-modular-scale-unit/blob/master/test/basesLarger-in.css https://github.com/erikjung/postcss-modular-scale-unit/blob/master/test/basesLarger-out.css

adrinux commented 8 years ago

Confirmed working as expected now. Thanks for the quick fix :)