@@ -34,7 +34,7 @@ Add `allowSyntheticDefaultImports`, or `esModuleInterop` (enables `allowSyntheti
34
34
}
35
35
```
36
36
37
- Reference: (https://www.typescriptlang.org/tsconfig#esModuleInterop )
37
+ [ ` esModuleInterop ` reference ] ( https://www.typescriptlang.org/tsconfig#esModuleInterop )
38
38
39
39
Write rollup.config.ts:
40
40
@@ -113,7 +113,7 @@ sass({
113
113
});
114
114
```
115
115
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.
117
117
118
118
``` js
119
119
sass ({
@@ -133,29 +133,60 @@ Otherwise, you could do:
133
133
import style , { foo , bar } from ' stylesheet' ;
134
134
```
135
135
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
+
136
172
#### Exporting sass variable to \* .js
137
173
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:
140
175
141
176
``` js
142
177
const config = {
143
178
input: ' test/fixtures/processor-promise/with-icss-exports.js' ,
144
179
plugins: [
145
180
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
+ },
159
190
}),
160
191
],
161
192
};
0 commit comments