DEV Community

loading...

PostCSS Functional CSS Plugin. Generate Functional CSS with ease.

iamfrntdv profile image Eduard Pochtar πŸ‘¨β€πŸ’» ・Updated on ・2 min read

Swiss Knife

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:

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

Discussion (10)

pic
Editor guide
Collapse
equinusocio profile image
Mattia Astorino

Why i should put tons of css hacks in my css?

Collapse
iamfrntdv profile image
Eduard Pochtar πŸ‘¨β€πŸ’» Author

What do you mean by a css hack in this case?

Collapse
equinusocio profile image
Mattia Astorino

You should not put special characters inside class selectors. Every symbol you use like :@ etc is mus be escaped with \ to avoid parser errors. So in fact it’s not valid css and if vendors change their css parser you might need to rewrite all.

Thread Thread
iamfrntdv profile image
Eduard Pochtar πŸ‘¨β€πŸ’» Author

it's just an example, you can use what you prefer, that's why there is a config.)

But it's a valid class in html... ;)
You can even use emojis in your class names, because why not?)

Thread Thread
equinusocio profile image
Mattia Astorino • Edited

Is a common practice to use not valid characters in functional css (or acss). It’s not just about this example. Nothing personal. Btw, emoji are valid characters for css selectors, symbols aren’t .

Thread Thread
iamfrntdv profile image
Thread Thread
equinusocio profile image
Mattia Astorino

Any valid charcter that doesn’t require escaping

Thread Thread
iamfrntdv profile image
Eduard Pochtar πŸ‘¨β€πŸ’» Author

ok, I'll update example here, on github and later on npm.

Collapse
gorango profile image
Goran Spasojevic

This is pretty dope.

When do you think you'll be close to Tailwind with your features?

Is there a roadmap? I see you're light on issues on gh.. what's the best way to contribute?

Collapse
iamfrntdv profile image
Eduard Pochtar πŸ‘¨β€πŸ’» Author

I've started to work on this plugin not so long ago. So I started with those features that I thought are more important.

When do I think I'll be close to Tailwind? It depends on many things. But to be honest I don't know. If I will get some help at list with desired features, I'll be able to go faster with that. For now I plan to release from one to several features a week.

The best way to contribute is to open an issue on gh and discus. Pull requests are also welcomed. I'm opened to any ideas that will improve the plugin.