PostCSS Functional CSS Plugin. Generate Functional CSS with ease.
Tags: postcss, css, opensource, webdev
Published: 2019-01-23 09:27:26

---
title: PostCSS Functional CSS Plugin. Generate Functional CSS with ease.
published: true
description: 
tags: postcss, css, opensource, webdev
---

![Swiss Knife](https://thepracticaldev.s3.amazonaws.com/i/i009u3lu1uelbcu75a6r.jpg)

If you like functional css, if you would like to generate it with ease, if you would like to control the output, then this plugin is for you.

## Why?
Writing functional css is not the best work to do. There are a lot of repeating tasks, which may cause some bug and even can make it harder to update. It's much easier to generate functional css.

Of course it's possible to generate functional css with less, sass, stylus, etc. But in that case source css will be limited to the technology you prefer. With PostCSS there are no such limits.

PostCSS Functional CSS plugin helps to control the output of generated css. It gives ability to enable or disable features (like font-size, line-height, margin, padding, etc.). It gives ability to customise class names so you can use those class names you prefer. It gives ability to generate responsive css with ease.

## Supported Features
- display
- float
- font-size
- font-weight
- line-height
- margin (top, right, bottom, left)
- object-fit
- opacity
- padding (top, right, bottom, left)
- position
- text-alignment
- text-size (combination of font-size and line-height)
- visibility
- z-indez

More features are yet to come.


## Getting Started.
Install:
```
npm i postcss postcss-functional-css
```
Configure:
```js
postcss([
  require('postcss-functional-css')({
    mediaQueries: [
      {
        prefix: 'sm',
        prefixSeparator: '-',
        params: '(min-width: 640px)'
      }
    ],
    globalStyles: true,
    features: {
      display: true,
      float: true,
      fontSize: {
        className: 'fs',
        values: [12, 14, 16, 18, 24, 32, 48],
        unit: 'px'
      },
      fontWeight: {
        className: 'fw',
        values: [400, 500, 600, 700]
      },
      lineHeight: {
        className: 'ln',
        values: [16, 18, 20, 22, 28, 36, 52],
        unit: 'px'
      },
      margin: {
        top: {
          className: 'mt',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        right: {
          className: 'mr',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        bottom: {
          className: 'mb',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        left: {
          className: 'ml',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        }
      },
      objectFit: true,
      opacity: {
        className: 'o',
        increment: 10
      },
      padding: {
        top: {
          className: 'pt',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        right: {
          className: 'pr',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        bottom: {
          className: 'pb',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        left: {
          className: 'pl',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        }
      },
      position: true,
      textAlignment: true,
      textSize: {
        className: 'ts',
        fontSizeUnit: 'px',
        lineHeightUnit: 'px',
        values: [
          {
            fontSize: 14,
            lineHeight: 20
          },
          {
            fontSize: 18,
            lineHeight: 24
          }
        ]
      },
      visibility: true,
      zIndex: {
        className: 'z',
        increment: 1,
        limit: 10
      }
    }
  })
])
```
Add comment to your css file:
```
/* postcss-functional-css */
```
Comment will prevent from duplicated css in some bundlers like Parcel or Webpack. CSS will be ONLY appended if comment exists.


Feel free to contribute or propose new features.

## Links
[PostCSS Functional CSS](https://github.com/iamfrntdv/postcss-functional-css)