Skip to content

Commit 8c31995

Browse files
dmichon-msftdmichon-msft
authored
[heft-sass] Ignore SASS partials in module classifier (#5225)
* [heft-sass] Ignore SCSS partials in module classifier * Test both npm import styles --------- Co-authored-by: David Michon <dmichon-msft@users.noreply.github.com>
1 parent bd14afe commit 8c31995

16 files changed

+127
-158
lines changed

‎build-tests/heft-sass-test/config/sass.json

+3
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,8 @@
99
"secondaryGeneratedTsFolders": ["lib"],
1010
"excludeFiles": ["./ignored1.scss", "ignored2.scss"],
1111

12+
"fileExtensions": [".module.scss", ".module.sass", ".module.css"],
13+
"nonModuleFileExtensions": [".global.scss", ".global.sass", ".global.css"],
14+
1215
"silenceDeprecations": ["mixed-decls", "import", "global-builtin", "color-functions"]
1316
}

‎build-tests/heft-sass-test/src/ExampleApp.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33

44
import * as React from 'react';
55

6-
import styles from './styles.sass';
7-
import oldStyles from './stylesCSS.css';
8-
import altSyntaxStyles from './stylesAltSyntax.scss';
9-
import stylesUseSyntax from './stylesUseSyntax.sass';
10-
import stylesUseAltSyntax from './stylesUseAltSyntax.scss';
6+
import styles from './styles.module.sass';
7+
import oldStyles from './stylesCSS.module.css';
8+
import altSyntaxStyles from './stylesAltSyntax.module.scss';
9+
import stylesUseSyntax from './stylesUseSyntax.module.sass';
10+
import stylesUseAltSyntax from './stylesUseAltSyntax.module.scss';
1111
import './stylesAltSyntax.global.scss';
1212

1313
/**

‎build-tests/heft-sass-test/src/styles.sass renamed to ‎build-tests/heft-sass-test/src/styles.module.sass

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
/**
2-
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
3-
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
4-
*/
5-
6-
// Testing Sass imports
7-
@import 'stylesImport'
8-
9-
// Testing node_modules imports
10-
@import '~buttono/buttono'
11-
12-
// Testing root styles
13-
html, body
14-
margin: 0
15-
height: 100%
16-
background-color: #c0c0c0
17-
font-family: Tahoma, sans-serif
18-
19-
// Testing Sass classes
20-
.exampleApp
21-
background-color: #ffffff
22-
padding: 20px
23-
border-radius: 5px
24-
width: 400px
25-
26-
.exampleButton
27-
@include buttono-block()
28-
@include buttono-style-modifier($background-color: mediumorchid)
1+
/**
2+
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
3+
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
4+
*/
5+
6+
// Testing Sass imports
7+
@import 'stylesImport'
8+
9+
// Testing node_modules imports
10+
@import 'pkg:buttono/buttono'
11+
12+
// Testing root styles
13+
html, body
14+
margin: 0
15+
height: 100%
16+
background-color: #c0c0c0
17+
font-family: Tahoma, sans-serif
18+
19+
// Testing Sass classes
20+
.exampleApp
21+
background-color: #ffffff
22+
padding: 20px
23+
border-radius: 5px
24+
width: 400px
25+
26+
.exampleButton
27+
@include buttono-block()
28+
@include buttono-style-modifier($background-color: mediumorchid)

‎build-tests/heft-sass-test/src/stylesAltSyntax.scss renamed to ‎build-tests/heft-sass-test/src/stylesAltSyntax.module.scss

File renamed without changes.

‎build-tests/heft-sass-test/src/stylesCSS.css renamed to ‎build-tests/heft-sass-test/src/stylesCSS.module.css

File renamed without changes.

‎build-tests/heft-sass-test/src/stylesUseAltSyntax.scss renamed to ‎build-tests/heft-sass-test/src/stylesUseAltSyntax.module.scss

File renamed without changes.

‎build-tests/heft-sass-test/src/stylesUseSyntax.sass renamed to ‎build-tests/heft-sass-test/src/stylesUseSyntax.module.sass

File renamed without changes.

‎build-tests/heft-sass-test/src/test/__snapshots__/lib-commonjs.test.ts.snap

+24-38
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ exports[`SASS CJS Shims ignored1.scss: files 1`] = `Array []`;
44

55
exports[`SASS CJS Shims ignored2.scss: files 1`] = `Array []`;
66

7-
exports[`SASS CJS Shims styles.sass: files 1`] = `
7+
exports[`SASS CJS Shims styles.module.sass: files 1`] = `
88
Array [
9-
"styles.css",
10-
"styles.sass.js",
9+
"styles.module.css",
10+
"styles.module.sass.js",
1111
]
1212
`;
1313

14-
exports[`SASS CJS Shims styles.sass: styles.css 1`] = `
14+
exports[`SASS CJS Shims styles.module.sass: styles.module.css 1`] = `
1515
"/**
1616
* * This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
1717
* * Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
@@ -80,8 +80,8 @@ html, body {
8080
}"
8181
`;
8282

