Skip to content

[heft-sass] Ignore SASS partials in module classifier #5225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 13, 2025
Merged

[heft-sass] Ignore SASS partials in module classifier #5225

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f95140
[heft-sass] Ignore SCSS partials in module classifier
dmichon-msft May 12, 2025
5ec5b11
Test both npm import styles
dmichon-msft May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions build-tests/heft-sass-test/config/sass.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,8 @@
"secondaryGeneratedTsFolders": ["lib"],
"excludeFiles": ["./ignored1.scss", "ignored2.scss"],

"fileExtensions": [".module.scss", ".module.sass", ".module.css"],
"nonModuleFileExtensions": [".global.scss", ".global.sass", ".global.css"],

"silenceDeprecations": ["mixed-decls", "import", "global-builtin", "color-functions"]
}
10 changes: 5 additions & 5 deletions build-tests/heft-sass-test/src/ExampleApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@

import * as React from 'react';

import styles from './styles.sass';
import oldStyles from './stylesCSS.css';
import altSyntaxStyles from './stylesAltSyntax.scss';
import stylesUseSyntax from './stylesUseSyntax.sass';
import stylesUseAltSyntax from './stylesUseAltSyntax.scss';
import styles from './styles.module.sass';
import oldStyles from './stylesCSS.module.css';
import altSyntaxStyles from './stylesAltSyntax.module.scss';
import stylesUseSyntax from './stylesUseSyntax.module.sass';
import stylesUseAltSyntax from './stylesUseAltSyntax.module.scss';
import './stylesAltSyntax.global.scss';

/**
Expand Down
2 changes: 1 addition & 1 deletion build-tests/heft-sass-test/src/_forwardSyntaxStyles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
* but gets embedded into other files.
*/

@forward '~buttono/buttono';
@forward 'pkg:buttono/buttono';
56 changes: 28 additions & 28 deletions build-tests/heft-sass-test/src/styles.sass → ...sts/heft-sass-test/src/styles.module.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
/**
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
*/
// Testing Sass imports
@import 'stylesImport'
// Testing node_modules imports
@import '~buttono/buttono'
// Testing root styles
html, body
margin: 0
height: 100%
background-color: #c0c0c0
font-family: Tahoma, sans-serif
// Testing Sass classes
.exampleApp
background-color: #ffffff
padding: 20px
border-radius: 5px
width: 400px
.exampleButton
@include buttono-block()
@include buttono-style-modifier($background-color: mediumorchid)
/**
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
*/

// Testing Sass imports
@import 'stylesImport'

// Testing node_modules imports
@import 'pkg:buttono/buttono'

// Testing root styles
html, body
margin: 0
height: 100%
background-color: #c0c0c0
font-family: Tahoma, sans-serif

// Testing Sass classes
.exampleApp
background-color: #ffffff
padding: 20px
border-radius: 5px
width: 400px

.exampleButton
@include buttono-block()
@include buttono-style-modifier($background-color: mediumorchid)
0 ...s/heft-sass-test/src/stylesAltSyntax.scss → ...sass-test/src/stylesAltSyntax.module.scss
View file
Open in desktop
File renamed without changes.
0 build-tests/heft-sass-test/src/stylesCSS.css → ...s/heft-sass-test/src/stylesCSS.module.css
View file
Open in desktop
File renamed without changes.
0 ...eft-sass-test/src/stylesUseAltSyntax.scss → ...s-test/src/stylesUseAltSyntax.module.scss
View file
Open in desktop
File renamed without changes.
0 ...s/heft-sass-test/src/stylesUseSyntax.sass → ...sass-test/src/stylesUseSyntax.module.sass
View file
Open in desktop
File renamed without changes.
62 changes: 24 additions & 38 deletions build-tests/heft-sass-test/src/test/__snapshots__/lib-commonjs.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ exports[`SASS CJS Shims ignored1.scss: files 1`] = `Array []`;

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

exports[`SASS CJS Shims styles.sass: files 1`] = `
exports[`SASS CJS Shims styles.module.sass: files 1`] = `
Array [
"styles.css",
"styles.sass.js",
"styles.module.css",
"styles.module.sass.js",
]
`;

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

exports[`SASS CJS Shims styles.sass: styles.sass.js 1`] = `
"module.exports = require(\\"./styles.css\\");
exports[`SASS CJS Shims styles.module.sass: styles.module.sass.js 1`] = `
"module.exports = require(\\"./styles.module.css\\");
module.exports.default = module.exports;"
`;

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

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

