madeleineostoja / rucksack

A little bag of CSS superpowers, built on PostCSS

Home Page:https://www.rucksackcss.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Alias and font responsive not working together

gillchristian opened this issue · comments

Hello!!

I have this set up:

var gulp            = require('gulp'),
    rename          = require('gulp-rename'),
    sourcemaps      = require('gulp-sourcemaps'),,
    rucksack        = require('gulp-rucksack');

gulp.task(TASKS.dev.style, function () {

  return gulp.src(FILES.css.source)
    .pipe( sourcemaps.init() )
    .pipe( rucksack({autoprefixer: true}) )
    .pipe( sourcemaps.write('.') )
    .pipe( gulp.dest(FILES.css.dest) );
});

And I´ve had issues with using alias together with font-size: responsive:

/* --- this --- */

@alias {
  fs: font-size;
  br: border-radius;
}

.bar{
  fs: responsive;
  fs: 13px;
}

.foo {
  font-size: responsive;
}

/*--- compiles to this ---*/

.bar{
  font-size: responsive;
  font-size: 13px;
}

.foo {
  font-size: calc(12px + 9 * ( (100vw - 420px) / 860));
}

@media screen and (min-width: 1280px){
  .foo{
    font-size: 21px;
  }
}

@media screen and (max-width: 420px){
  .foo{
    font-size: 12px;
  }
}
/*# sourceMappingURL=test.css.map */

So it looks like font responsive is being processed before alias so it does not recongize fs as font-size.