export sass variables for include in JavaScript

[svdoever]

I try to use the :export construct as described in https://stackoverflow.com/questions/61517117/cannot-export-sass-variables-into-javascript?noredirect=1&lq=1 to be able to use values of SASS variables in my JavaScript but can't get it working:

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    some-light-blue: $some-light-blue;
    battleship-grey: $battleship-grey;
    // etc...

}

Should this work with rollup-plugin-sass, or is there another method to accomplish this?

[gloverab]

Struggling with this same issue. Did you ever get it resolved?

[dangnelson]

Dying for this feature.

[duowb]

This is my implementation, I don't know if you can use it

index.scss

:export {
  --font-size-primary: 14px;
  --color-border-primary: #3B4144;
}

test.js

import index from './index.scss'
console.log(index)

dist/src/test.es5.js

var index = {"--font-size-primary":"14px","--color-border-primary":"#3B4144"};

console.log(index);

[elycruz]

@duowb Nice! .. I will look into integrating the feature later this week, or if you want to open a pull request ..?

[elycruz]

As pointed out in #71 turns out the plugin supported this all along (lol):
Tl;dr
You need to use 'icss-utils', along with 'postcss', to process the output css and then return an object containing all exported key/value pairs to the plugin, from the 'processor' field:

rollup-plugin-sass/test/index.test.ts

Lines 290 to 315 in f4b2e64

	test('should support processor return type `Promise<{css: string, icssExport: {}, icssImport: {}}}>', async t => {
	const outputBundle = await rollup({
	input: 'test/fixtures/processor-promise/with-icss-exports.js',
	plugins: [
	sass({
	processor: (css) => new Promise((resolve, reject) => {
	const pcssRootNodeRslt = postcss.parse(css),
	extractedIcss = extractICSS(pcssRootNodeRslt, true),
	cleanedCss = pcssRootNodeRslt.toString(),
	out = Object.assign({}, extractedIcss.icssExports, {
	css: cleanedCss,
	});
	// console.table(extractedIcss);
	// console.log(out);
	resolve(out);
	}),
	options: sassOptions,
	}),
	],
	}),
	{output} = await outputBundle.generate(generateOptions),
	rslt = squash(unwrap(output));
	t.true(rslt.includes(expectA2));
	t.true(rslt.includes(expectB));
	});