From 91a04570eb349dc9a497c969dfaadfcc081f5b67 Mon Sep 17 00:00:00 2001 From: Ely De La Cruz <603428+elycruz@users.noreply.github.com> Date: Wed, 21 Aug 2024 10:17:51 -0400 Subject: [PATCH] chore: process-feat - doc update --- README.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c659497..44ab8ec 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ sass({ }) ``` -The `processor` also support object result. Reverse `css` filed for stylesheet, the rest properties can be customized. +The `processor` also support object result. Reverse `css` filLed for stylesheet, the rest of the properties can be customized. ```js sass({ @@ -132,6 +132,36 @@ Otherwise, you could do: import style, { foo, bar } from 'stylesheet'; ``` +#### Exporting sass variable to *.js + +Example showing how to use [icss-utils](https://www.npmjs.com/package/icss-utils) to extract resulting sass vars +to your *.js bundle: + +```js +const config = { + 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, + }), + ], +} +``` + +See the [Input file](test/fixtures/processor-promise/with-icss-exports.js) for example on how to access +the exported vars. + ### `runtime` + Type: `Object` _(default: sass)_