Vue.js, CSS Modules, Functional CSS. How to?

Not So long ago I wrote small article - PostCSS Functional CSS Plugin. Generate Functional CSS with ease..

This plugin is aimed to help generate functional css with ease.

I used it for a while and it worked very well. Until I had to use it with css modules. The main problem was a class names. If you familiar with css modules I may know that it's a little bit easier to use camel case class names. Unfortunately PostCSS Functional CSS Plugin couldn't generate camel case class names until now.

Recently I've update the plugin and I also added some new css features and "CSS Modules Mode".

Splitting

One more new feature was added - is ability to generate features separately. To do so just add a comment that contains feature name to specific file (margin.pcss):

/* postcss-functional-css-margin */

CSS Modules Mode

By default PostCSS Functional CSS plugins generate class names like this:

• margin-top-20
• margin-left-20
• md-margin-left-20 So the class name contains css property name and value. If class is declared inside some media query it will have extra prefix defined in the config. And this is fine when you use it with vanilla html.

When it comes to CSS modules you probably would like to use it for example like this:

<div :class="[
    margin.top20, 
    margin.mdTop40, 
    margin.bottom20, 
    margin.mdBottom40
]">
    ...
</div>

So in CSS Modules mode property name won't be added. It would be important to import css/pcss file with a css property name:

<template>
    <div :class="[margin.bottom20, margin.mdBottom40, margin.lgBottom60]">
        ...
    </div>
</template>

<script>
...
</script>

<style src="./margin.pcss" lang="pcss" module="margin"></style>
<style src="./padding.pcss" lang="pcss" module="padding"></style>

This will help to keep code inside a project semantic and avoid selectors like margin.marginBottom20.

Links

PostCSS Functional CSS Plugin