Skip to content
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

feat(getCssExports): adds support for SCSS/SASS partials via aliases #251

Merged
merged 4 commits into from
Feb 11, 2024
Merged

feat(getCssExports): adds support for SCSS/SASS partials via aliases #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f01e48
feat(getCssExports): adds support for SCSS/SASS partials
rmachado-studocu Jan 30, 2024
1319975
feat: adds support for `_index.scss` files
rmachado-studocu Feb 8, 2024
52e30a3
Merge remote-tracking branch 'origin/main' into feat/add-support-for-…
mrmckeb Feb 11, 2024
a6d40b1
fixups
mrmckeb Feb 11, 2024
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
28 changes: 24 additions & 4 deletions src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ exports[`helpers / cssSnapshots with allowUnknownClassnames enabled should retur
'appLogo': string;
'appLogo': string;
'myAnimation': string;
'myFolderIndex': string;
[key: string]: string;
};
export default _classes;
Expand All @@ -58,6 +59,7 @@ export let classWithMixin: string;
export let appLogo: string;
export let appLogo: string;
export let myAnimation: string;
export let myFolderIndex: string;
"
`;

Expand Down Expand Up @@ -618,6 +620,7 @@ exports[`helpers / cssSnapshots with file 'test.module.scss' createExports shoul
'App_logo': string;
'App-logo': string;
'my-animation': string;
'my-folder-index': string;
};
export default _classes;
export let App_logo: string;
Expand All @@ -637,6 +640,7 @@ exports[`helpers / cssSnapshots with file 'test.module.scss' getCssExports shoul
"local-class-inside-global": "local-class-inside-global",
"local-class-inside-local": "local-class-inside-local",
"my-animation": "my-animation",
"my-folder-index": "my-folder-index",
"nested-class-parent": "nested-class-parent",
"nested-class-parent--extended": "nested-class-parent--extended",
"reserved-words": "reserved-words",
Expand Down Expand Up @@ -678,12 +682,13 @@ declare let _classes: {
'App_logo': string;
'App-logo': string;
'my-animation': string;
'my-folder-index': string;
};
export default _classes;
export let App_logo: string;

export const __cssModule: true;
export type AllClassNames = 'local-class-inside-global' | 'local-class' | 'local-class-2' | 'local-class-inside-local' | 'reserved-words' | 'default' | 'const' | 'nested-class-parent' | 'child-class' | 'nested-class-parent--extended' | 'section-1' | 'section-2' | 'section-3' | 'section-4' | 'section-5' | 'section-6' | 'section-7' | 'section-8' | 'section-9' | 'class-with-mixin' | 'App_logo' | 'App-logo' | 'my-animation';"
export type AllClassNames = 'local-class-inside-global' | 'local-class' | 'local-class-2' | 'local-class-inside-local' | 'reserved-words' | 'default' | 'const' | 'nested-class-parent' | 'child-class' | 'nested-class-parent--extended' | 'section-1' | 'section-2' | 'section-3' | 'section-4' | 'section-5' | 'section-6' | 'section-7' | 'section-8' | 'section-9' | 'class-with-mixin' | 'App_logo' | 'App-logo' | 'my-animation' | 'my-folder-index';"
`;

exports[`helpers / cssSnapshots with file 'test.module.styl' createExports should create an exports file 1`] = `
Expand Down Expand Up @@ -1034,7 +1039,7 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with Less should ret
exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should return a line-accurate dts file 1`] = `
"


export let myFolderIndex: string;


export let localClassInsideGlobal: string;
Expand Down Expand Up @@ -1113,6 +1118,11 @@ export let myAnimation: string;











Expand Down Expand Up @@ -1143,6 +1153,7 @@ declare let _classes: {
'appLogo': string;
'appLogo': string;
'myAnimation': string;
'myFolderIndex': string;
};
export default _classes;
"
Expand All @@ -1162,6 +1173,7 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should ret
"local-class-inside-global": "local-class-inside-global",
"local-class-inside-local": "local-class-inside-local",
"my-animation": "my-animation",
"my-folder-index": "my-folder-index",
"nested-class-parent": "nested-class-parent",
"nested-class-parent--extended": "nested-class-parent--extended",
"reserved-words": "reserved-words",
Expand Down Expand Up @@ -1262,15 +1274,21 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should ret
.commented-parent-class {
.commented-child-class
}
*/",
*/

.my-folder-index {
text-indent: 9999px;
margin: 10px;
}",
"sourceMap": {
"file": "src/helpers/__tests__/fixtures/test.module.scss",
"mappings": "AAAA;EACE,oBAAA;ACCF;;ADGE;EACE,oBAAA;ACAJ;;ADIA;EACE,oBAAA;ACDF;;ADKE;EACE,oBAAA;ACFJ;;ADOE;EACE,oBAAA;ACJJ;;ADME;EACE,oBAAA;ACJJ;;ADSE;EACE,oBAAA;ACNJ;;ADQE;EACE,oBAAA;ACNJ;;ADaE;EACE,oBAJI;ACNR;;ADSE;EACE,oBAJI;ACFR;;ADKE;EACE,oBAJI;ACER;;ADCE;EACE,oBAJI;ACMR;;ADHE;EACE,oBAJI;ACUR;;ADPE;EACE,oBAJI;ACcR;;ADXE;EACE,oBAJI;ACkBR;;ADfE;EACE,oBAJI;ACsBR;;ADnBE;EACE,oBAJI;AC0BR;;ADhBA;EE/CE,SFgDoB;ACmBtB;;ADhBA;EACE,cAAA;EACA,oBAAA;ACmBF;;ADhBA;EACE;IACE,2CAAA;ECmBF;AACF;;ADZA;;;;CAAA",
"mappings": "AAAA;EACE,oBAAA;ACCF;;ADGE;EACE,oBAAA;ACAJ;;ADIA;EACE,oBAAA;ACDF;;ADKE;EACE,oBAAA;ACFJ;;ADOE;EACE,oBAAA;ACJJ;;ADME;EACE,oBAAA;ACJJ;;ADSE;EACE,oBAAA;ACNJ;;ADQE;EACE,oBAAA;ACNJ;;ADaE;EACE,oBAJI;ACNR;;ADSE;EACE,oBAJI;ACFR;;ADKE;EACE,oBAJI;ACER;;ADCE;EACE,oBAJI;ACMR;;ADHE;EACE,oBAJI;ACUR;;ADPE;EACE,oBAJI;ACcR;;ADXE;EACE,oBAJI;ACkBR;;ADfE;EACE,oBAJI;ACsBR;;ADnBE;EACE,oBAJI;AC0BR;;ADhBA;EE/CE,SFgDoB;ACmBtB;;ADhBA;EACE,cAAA;EACA,oBAAA;ACmBF;;ADhBA;EACE;IACE,2CAAA;ECmBF;AACF;;ADZA;;;;CAAA;;AGjEA;EACE,mBAAA;EDFA,YCGoB;AFoFtB",
"names": [],
"sources": [
"file://[cwd]/src/helpers/__tests__/fixtures/test.module.scss",
"src/helpers/__tests__/fixtures/test.module.scss",
"file://[cwd]/src/helpers/__tests__/fixtures/_mixin.scss",
"file://[cwd]/src/helpers/__tests__/fixtures/my-folder/_index.scss",
],
"version": 3,
},
Expand Down Expand Up @@ -1316,6 +1334,7 @@ exports[`helpers / cssSnapshots with noUncheckedIndexedAccess enabled should ret
'appLogo'?: string;
'appLogo'?: string;
'myAnimation'?: string;
'myFolderIndex'?: string;
};
export default _classes;
export let localClassInsideGlobal: string | undefined;
Expand All @@ -1339,5 +1358,6 @@ export let classWithMixin: string | undefined;
export let appLogo: string | undefined;
export let appLogo: string | undefined;
export let myAnimation: string | undefined;
export let myFolderIndex: string | undefined;
"
`;
6 changes: 6 additions & 0 deletions src/helpers/__tests__/fixtures/my-folder/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@import '../mixin';

.my-folder-index {
text-indent: 9999px;
@include set-margin(10px);
}
10 changes: 5 additions & 5 deletions src/helpers/__tests__/fixtures/test.module.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
:global .global-class
:global .global-class
color: rebeccapurple


:global(.global-class-2)
:global(.global-class-2)
.local-class-inside-global
color: rebeccapurple



:local .local-class

:local .local-class
color: rebeccapurple


:local(.local-class-2)
.local-class-inside-local
color: rebeccapurple



.reserved-words
Expand Down
2 changes: 2 additions & 0 deletions src/helpers/__tests__/fixtures/test.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,5 @@ $color: rebeccapurple !default;
.commented-child-class
}
*/

@import 'my-folder';
52 changes: 49 additions & 3 deletions src/helpers/getCssExports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,57 @@ export const getCssExports = ({

const aliasImporter: sass.FileImporter<'sync'> = {
findFileUrl(url) {
const newUrl =
const exactFileUrl = matchPath?.(url, undefined, undefined, [
'.sass',
'.scss',
]);

if (exactFileUrl) {
return new URL(`file://${exactFileUrl}`);
}

/*
* In case it didn't find the exact file it'll proceed to
* check other files matching the import process of Sass
* guidelines:
* https://sass-lang.com/documentation/at-rules/import/#partials
* https://sass-lang.com/documentation/at-rules/import/#index-files
*/

// Checks for partials
const partialFileName = path.basename(url);
const partialDirName = path.dirname(url);
const partialFilePath = path.join(
partialDirName,
`_${partialFileName}`,
);
const partialFileUrl =
matchPath !== null
? matchPath(url, undefined, undefined, ['.sass', '.scss'])
? matchPath(partialFilePath, undefined, undefined, [
'.sass',
'.scss',
])
: undefined;
return newUrl ? new URL(`file://${newUrl}`) : null;

if (partialFileUrl) {
return new URL(`file://${partialFileUrl}`);
}

// Checks for an _index file
const indexFilePath = path.join(
partialDirName,
partialFileName,
`_index`,
);
const indexFileUrl =
matchPath !== null
? matchPath(indexFilePath, undefined, undefined, [
'.sass',
'.scss',
])
: undefined;

return indexFileUrl ? new URL(`file://${indexFileUrl}`) : null;
},
};

Expand Down
Loading