kristoferjoseph / postcss-modular-scale

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

TypeError: Cannot read property '0' of undefined #18

Closed eduarddotgg closed 8 years ago

eduarddotgg commented 8 years ago

This is my postcss config:

var postcssPlugins = [
    stylelint({
        configFile: './.stylelintrc'
    })
    , reporter({clearMessages: true})
    , cssInject({
        injectTo: 'fileStart',
        cssFilePath: 'src/_css-variables.css'
    })
    , mscale
    , vars
    , nested
    , minmax
    , customMedia
    , grid({separator: '--'})
    , autoprefixer
];

This is my css:

.copyrights {
    display: block;
    opacity: .3;
    font-size: ms(.8)rem;

    @media screen and (min-width: 640px){
        font-size: ms(1)rem;
    }
}

the problem appears when i add nested media query.

This injects with postcss-inject to the begging of css file

:root {
    --ms-bases: 1, .6;
    --ms-ratios: 1.414;
}

This troughs error too:

.copyrights {
    display: block;
    opacity: .3;
    font-size: ms(.8)rem;
}

@media screen and (min-width: 640px){
    .copyrights {
        font-size: ms(1)rem;
    }
}
eduarddotgg commented 8 years ago

i have found what was the problem:

i used this
font-size: ms(.8)rem;

but this will work:
font-size: ms(0.8)rem;
kristoferjoseph commented 8 years ago

yes. .8 is actually not a valid number. I could pad all numbers with a 0 or just let users input a valid decimal number. I chose the latter.