Software DevelopmentBrief Introduction to PostCSS With Installation

Brief Introduction to PostCSS With Installation

PostCSS is software development tool which uses plugins of JavaScript to automate routine CSS transactions. It parses CSS into an abstract syntax tree (AST) with the help of series of plugins. This tool has been used for development of GitHub, Facebook and Wikipedia. PostCSS is ranked as a top favoured CSS tool for npm users.
The aim of PostCSS is to reinvent CSS with an ecosystem of custom plugins and tools. It transforms extended syntaxes and features into modern user-friendly CSS.
The plus point of using PostCSS is that it uses Node.js framework due to which the abilities of the language and tools can be easily modified and customized as and when it is needed.
Let’s focus on the environmental setup of PostCSS.

PostCSS Installation:

PostCSS is installed with the help of npm (node package manager). The installation procedure takes place with the help of “Command Line Interface”. Make sure that node is installed in your system before starting with PostCSS installation. The command for running PostCSS globally is as follows:

npm install -g postcss -cli

To verify if postcss is working currently, you should execute following command:

npm postcss

The following snapshot describes the encironmental setup of postcss which shows the output with execution of commands:

PostCSS

command prompt

Workflow of PostCSS

Workflow of PostCSS

The number of steps followed in workflow of PostCSS is as follows:

1. The CSS structure is parsed to check whether the structure is valid or not.
2. The parsed CSS is processed through “Plugin 1 “and “Plugin 2”.
3. With the help of new stringifer, new CSS is created.

The benefits of PostCSS are mentioned as below:

1. PostCSS allows us to keep the size of library very small and responsive.
2. It allows us to perform operations such as inclusion of limiting factors and parsing the CSS attributes.
3. There are no dependencies for compiling as PostCSS is entirely written in Ruby.
4. There is no need to learn new languages to deal with PostCSS as any developer who is familiar of JavaScript can understand the procedure and can use them in their development process.
5. We can the usage of plugin as per our requirement. These requirements may vary during period.
6. It includes low barrier entry which helps in creating new plugins in easy format. It potentially modifies the exiting ones to new ones which can be used as modules.

Let’s explain the first illustration of PostCSS procedure which involves the list of steps as follows:

1. First we will focus on Gulp build system which is used to build websites by automating common tasks such as compiling pre-processed CSS by minifying JavaScript and reloading the browser.

Installation of gulp is achieved with following command:

npm install –g gulp

Installation of gulp

2. To include postCSS dependencies in your project, run the following command from the terminal:

npm i gulp-postCSS -D

3. Your gulpfile.js should include necessary configurations of the file. The configurations are defined in the following way:

var postcss = require('gulp-postcss');

gulp.task('styles', function () {
    return gulp.src('path/to/dev/style.css')
        .pipe(postcss([]))
        .pipe(gulp.dest(path/to/prod))
});

4. For installing PostCSS module in your project, you need to install it with following command:

npm i grunt-postcss -D

5. It is important to include the necessary configurations in your configurations for starting PostCSS configurations in your project.

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    styles: {
      options: {
        processors: []
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'dev/',
          src: ['**/*.css'],
          dest: 'prod/'
        }]
      }
    }
  });

  // Load post-css.
  grunt.loadNpmTasks('grunt-postcss');

};

6. It is important to add Autoprefixer plugin to the processors which is described below:

var processorsArray = [
  // snipped for brevity
  require('autoprefixer')({ browsers: ['last 2 versions', 'ie 6-8', 'Firefox > 20']  })
];

It helps in checking the browser configuration settings to check if the configurations are getting matched. The tool can be used on its own or as a typical plugin through postCSS. We can add the array configuration inside processorsArray which includes PostCSS plugins.

The installation of postCSS next plugin is achieved with following command:

npm i cssnext -D

Adding plugin to preprocessors array is given below:

var processorsArray = [
  // snipped for brevity
  require('precss')()
];

The development CSS is generated as below:

/*Variable declaration */
$blue: #0000ff;
$green: #00ff00;
$radius: 10px;

.square {
  background: $blue;
  border-radius: $radius;
}

/*Necessary Imports*/
@import "partials/_base.css";

/*Mixins*/
@define-mixin square $dimension {
    width: $dimension;
    height: $dimension;
}

/*Nesting, variables and mixins*/
.button {
  @mixin square 200px;
  background: $green;
  &:hover {
    background: $blue;
  }
}

The transformed output with pre-processors are as follows:

.square {
background: #0000ff;
border-radius: 10px;
}

.button {
width: 200px;
height: 200px;
background: #00ff00;
}

.button:hover {
background: #0000ff;
}

So now it is crystal clear that PostCSS extends CSS in brand new ways with the help of custom syntax and properties, which could present challenges to beginners who are trying to get comfort with this language.

How PostCSS is considered useful?

Writing valid CSS is an art that has been present since the dawn of the Internet; this takes skill, patience, and time to produce and perfect any masterpiece. Processors such as SASS or Less have helped to make the process more efficient, but are not without their drawbacks; PostCSS allows for a more customized approach, but without the extra baggage.

The drawbacks of PostCSS is mentioned below:

1. PostCSS is difficult to configure for the developers who have started their focus on web development.
2. It does not include any specific standard syntax. It is always recommended to use file plugins with postcss-use but most of the developers find it unnecessary.
3. It follows a sequential processing with the help of object tree where only one plugin responds with given period of time. There are also functions which plugin do not implement. The PostCSS team is going to fix this in future versions.

Conclusion:

The pattern of using CSS will change in upcoming few years as every project defines different requirements. Working within the specific modular system like POSTCSS will help users to pick and choose the needed features. It is always encouraged to explore the PostCSS features which includes all the necessary plugins.

The necessary plugins which is needed to install is mentioned below:

https://www.npmjs.com/search?q=keywords:postcss-plugin

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -