We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

Blog hero image

PostCSS - beyond the Autoprefixer

Develoger 2 February, 2018 | 3 min read

Hype that needed some time to happen

I bet that when you think about PostCSS you must think of this...

0dayssince.png

Yet the truth is that PostCSS is around for almost as long as React!

1_k_jZ1ClQW2i_uIn-_-sJiw.png

Why PostCSS?

The widest spread application of PostCSS usage is through seamless integration of Autoprefixer (Just one of many PostCSS plugins. Not lib on its own.)

display: flex;

// becomes

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

Writing such logic outside of more traditional SASS / LESS mixins and automatically making it part of your app build is just genius.

This sure seems awesome and is the main reason why this particular plugin has 11,103,982 downloads per month on NPM

It’s obvious that industry needs a concept which PostCSS introduced. The single PostCSS plugin has more downloads than the most popular JavaScript frameworks / libraries… Check it out on NPM trends.

PostCSS is not coupled with any specific framework / library. It’s a Front-End tool.

Babel for CSS

With plugins or better say set of plugins PostCSS can be used in the same way we use Babel in JavaScript.

1_pBBKKNfcEbXvNY3dpDdr-Q.png

CSSnext is set of plugins which among other awesome stuff can transform CSS custom properties into what browsers can interpret today.

Alternative to CSSnext (possibly better maintained) is postcss-preset-env…


:root {
  --fontSize: 1rem;
}

h1 {
  font-size: var(--fontSize);
}


This will obviously fail to work in most browsers but with PostCSS it will be transformed into.

h1 {
  font-size: 1rem;
}


PostCSS is "just" a parser for CSS. This means that with its API one can do anything possible.

Stylelint is PostCSS based! Check this awesome CSS linter here.

How PostCSS?

Weirdly enough the PostCSS is not about the CSS it’s about what JavaScript can do with your CSS.

With that being said, let’s do a simple transform of single display: flex to multiple browser-specific definitions.

// require the postcss for our plugin to work
const postcss = require('postcss');
// export the plugin
module.exports = postcss.plugin('postcss-flex', (opts) => {
  opts = opts || {};
return (css) => {
    // define the new values
    const values = [
      '-webkit-box',
      '-webkit-flex',
      '-ms-flexbox',
    ];
    // iterate through declarations
    css.walkDecls('display', decl => {
      // ignore everything else other than flex
      if (decl.value !== 'flex') return;
      // map values to actual string
      const newDecls = values.map((value) => {
        return ` display: ${value}`;
      }).join(';');
      // add new declarations before the current
      decl.before(newDecls);
    });
  };
});
 
Essentially PostCSS takes your CSS (or SASS / LESS) source as input, gives you the possibility to alter it and outputs the end result. Simple as that.

For more details regarding PostCSS API please go here. But beware that docs are automatically generated from JSdoc (If anyone ever ask you why you should use JSdocs, just show him/her PostCSS API docs). Even though they are insightful, IMHO it would be better if they were written manually.

Theming

1_Ue7ZLAuUEcLjDN2JcElelQ.jpeg

If your theme support requires different palette set for each theme. Together with possibly some other variables which needs to be adjusted eg. font-sizes or border-radius or … One of the easiest (possibly best) ways to achieve this would be to separate mapping of the variables eg. colors, border-radius … in the theme files.

For this scenario, we can @import just the default theme file and replace the import to theme specific file during the build, via PostCSS. As result of this, we can build theme specific CSS bundles easily and never put any references to it in our SASS codebase.

@import './variables';
.button--color-primary {
  background-color: $primary;
}
Where variables.scss have such mapping.

@import '~styles/colors/colors';
$primary: $green;


Theme specific variables.blue.scss have different mapping.
@import '~styles/colors/colors';
$primary: $blue;

SASS itself does not support dynamic imports (imports with variables in their path). Issue #279 on Github of SASS So doing this is practically not possible if you use SASS. At least without PostCSS…

postcss-variables-rewrite

This small plugin is just one example of creative usage of PostCSS. How does it work?

/* 
  example of options
  const opts = {
    originalValue: './variables',
    targetValue: './variables.blue'
  };
*/
css.walkAtRules((node) => {
  const isImport = (node.name  === 'import');
  const isOriginalValue = node.params.includes(opts.originalValue);
  
  if (isImport && isOriginalValue) {
    node.params = `"${opts.targetValue}";`;
  }
});

Fun Fact

Autoprefixer will eventually become obsolete...

1_JOMdbTUH7C1BJ9HdV5XM2Q.png Source

Feel free to follow Develoger on twitter @Develoger and check out his other blogs here

Interested in Front End Development jobs, check out the jobs board!

Originally published on develoger.com

Related Jobs

Related Issues

xapix-io / devops
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / devops
  • Open
  • 0
  • 0
  • Intermediate
  • HCL
xapix-io / axel-f
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
xapix-io / axel-f
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
WorksHub / client
  • 1
  • 1
  • Intermediate
  • Clojure
  • $50
WorksHub / client
  • 1
  • 0
  • Intermediate
  • Clojure

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GithubStart with Stack OverflowStart with Email