Could be really useful, might send a pull request tomorrow

https://www.w3.org/TR/css-fonts-4/#font-min-max-size-prop

Tested with :

postcss([
  require("postcss-import")(),
  require("postcss-responsive-type")(),
  require("postcss-cssnext")(),
  require("postcss-extend")(),
  require("cssnano")()
])

And CSS :

html {
  font-size: 16px;
  font-size: responsive;
}

→ Error: pixrem: Root font-size is invalid

I reproduced the problem here: https://github.com/perrin4869/responsive_type_test

I am getting the warning this combination of units is not supported [postcss-responsive-type] while attempting to process the following:

div {
    font-size: responsive 1.2em 1.4em;
}

Hey!

Running Chrome Version 47.0.2526.73 (64-bit)

I seem to get an "invalid property" for my calc function.

the declaration is as follows:

$h1: responsive 4.8rem 5.2rem;
$h2: responsive 4.4rem 4.8rem;
$h3: responsive 3rem 3.4rem;
$h4: responsive 2rem 2.3rem;
$h5: responsive 1.6rem 2rem;
$h6: responsive 1rem 1.4rem;

Which results in this in Chrome

http://i.imgur.com/KjRunZE.png

I can confirm that on the latest Firefox and Safari the behaviour is as expected, however on Chrome it does not work.

Not sure if newer version of Safari is supported but when I try the following it doesn't work as intended:

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
}

http://codepen.io/umbriel/pen/WwLBxQ

Works fine in Firefox, Chrome and probably other modern browsers. But safari Version 9.0.3 fails entirely as evidenced in the Codepen I linked.

Does anyone have any ideas why this is?

edit: I may have found the culprit, it seems vw in conjunction with calc is the issue from what I tried. Is there a way of making it work?

As i have updated my app to the latest Postcss version, the responsive type didn't work with standard CSS variables any more.

The font-range produces undefined and NaN, which leads to that the stylesheet can't be composed and font-size also doesn't take the given variable, but doesn't produce an error.

