jamonserrano / postcss-plumber Goto Github PK

To remain closest to both regular CSS and the original SASS version and also to adhere to the postcss plugin guidelines I propose the following syntax:

CSS input with a custom at-rule:

p {
    @plumber {
        grid-height: 1rem;
        baseline: 0.158203;
        font-size: 1.75;
        line-height: 3;
        leading-top: 1;
        leading-bottom: 2;
    }
}

CSS output with the whole at-rule replaced:

p {
    font-size: 1.75rem;
    line-height: 3rem;
    margin-top: 0;
    padding-top: 0.81641rem;
    padding-bottom: 0.18359rem;
    margin-bottom: 2rem;
}

Default parameters can be set in the plugin itself:

// Gulpfile
var processors = [
    plumber({
        gridHeight: '1rem',
        baseline: 0.158203,
        fontSize: 1.75,
        lineHeight: 3,
        leadingTop: 1,
        leadingBottom: 2
    })
];

Your comments are welcome!

Some design system libraries provide units as .75rem rather than 0.75rem. I'd like to be able to use the value directly from a library. It would be great if Plumber supported this.

I haven't thoroughly tested this, but I think something like this would work:

const unitRegExp = /^((?:\d*\.)?\d+)([a-z]{1,4})$/;

When I run this plugin using Vite, I get the following warning:

A PostCSS plugin did not pass the from option to postcss.parse. This may cause imported assets to be incorrectly transformed. If you've recently added a PostCSS plugin that raised this warning, please contact the package author to fix the issue.

Looks like a similar issue, and a resolution, occurred for this PostCSS plugin: elchininet/postcss-rtlcss#160