PostCSS plugin for creating CSS units based on numerical sequences

10 months ago from

With design systems being even more prevalent these days I've wanted to reference custom units in my stylesheets so I can keep things like font sizes, paddings, margins etc consistent throughout my designs. For even longer I've had an idea to use maths to create a sequence of numbers which can be reused throughout a design.

Today I'm uploading a first draft of a PostCSS plugin which converts a custom unit into normal CSS. I know there are quite a few already out there but what make this one a little special is that you can associate a pattern with a unit that allows you to gain aesthetic pleasure from your work using mathematics. :)

The plugin is quite flexible and should meet any need you desire, although I'm sure there will be some scenarios I haven't anticipated for. Check out the examples at the bottom of the file to get an idea of what you can do. I would be grateful for your feedback if you decide to try it. It's my first time making a node package module so the code might be a little rough looking, so any help on that front would obviously be appreciated.

Thanks again.