how can use hsl instead of rgb for scss global declaration javascript api

Question

that's how my next.config.js look like

// next.config.js

const env = require('./site.config').env;
const Colour = require('sass').types.Color;
const {r, g, b} = require('./site.config').customProperties;

const withBundleAnalyzer = require('@next/bundle-analyzer')({enabled: !!process.env.ANALYZE});

const config = {
  env: {
    ...env,
  },
  sassOptions: {
    functions: {
      'primaryOpacityColour()': function(){
        return new Colour(r, g,b)
        // here I want to return Colour in hsl form
      },
    },
  },
};

module.exports = withBundleAnalyzer(config);

I'm not able to return Colour in hsl form, can anyone please help me how to resolve this issue?

Answer 1

according to https://github.com/sass/sass/issues/2988 you cannot do this with the javascript api. dart-sass has it in the dart api, but not in the javascript api (yet).

your best bet is to convert from hsl to rgb and return Colour, as you are doing now.