@birdiegyal/postcss-hsl-trans v1.0.0

postcss-hsl-trans

PostCSS plugin to convert hex colors to hsl.

/* input: global.css */
:root {
  --background: #fbfbf2;
    --foreground: #080708;
}

/* output: global_built.css */
:root {
  --background: 60 53% 97%;
  --foreground: 300 7% 3%;
}

Install

npm i -D postcss-hsl-trans

Usage

// postcss.config.js

export default {
    plugins: {
        /* always add new plugins on the top as mentioned in the tw docs. */
        "postcss-hsl-trans": {},
        tailwindcss: {},
        autoprefixer: {}
    }
}

See PostCSS docs for examples for your environment.

Reasoning

This plugin allows you to use HEX colors all over your css file and upon build, transforms your HEX values to HSL for better compatibility with shadcn/ui. You can preview your colors too when using HEX values all over your stylesheet.