Skip to content

Commit 1b0cc06

Browse files
feat: add support for Sass partials via aliases (mrmckeb#251)
Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com>
1 parent b546052 commit 1b0cc06

File tree

5 files changed

+86
-12
lines changed

5 files changed

+86
-12
lines changed

src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ exports[`helpers / cssSnapshots with allowUnknownClassnames enabled should retur
3434
'appLogo': string;
3535
'appLogo': string;
3636
'myAnimation': string;
37+
'myFolderIndex': string;
3738
[key: string]: string;
3839
};
3940
export default _classes;
@@ -58,6 +59,7 @@ export let classWithMixin: string;
5859
export let appLogo: string;
5960
export let appLogo: string;
6061
export let myAnimation: string;
62+
export let myFolderIndex: string;
6163
"
6264
`;
6365

@@ -618,6 +620,7 @@ exports[`helpers / cssSnapshots with file 'test.module.scss' createExports shoul
618620
'App_logo': string;
619621
'App-logo': string;
620622
'my-animation': string;
623+
'my-folder-index': string;
621624
};
622625
export default _classes;
623626
export let App_logo: string;
@@ -637,6 +640,7 @@ exports[`helpers / cssSnapshots with file 'test.module.scss' getCssExports shoul
637640
"local-class-inside-global": "local-class-inside-global",
638641
"local-class-inside-local": "local-class-inside-local",
639642
"my-animation": "my-animation",
643+
"my-folder-index": "my-folder-index",
640644
"nested-class-parent": "nested-class-parent",
641645
"nested-class-parent--extended": "nested-class-parent--extended",
642646
"reserved-words": "reserved-words",
@@ -678,12 +682,13 @@ declare let _classes: {
678682
'App_logo': string;
679683
'App-logo': string;
680684
'my-animation': string;
685+
'my-folder-index': string;
681686
};
682687
export default _classes;
683688
export let App_logo: string;
684689
685690
export const __cssModule: true;
686-
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';"
691+
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';"
687692
`;
688693

689694
exports[`helpers / cssSnapshots with file 'test.module.styl' createExports should create an exports file 1`] = `
@@ -1034,7 +1039,7 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with Less should ret
10341039
exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should return a line-accurate dts file 1`] = `
10351040
"
10361041
1037-
1042+
export let myFolderIndex: string;
10381043
10391044
10401045
export let localClassInsideGlobal: string;
@@ -1113,6 +1118,11 @@ export let myAnimation: string;
11131118
11141119
11151120
1121+
1122+
1123+
1124+
1125+
11161126
11171127
11181128
@@ -1143,6 +1153,7 @@ declare let _classes: {
11431153
'appLogo': string;
11441154
'appLogo': string;
11451155
'myAnimation': string;
1156+
'myFolderIndex': string;
11461157
};
11471158
export default _classes;
11481159
"
@@ -1162,6 +1173,7 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should ret
11621173
"local-class-inside-global": "local-class-inside-global",
11631174
"local-class-inside-local": "local-class-inside-local",
11641175
"my-animation": "my-animation",
1176+
"my-folder-index": "my-folder-index",
11651177
"nested-class-parent": "nested-class-parent",
11661178
"nested-class-parent--extended": "nested-class-parent--extended",
11671179
"reserved-words": "reserved-words",
@@ -1262,15 +1274,21 @@ exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should ret
12621274
.commented-parent-class {
12631275
.commented-child-class
12641276
}
1265-
*/",
1277+
*/
1278+
1279+
.my-folder-index {
1280+
text-indent: 9999px;
1281+
margin: 10px;
1282+
}",
12661283
"sourceMap": {
12671284
"file": "src/helpers/__tests__/fixtures/test.module.scss",
1268-
"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",
1285+
"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",
12691286
"names": [],
12701287
"sources": [
12711288
"file://[cwd]/src/helpers/__tests__/fixtures/test.module.scss",
12721289
"src/helpers/__tests__/fixtures/test.module.scss",
12731290
"file://[cwd]/src/helpers/__tests__/fixtures/_mixin.scss",
1291+
"file://[cwd]/src/helpers/__tests__/fixtures/my-folder/_index.scss",
12741292
],
12751293
"version": 3,
12761294
},
@@ -1316,6 +1334,7 @@ exports[`helpers / cssSnapshots with noUncheckedIndexedAccess enabled should ret
13161334
'appLogo'?: string;
13171335
'appLogo'?: string;
13181336
'myAnimation'?: string;
1337+
'myFolderIndex'?: string;
13191338
};
13201339
export default _classes;
13211340
export let localClassInsideGlobal: string | undefined;
@@ -1339,5 +1358,6 @@ export let classWithMixin: string | undefined;
13391358
export let appLogo: string | undefined;
13401359
export let appLogo: string | undefined;
13411360
export let myAnimation: string | undefined;
1361+
export let myFolderIndex: string | undefined;
13421362
"
13431363
`;
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import '../mixin';
2+
3+
.my-folder-index {
4+
text-indent: 9999px;
5+
@include set-margin(10px);
6+
}

src/helpers/__tests__/fixtures/test.module.sass

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
:global .global-class
1+
:global .global-class
22
color: rebeccapurple
33

44

5-
:global(.global-class-2)
5+
:global(.global-class-2)
66
.local-class-inside-global
77
color: rebeccapurple
8-
98

109

11-
:local .local-class
10+
11+
:local .local-class
1212
color: rebeccapurple
1313

1414

1515
:local(.local-class-2)
1616
.local-class-inside-local
1717
color: rebeccapurple
18-
18+
1919

2020

2121
.reserved-words

src/helpers/__tests__/fixtures/test.module.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,5 @@ $color: rebeccapurple !default;
7070
.commented-child-class
7171
}
7272
*/
73+
74+
@import 'my-folder';

src/helpers/getCssExports.ts

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,57 @@ export const getCssExports = ({
114114

115115
const aliasImporter: sass.FileImporter<'sync'> = {
116116
findFileUrl(url) {
117-
const newUrl =
117+
const exactFileUrl = matchPath?.(url, undefined, undefined, [
118+
'.sass',
119+
'.scss',
120+
]);
121+
122+
if (exactFileUrl) {
123+
return new URL(`file://${exactFileUrl}`);
124+
}
125+
126+
/*
127+
* In case it didn't find the exact file it'll proceed to
128+
* check other files matching the import process of Sass
129+
* guidelines:
130+
* https://sass-lang.com/documentation/at-rules/import/#partials
131+
* https://sass-lang.com/documentation/at-rules/import/#index-files
132+
*/
133+
134+
// Checks for partials
135+
const partialFileName = path.basename(url);
136+
const partialDirName = path.dirname(url);
137+
const partialFilePath = path.join(
138+
partialDirName,
139+
`_${partialFileName}`,
140+
);
141+
const partialFileUrl =
118142
matchPath !== null
119-
? matchPath(url, undefined, undefined, ['.sass', '.scss'])
143+
? matchPath(partialFilePath, undefined, undefined, [
144+
'.sass',
145+
'.scss',
146+
])
120147
: undefined;
121-
return newUrl ? new URL(`file://${newUrl}`) : null;
148+
149+
if (partialFileUrl) {
150+
return new URL(`file://${partialFileUrl}`);
151+
}
152+
153+
// Checks for an _index file
154+
const indexFilePath = path.join(
155+
partialDirName,
156+
partialFileName,
157+
`_index`,
158+
);
159+
const indexFileUrl =
160+
matchPath !== null
161+
? matchPath(indexFilePath, undefined, undefined, [
162+
'.sass',
163+
'.scss',
164+
])
165+
: undefined;
166+
167+
return indexFileUrl ? new URL(`file://${indexFileUrl}`) : null;
122168
},
123169
};
124170

0 commit comments

Comments
 (0)