Skip to content

Commit 7762909

Browse files
committed
docs: add processor cssModules output examples
1 parent 81ee554 commit 7762909

File tree

1 file changed

+48
-17
lines changed

1 file changed

+48
-17
lines changed

README.md

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Add `allowSyntheticDefaultImports`, or `esModuleInterop` (enables `allowSyntheti
3434
}
3535
```
3636

37-
Reference: (https://www.typescriptlang.org/tsconfig#esModuleInterop)
37+
[`esModuleInterop` reference](https://www.typescriptlang.org/tsconfig#esModuleInterop)
3838

3939
Write rollup.config.ts:
4040

@@ -113,7 +113,7 @@ sass({
113113
});
114114
```
115115

116-
The `processor` also support object result. Reverse `css` filLed for stylesheet, the rest of the properties can be customized.
116+
The `processor` also support object result. Reverse `css` filled for stylesheet, the rest of the properties can be customized.
117117

118118
```js
119119
sass({
@@ -133,29 +133,60 @@ Otherwise, you could do:
133133
import style, { foo, bar } from 'stylesheet';
134134
```
135135

136+
#### Create CSS modules using processor `cssModules` output
137+
138+
When returning a `cssModules` property inside a processor's output,
139+
the plugin will change the module's default export to the value
140+
of `cssModules` instead of the compiled CSS code.
141+
142+
The following example uses [`postcss-modules`](https://www.npmjs.com/package/postcss-modules) to create css modules:
143+
144+
```js
145+
import postcss from 'postcss';
146+
import postcssModules from 'postcss-modules';
147+
148+
sass({
149+
async processor(css, id) {
150+
let cssModules = {};
151+
const postcssProcessResult = await postcss([
152+
postcssModules({
153+
getJSON: (_, json) => {
154+
if (json) cssModules = json;
155+
},
156+
}),
157+
]).process(css, { from: id });
158+
159+
return { css: postcssProcessResult.css, cssModules };
160+
},
161+
});
162+
```
163+
164+
Which allows you to write something like:
165+
166+
```js
167+
import style from 'stylesheet';
168+
169+
style['some-classes'];
170+
```
171+
136172
#### Exporting sass variable to \*.js
137173

138-
Example showing how to use [icss-utils](https://www.npmjs.com/package/icss-utils) to extract resulting sass vars
139-
to your \*.js bundle:
174+
Example showing how to use [`icss-utils`](https://www.npmjs.com/package/icss-utils) to extract resulting sass vars to your \*.js bundle:
140175

141176
```js
142177
const config = {
143178
input: 'test/fixtures/processor-promise/with-icss-exports.js',
144179
plugins: [
145180
sass({
146-
processor: (css) =>
147-
new Promise((resolve, reject) => {
148-
const pcssRootNodeRslt = postcss.parse(css),
149-
extractedIcss = extractICSS(pcssRootNodeRslt, true),
150-
cleanedCss = pcssRootNodeRslt.toString(),
151-
out = Object.assign({}, extractedIcss.icssExports, {
152-
css: cleanedCss,
153-
});
154-
// console.table(extractedIcss);
155-
// console.log(out);
156-
resolve(out);
157-
}),
158-
options: sassOptions,
181+
processor: (css) => {
182+
const pcssRootNodeRslt = postcss.parse(css);
183+
const extractedIcss = extractICSS(pcssRootNodeRslt, true);
184+
const cleanedCss = pcssRootNodeRslt.toString();
185+
const out = { css: cleanedCss, ...extractedIcss.icssExports };
186+
// console.table(extractedIcss);
187+
// console.log(out);
188+
return out;
189+
},
159190
}),
160191
],
161192
};

0 commit comments

Comments
 (0)