PostCSS Functional CSS Plugin. Generate Functional CSS with ease.
Eduard Pochtar 👨💻
Posted on January 23, 2019
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
Posted on January 23, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.