83-
exports[`SASS CJS Shims styles.sass: styles.sass.js 1`] = `
84-
"module.exports = require(\\"./styles.css\\");
83+
exports[`SASS CJS Shims styles.module.sass: styles.module.sass.js 1`] = `
84+
"module.exports = require(\\"./styles.module.css\\");
8585
module.exports.default = module.exports;"
8686
`;
8787

@@ -104,16 +104,14 @@ exports[`SASS CJS Shims stylesAltSyntax.global.scss: stylesAltSyntax.global.css
104104

105105
exports[`SASS CJS Shims stylesAltSyntax.global.scss: stylesAltSyntax.global.scss.js 1`] = `"require(\\"./stylesAltSyntax.global.css\\");"`;
106106

107-
exports[`SASS CJS Shims stylesAltSyntax.scss: files 1`] = `
107+
exports[`SASS CJS Shims stylesAltSyntax.module.scss: files 1`] = `
108108
Array [
109-
"stylesAltSyntax.css",
110-
"stylesAltSyntax.global.css",
111-
"stylesAltSyntax.global.scss.js",
112-
"stylesAltSyntax.scss.js",
109+
"stylesAltSyntax.module.css",
110+
"stylesAltSyntax.module.scss.js",
113111
]
114112
`;
115113

116-
exports[`SASS CJS Shims stylesAltSyntax.scss: stylesAltSyntax.css 1`] = `
114+
exports[`SASS CJS Shims stylesAltSyntax.module.scss: stylesAltSyntax.module.css 1`] = `
117115
"/**
118116
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
119117
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
@@ -123,31 +121,19 @@ exports[`SASS CJS Shims stylesAltSyntax.scss: stylesAltSyntax.css 1`] = `
123121
}"
124122
`;
125123

126-
exports[`SASS CJS Shims stylesAltSyntax.scss: stylesAltSyntax.global.css 1`] = `
127-
"/**
128-
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
129-
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
130-
*/
131-
.ms-label {
132-
margin-bottom: 20px;
133-
}"
134-
`;
135-
136-
exports[`SASS CJS Shims stylesAltSyntax.scss: stylesAltSyntax.global.scss.js 1`] = `"require(\\"./stylesAltSyntax.global.css\\");"`;
137-
138-
exports[`SASS CJS Shims stylesAltSyntax.scss: stylesAltSyntax.scss.js 1`] = `
139-
"module.exports = require(\\"./stylesAltSyntax.css\\");
124+
exports[`SASS CJS Shims stylesAltSyntax.module.scss: stylesAltSyntax.module.scss.js 1`] = `
125+
"module.exports = require(\\"./stylesAltSyntax.module.css\\");
140126
module.exports.default = module.exports;"
141127
`;
142128

143-
exports[`SASS CJS Shims stylesUseAltSyntax.scss: files 1`] = `
129+
exports[`SASS CJS Shims stylesUseAltSyntax.module.scss: files 1`] = `
144130
Array [
145-
"stylesUseAltSyntax.css",
146-
"stylesUseAltSyntax.scss.js",
131+
"stylesUseAltSyntax.module.css",
132+
"stylesUseAltSyntax.module.scss.js",
147133
]
148134
`;
149135

150-
exports[`SASS CJS Shims stylesUseAltSyntax.scss: stylesUseAltSyntax.css 1`] = `
136+
exports[`SASS CJS Shims stylesUseAltSyntax.module.scss: stylesUseAltSyntax.module.css 1`] = `
151137
"/**
152138
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
153139
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
@@ -185,19 +171,19 @@ exports[`SASS CJS Shims stylesUseAltSyntax.scss: stylesUseAltSyntax.css 1`] = `
185171
}"
186172
`;
187173

188-
exports[`SASS CJS Shims stylesUseAltSyntax.scss: stylesUseAltSyntax.scss.js 1`] = `
189-
"module.exports = require(\\"./stylesUseAltSyntax.css\\");
174+
exports[`SASS CJS Shims stylesUseAltSyntax.module.scss: stylesUseAltSyntax.module.scss.js 1`] = `
175+
"module.exports = require(\\"./stylesUseAltSyntax.module.css\\");
190176
module.exports.default = module.exports;"
191177
`;
192178

