Package Exports

@solislab/postcss-type

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@solislab/postcss-type) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Typography

PostCSS plugin to support responsive typography shorthands..

Input:

@custom-media --mobile-m (min-width: 420px);
@custom-media --mobile-l (min-width: 600px);
@custom-media --tablet (min-width: 768px);
@custom-media --tablet-l (min-width: 1024px);
@custom-media --desktop (min-width: 1280px);
@custom-media --desktop-l (min-width: 1440px);

.foo {
  /*
   * You can omit media query parameter.
   *
   * Line-height pixel values will be converted into unit-less ratio
   * relative to font-size.
   *
   * Letter-spacing pixel values will be converted into `em`.
   * 
   * If you specify a rootSize option in pixel unit, font-size will
   * be converted into `rem`.
   */
  @type 10px 15px 1px;
  
  /* You can omit font-size or line-height by using `/`. */ 
  @type --mobile-m 12px / 0;
  
  /*
   * When you omit font-size, it is on you to provide your preferred unit
   * for line-height and letter-spacing.
   */
  @type --desktop / 1.875 0.01em;
}

Output:

@custom-media --mobile-m (min-width: 420px);
@custom-media --mobile-l (min-width: 600px);
@custom-media --tablet (min-width: 768px);
@custom-media --tablet-l (min-width: 1024px);
@custom-media --desktop (min-width: 1280px);
@custom-media --desktop-l (min-width: 1440px);

.foo {
  /* `@type 10px 15px 1px;` */
  font-size: 10px 1.5 0.1em;
  
  /* or in case `@type 10px 15px 1px;` with rootSize: 16px */
  font-size: 0.615rem 1.5 0.1em;
  
  /* `@type --mobile-m 12px / 0;` */
  @media (--mobile-m) {
    font-size: 12px;
    letter-spacing: 0;
  }

  /* @type --desktop / 1.875 0.01em; */
  @media (--desktop) {
    line-height: 1.875;
    letter-spacing: 0.01em; 
  }
}

Usage

Because this plugin relies on custom media queries, you are recommended to run it before postcss-cssnext or postcss-custom-media

postcss([ require('postcss-type')({rootSize: '16px'}), require('postcss-custom-media') ])

See PostCSS docs for examples for your environment.