search

kristoferjoseph / postcss-modular-scale

PostCSS plugin for adding modular scale to your styles
MIT License
53 stars 9 forks source link

Not using the defined variable. #24

Open janwirth opened 8 years ago

janwirth commented 8 years ago

I am using this module with the spike build system. Spike uses SugarSS by default.

When I try to change the ratios it has no effect.

:root
  --ms-bases: 1, 0.75
  --ms-ratios: 1.2

h2
  ms: var(--ms-ratios) // 1.2
  font-size: ms(1)em // 1.618em

Any idea on how to resolve this?

lkraav commented 8 years ago

I'm seeing the same thing.

mrmartineau commented 7 years ago

@kristoferjoseph have you had a chance to look into this? I am also experiencing a similar problem: no matter what values I choose for the --ms-bases and --ms-ratios variables, the output is always the same. I am happy to help you debug this but I am brand new to PostCSS so might need some help?

With these settings:

:root {
    --ms-bases: 20;
    --ms-ratios: 1.125;
}

.foo {
    bases: var(--ms-bases);
    ratios: var(--ms-ratios);
    ms1: ms(1);
    ms2: ms(2);
}

I get this output:

.foo {
    bases: 20;
    ratios: 1.125;
    ms1: 1.618rem;
    ms2: 2.618rem;
}

When I should be getting this result:

.foo {
    bases: 20;
    ratios: 1.125;
    ms1: 1.125rem;
    ms2: 1.266rem;
}

Are you maintaining this repo anymore?

monkeez commented 7 years ago

I'm getting this also, makes using this plugin kind of pointless.

mzedeler commented 6 years ago

This works for me. It may be related to the load order that you have in postcss. My postcss.config.js file looks like this:

module.exports = {
  plugins: [
    require('postcss-modular-scale'),
    require('postcss-custom-properties')({
      preserve: false,
    }),
  ]
};

If I change the order of the two plugins, postcss-custom-properties removes the variables that postcss-modular-scale expects to find, and it stops working.