related issue https://github.com/postcss/autoprefixer/issues/1263
it happens when autoprefix input::placeholder

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'indexOf' of undefined
    at /Users/t826148/dev/lightbox/repo/desktop/src/app/layouts/shared-navigation/search-nav-button.css:56:3
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss-responsive-type/index.js:219:25
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:239:18
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:135:18
    at Root.each (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:131:17)
    at Root.walkRules (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/container.js:237:19)
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss-responsive-type/index.js:213:9
    at LazyResult.run (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.asyncTick (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:208:26)
    at LazyResult.asyncTick (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:221:14)
    at LazyResult.asyncTick (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:221:14)
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss/lib/lazy-result.js:213:17
    at runLoaders (/Users/t826148/dev/lightbox/repo/desktop/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/t826148/dev/lightbox/repo/desktop/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/t826148/dev/lightbox/repo/desktop/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/Users/t826148/dev/lightbox/repo/desktop/node_modules/postcss-loader/src/index.js:208:9)

Would like 5569524 to be published as a new version on npm so that we can get that compatibility, package hasn't been updated in 6 years

Incorrect extended syntax for both line-height and letter-spacing

Thanks for the plugin! I took your calculations and made a SASS mixin out of it.

I was running in to trouble because my use case didn't line up 100% with your intent-- I was using it as a way to make the font size of a module larger on a large handheld viewport, like from 400px to 600px. The issue was that I often wanted to reset to a smaller font-size, rather than transitioning to the "max-font-size" value.

With my mixin, you can use the fluid font size for more than one range, and the media query is scoped (using a Zurb Foundation function) to the supplied breakpoints.

Not sure if this plugin needs that, but just wanted to offer my experience in return for the knowledge I got from your plugin. That calculation is intense!

New logic in 0.2.0 (e3a9242) has introduced a regression in all versions of IE - where the font size shrinks past min-font-size and snaps back when it reaches the lower bound. Works in all other browsers - no idea what IE does differently with calc() and why this wouldn't work there.

If anyone needs an immediate fix, roll back to 0.1.* and just use px units throughout.

Originally flagged at madeleineostoja/rucksack#15

Hi. I'm using [email protected].
I just wanted to use responsive line-height.

html {
  line-height: responsive;
}

Unfortunately it generates an error:

postcss-responsive-type: $FILE_PATH/default.css:5:1: this combination of units is not supported

and invalid css:

html {
  line-height: calc(1.2em + 0.6000000000000001 * ((100vw - undefined) / NaN));
}

@media screen and (min-width: 1280px) {
  html {
    line-height: 1.8em;
  }
}

@media screen and (max-width: 420px) {
  html {
    line-height: 1.2em;
  }
}

1. Open Chrome's devtool
2. Toggle device toolbar(mobile preview)
3. Error: Cannot read property 'pageX' of undefined

PS. Chrome 55, macOS 10.11.4, and webpack dev server

postcss-responsive-type is still in version 0.5.1 on npmjs.com.

Why not publishing the last version ?

I had the min and max font size set with rem units and been using the 62.5% hack to reset font-size to 10px. What I noticed is that using this setup made the plugin wrongly calculated the responsive resizing of the fonts.
After searching in the source code I noticed the rootSize variable that was set to 16px and all calculations for the resizing of the font were made with that value and the fonts kept on growing/shrinking beyond the max/min size set for the font.
Further down the code I found where an override for the rootSize is set. Basically it searches for the html tag and then checks if the font-size is explicitly set with px units.
So in order everything to work with the 62.5% hack first set the font-size with px and then use the hack or just leave it with 10px:

html { font-size: 10px; font-size: 62.5%; }

Would be also a good thing to add this to the readme file for future reference.

BTW, great plugin 👍

Bunch of api changes, mainly with each* -> walk*

Will have to check what font-size declared on html (if any, default to 16px), then calculate all rem values before mixing them into responsive declaration.

Mixing up px and rem units will be a pain (eg: rem font sizes and px media queries).

When using rems to set font sizes, (and ems to set breakpoints), two media queries are being generated for each selector. One using the defaults, and a second using the declared breakpoints. If I switch to using ems, the media queries only get declared once, but I want to size font in rems.

A lot of modern CSS frameworks define breakpoints in 'em's and usually defined as variable somewhere in '_variables.scss'.
It will be great if plugin can calculate 'em' as good as it does for 'px'.

Huge Thank you!

I did create a fallback to responsive type work in Android 4- and Opera Mobile.
I need improve this code and add more features, but it's a idea to improve responsive type cross-browser.
http://codepen.io/neysimoes/pen/GZqBYy

Thanks for your PostCSS plugin!

As you probably know, PostCSS 8 was released a few days ago. It would be great if you could make this plugin compatible with the latest version. The creators of the project have even released this migration guide.

Is there any way to configure this so the font sizing is based on the height and not the width?

Hi, when using font-size: responsive; it works fine

however adding font-size: responsive 12px 16px; generates the following error in my terminal

events.js:141
      throw er; // Unhandled 'error' event
      ^
TypeError: Cannot read property 'toString' of null
    at getUnit (/d/stupid-starter/node_modules/postcss-responsive-type/index.js:77:36)
    at buildRules (/d/stupid-starter/node_modules/postcss-responsive-type/index.js:95:20)
    at /d/stupid-starter/node_modules/postcss-responsive-type/index.js:185:20
    at /d/stupid-starter/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:102:34
    at /d/stupid-starter/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:73:26
    at Rule.each (/d/stupid-starter/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:60:22)
    at Rule.walk (/d/stupid-starter/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:72:21)
    at Rule.walkDecls (/d/stupid-starter/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:100:25)
    at /d/stupid-starter/node_modules/postcss-responsive-type/index.js:174:12
    at /d/stupid-starter/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:115:34
╭─sebastian@SebastiansMBP2 /d/stupid-starter  ‹master*› 
╰─➤    

Anyideas why it might be happening?