PostCSS Functional CSS Plugin. Generate Functional CSS with ease.

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

Comments

[Mattia Astorino]

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

[Eduard Pochtar 👨‍💻]

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

[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.

[Eduard Pochtar 👨‍💻]

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?)

[Mattia Astorino]

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 .

[Eduard Pochtar 👨‍💻]

what separator do you suggest?

[Mattia Astorino]

Any valid charcter that doesn’t require escaping

[Eduard Pochtar 👨‍💻]

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

[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?

[Eduard Pochtar 👨‍💻]

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.