How to export sass list as array to js file

Question

I have a file with sass variables, it has a list like this:

$columnsClasses: 'Id', 'Phase', 'Status', 'Source', 'Date'

and so I write the following at the same file to export this list

:export {
columnsClasses: $columnsClasses;
}

I need to import this list to JS file due to some reasons. But when I do that, I get just one big string instead of array.

like this: '"Id", "Phase", "Status", "Source", "Date"'

How should I export sass list to get an array in JS?

Maybe it is not possible... Did you try to write your list with parenthesis or square brackets? — Arkellys, Dec 03 '21 at 20:32

score 1 · Answer 1 · answered Dec 05 '21 at 11:42

Currently ICSS treats any exported value as a literal string (and I don't know if it will ever be possible to extend the proposal with any interchangeable datatype syntax).

An exportedValue does not need to be quoted, it is already treated as a literal string.

So you have to convert it into an array inside your javascript. What you can do though is to utilize the ever useful, established, and standardized JSON syntax and just add brackets yourself:

// constants.module.scss
$columnsClasses: 'Id', 'Phase', 'Status', 'Source', 'Date';

:export {
    columnsClasses: [$columnsClasses];
}

in your js

import constants from './constants.module.scss'

const columnsClasses = JSON.parse(constants.columnsClasses);

columnsClasses.forEach(console.log);

How to export sass list as array to js file

1 Answers1