Read more

How to test Autoprefixer and CSSnext in PostCSS

Emanuel
May 02, 2019Software engineer at makandra GmbH

PostCSS is a tool for transforming styles with JS plugins. In Webpacker you can configure the plugins and their settings via the postcss.config.js file. Make sure that postcss-loader is part of your package.json.

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

Note: Stage 3 Show archive.org snapshot means you can use all CSS features that are listed as "This idea is becoming part of the web". Do not use standards in any stage before (like 2, 1 or 0).

Run NODE_ENV=production rake assets:precompile to get compiled output in public/packs.

Check the following transformations to ensure you settings are applied. Remove public/packs afterwards again.

CSSnext

Input:

body {
  font-variant: small-caps;
  background-image: image-set(url(test_1.svg) 1x, url(test_2.svg) 2x);
}

Output:

body {
  -webkit-font-feature-settings: "c2sc";
          font-feature-settings: "c2sc";
  font-variant: small-caps;
  background-image: -webkit-image-set(url(test_1.svg) 1x, url((test_2.svg) 2x);
  background-image: image-set(url(test_1.svg) 1x, url(test_2.svg);
}

Autoprefixer

Input:

body {
  ::placeholder {
    color: gray;
  }
}

Output:

body {
  ::-webkit-input-placeholder {
    color: gray;
  }
  :-ms-input-placeholder {
    color: gray;
  }
  ::-ms-input-placeholder {
    color: gray;
  }
  ::placeholder {
    color: gray;
  }
}
Emanuel
May 02, 2019Software engineer at makandra GmbH
Posted by Emanuel to makandra dev (2019-05-02 09:48)