Impossible to use rems if set responsive on html? about rucksack HOT 7 CLOSED

Sorry, seems like everything working just fine. 👍

from rucksack.

I have the same problem.
My configuration in gulpfile.js looks like this:

gulp.task('css', () => {
  gulp.src(srcPaths.styl)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(stylus({
      use: [
        rupture(),
        poststylus([
          lost(),
          fontMagician(),
          rucksack({
            fallbacks: true,
            autoprefixer: true
          })
        ])
      ],
      compress: false
    }))
    .on('error', onError)
    .pipe(gcmq())
    // .pipe(cssnano())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(buildPaths.css));
});

And it generates the error:

{ [CssSyntaxError: pixrem: /Users/ribeiroevandro/Codes/Usabit/wella-site/src/styl/style.styl:22:3: Root font-size is invalid]
  name: 'CssSyntaxError',
  message: 'pixrem: /Users/ribeiroevandro/Codes/Usabit/wella-site/src/styl/style.styl:22:3: Root font-size is invalid',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-stylus',
  __safety: { toString: [Function: bound ] } }

If I remove fallbacks and autoprefixer from the rucksack configuration, the error does not occur.

from rucksack.

Hmm looks like something going on with the pixrem plugin, which fallbacks (seaneking/laggard) uses. I'll have to poke around a bit more - are you setting a font-size on the html element?

from rucksack.

Yes, it was created that way.

html
  font-size: responsive 8px 10px

from rucksack.

ah, that might be throwing off the pixrem plugin. I'd have to see what it does (it's not my plugin) but I assume if it sees a font-size on html it uses that to calculate a px fallback, hence the error when using responsive keyword.

from rucksack.

The output of responsive will fail on IE6-8 anyway (needs calc and vw unit support), FWIW

from rucksack.

Hmmm, I'll take it easy, I've chosen to remove the parameters and resolve this better later.

from rucksack.