exports[`SASS CJS Shims stylesAltSyntax.scss: files 1`] = `
exports[`SASS CJS Shims stylesAltSyntax.module.scss: files 1`] = `
Array [
"stylesAltSyntax.css",
"stylesAltSyntax.global.css",
"stylesAltSyntax.global.scss.js",
"stylesAltSyntax.scss.js",
"stylesAltSyntax.module.css",
"stylesAltSyntax.module.scss.js",
]
`;

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

exports[`SASS CJS Shims stylesAltSyntax.scss: stylesAltSyntax.global.css 1`] = `
"/**
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
*/
.ms-label {
margin-bottom: 20px;
}"
`;

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

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

exports[`SASS CJS Shims stylesUseAltSyntax.scss: files 1`] = `
exports[`SASS CJS Shims stylesUseAltSyntax.module.scss: files 1`] = `
Array [
"stylesUseAltSyntax.css",
"stylesUseAltSyntax.scss.js",
"stylesUseAltSyntax.module.css",
"stylesUseAltSyntax.module.scss.js",
]
`;

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

exports[`SASS CJS Shims stylesUseAltSyntax.scss: stylesUseAltSyntax.scss.js 1`] = `
"module.exports = require(\\"./stylesUseAltSyntax.css\\");
exports[`SASS CJS Shims stylesUseAltSyntax.module.scss: stylesUseAltSyntax.module.scss.js 1`] = `
"module.exports = require(\\"./stylesUseAltSyntax.module.css\\");
module.exports.default = module.exports;"
`;

exports[`SASS CJS Shims stylesUseSyntax.sass: files 1`] = `
exports[`SASS CJS Shims stylesUseSyntax.module.sass: files 1`] = `
Array [
"stylesUseSyntax.css",
"stylesUseSyntax.sass.js",
"stylesUseSyntax.module.css",
"stylesUseSyntax.module.sass.js",
]
`;

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

exports[`SASS CJS Shims stylesUseSyntax.sass: stylesUseSyntax.sass.js 1`] = `
"module.exports = require(\\"./stylesUseSyntax.css\\");
exports[`SASS CJS Shims stylesUseSyntax.module.sass: stylesUseSyntax.module.sass.js 1`] = `
"module.exports = require(\\"./stylesUseSyntax.module.css\\");
module.exports.default = module.exports;"
`;
35 changes: 12 additions & 23 deletions build-tests/heft-sass-test/src/test/__snapshots__/lib-css.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ exports[`SASS No Shims ignored1.scss: files 1`] = `Array []`;

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

exports[`SASS No Shims styles.sass: files 1`] = `
exports[`SASS No Shims styles.module.sass: files 1`] = `
Array [
"styles.css",
"styles.module.css",
]
`;

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

exports[`SASS No Shims stylesAltSyntax.scss: files 1`] = `
exports[`SASS No Shims stylesAltSyntax.module.scss: files 1`] = `
Array [
"stylesAltSyntax.css",
"stylesAltSyntax.global.css",
"stylesAltSyntax.module.css",
]
`;

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

exports[`SASS No Shims stylesAltSyntax.scss: stylesAltSyntax.global.css 1`] = `
"/**
* This file gets transpiled by the heft-sass-plugin and output to the lib/ folder.
* Then Webpack uses css-loader to embed, and finally style-loader to apply it to the DOM.
*/
.ms-label {
margin-bottom: 20px;
}"
`;

exports[`SASS No Shims stylesUseAltSyntax.scss: files 1`] = `
exports[`SASS No Shims stylesUseAltSyntax.module.scss: files 1`] = `
Array [
"stylesUseAltSyntax.css",
"stylesUseAltSyntax.module.css",
]
`;

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

exports[`SASS No Shims stylesUseSyntax.sass: files 1`] = `
exports[`SASS No Shims stylesUseSyntax.module.sass: files 1`] = `
Array [
"stylesUseSyntax.css",
"stylesUseSyntax.module.css",
]
`;

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