193-
exports[`SASS CJS Shims stylesUseSyntax.sass: files 1`] = `
179+
exports[`SASS CJS Shims stylesUseSyntax.module.sass: files 1`] = `
194180
Array [
195-
"stylesUseSyntax.css",
196-
"stylesUseSyntax.sass.js",
181+
"stylesUseSyntax.module.css",
182+
"stylesUseSyntax.module.sass.js",
197183
]
198184
`;
199185

200-
exports[`SASS CJS Shims stylesUseSyntax.sass: stylesUseSyntax.css 1`] = `
186+
exports[`SASS CJS Shims stylesUseSyntax.module.sass: stylesUseSyntax.module.css 1`] = `
201187
"/**
202188
* * This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
203189
* * Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
@@ -251,7 +237,7 @@ exports[`SASS CJS Shims stylesUseSyntax.sass: stylesUseSyntax.css 1`] = `
251237
}"
252238
`;
253239

254-
exports[`SASS CJS Shims stylesUseSyntax.sass: stylesUseSyntax.sass.js 1`] = `
255-
"module.exports = require(\\"./stylesUseSyntax.css\\");
240+
exports[`SASS CJS Shims stylesUseSyntax.module.sass: stylesUseSyntax.module.sass.js 1`] = `
241+
"module.exports = require(\\"./stylesUseSyntax.module.css\\");
256242
module.exports.default = module.exports;"
257243
`;

‎build-tests/heft-sass-test/src/test/__snapshots__/lib-css.test.ts.snap

+12-23
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ exports[`SASS No Shims ignored1.scss: files 1`] = `Array []`;
44

55
exports[`SASS No Shims ignored2.scss: files 1`] = `Array []`;
66

7-
exports[`SASS No Shims styles.sass: files 1`] = `
7+
exports[`SASS No Shims styles.module.sass: files 1`] = `
88
Array [
9-
"styles.css",
9+
"styles.module.css",
1010
]
1111
`;
1212

13-
exports[`SASS No Shims styles.sass: styles.css 1`] = `
13+
exports[`SASS No Shims styles.module.sass: styles.module.css 1`] = `
1414
"/**
1515
* * This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
1616
* * Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
@@ -95,14 +95,13 @@ exports[`SASS No Shims stylesAltSyntax.global.scss: stylesAltSyntax.global.css 1
9595
}"
9696
`;
9797

98-
exports[`SASS No Shims stylesAltSyntax.scss: files 1`] = `
98+
exports[`SASS No Shims stylesAltSyntax.module.scss: files 1`] = `
9999
Array [
100-
"stylesAltSyntax.css",
101-
"stylesAltSyntax.global.css",
100+
"stylesAltSyntax.module.css",
102101
]
103102
`;
104103

105-
exports[`SASS No Shims stylesAltSyntax.scss: stylesAltSyntax.css 1`] = `
104+
exports[`SASS No Shims stylesAltSyntax.module.scss: stylesAltSyntax.module.css 1`] = `
106105
"/**
107106
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
108107
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
@@ -112,23 +111,13 @@ exports[`SASS No Shims stylesAltSyntax.scss: stylesAltSyntax.css 1`] = `
112111
}"
113112
`;
114113

115-
exports[`SASS No Shims stylesAltSyntax.scss: stylesAltSyntax.global.css 1`] = `
116-
"/**
117-
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
118-
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
119-
*/
120-
.ms-label {
121-
margin-bottom: 20px;
122-
}"
123-
`;
124-
125-
exports[`SASS No Shims stylesUseAltSyntax.scss: files 1`] = `
114+
exports[`SASS No Shims stylesUseAltSyntax.module.scss: files 1`] = `
126115
Array [
127-
"stylesUseAltSyntax.css",
116+
"stylesUseAltSyntax.module.css",
128117
]
129118
`;
130119

131-
exports[`SASS No Shims stylesUseAltSyntax.scss: stylesUseAltSyntax.css 1`] = `
120+
exports[`SASS No Shims stylesUseAltSyntax.module.scss: stylesUseAltSyntax.module.css 1`] = `
132121
"/**
133122
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
134123
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
@@ -166,13 +155,13 @@ exports[`SASS No Shims stylesUseAltSyntax.scss: stylesUseAltSyntax.css 1`] = `
166155
}"
167156
`;
168157

169-
exports[`SASS No Shims stylesUseSyntax.sass: files 1`] = `
158+
exports[`SASS No Shims stylesUseSyntax.module.sass: files 1`] = `
170159
Array [
171-
"stylesUseSyntax.css",
160+
"stylesUseSyntax.module.css",
172161
]
173162
`;
174163

175-
exports[`SASS No Shims stylesUseSyntax.sass: stylesUseSyntax.css 1`] = `
164+
exports[`SASS No Shims stylesUseSyntax.module.sass: stylesUseSyntax.module.css 1`] = `
176165
"/**
177166
* * This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
178167
* * Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.

0 commit comments

Comments
 (0)