Skip to content

Commit c179960

Browse files
mrmckebmrmckeb
authored
test: add additional goToDefinition tests (#202)
1 parent e284307 commit c179960

File tree

3 files changed

+257
-18
lines changed

3 files changed

+257
-18
lines changed

‎README.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -97,19 +97,19 @@ const b = styles['my_other-class'];
9797

9898
Please note that no options are required. However, depending on your configuration, you may need to customise these options.
9999

100-
| Option | Default value | Description |
101-
| -------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------ |
102-
| `allowUnknownClassnames` | `false` | Disables TypeScript warnings on unknown classnames (for default imports only). |
103-
| `classnameTransform` | `asIs` | See [`classnameTransform`](#classnameTransform) below. |
104-
| `customMatcher` | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes. |
105-
| `customRenderer` | `false` | See [`customRenderer`](#customRenderer) below. |
106-
| `customTemplate` | `false` | See [`customTemplate`](#customTemplate) below. |
107-
| `goToDefinition` | `false` | Enables jump to definition, with limited compatibility. See [`goToDefinition`](#goToDefinition) below. |
108-
| `noUncheckedIndexedAccess` | `false` | Enable for compatibility with TypeScript's `noUncheckedIndexedAccess`. |
109-
| `namedExports` | `true` | Enables named exports for compatible classnames. |
110-
| `dotenvOptions` | `{}` | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
111-
| `postcssOptions` | `{}` | See [`postcssOptions`](#postcssOptions) below. |
112-
| `rendererOptions` | `{}` | See [`rendererOptions`](#rendererOptions) below. |
100+
| Option | Default value | Description |
101+
| -------------------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
102+
| `allowUnknownClassnames` | `false` | Disables TypeScript warnings on unknown classnames (for default imports only). |
103+
| `classnameTransform` | `asIs` | See [`classnameTransform`](#classnameTransform) below. |
104+
| `customMatcher` | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes. |
105+
| `customRenderer` | `false` | See [`customRenderer`](#customRenderer) below. |
106+
| `customTemplate` | `false` | See [`customTemplate`](#customTemplate) below. |
107+
| `goToDefinition` | `false` | Enables jump to definition. See [`goToDefinition`](#goToDefinition) below. |
108+
| `noUncheckedIndexedAccess` | `false` | Enable for compatibility with TypeScript's `noUncheckedIndexedAccess`. |
109+
| `namedExports` | `true` | Enables named exports for compatible classnames. |
110+
| `dotenvOptions` | `{}` | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
111+
| `postcssOptions` | `{}` | See [`postcssOptions`](#postcssOptions) below. |
112+
| `rendererOptions` | `{}` | See [`rendererOptions`](#rendererOptions) below. |
113113

114114
```json
115115
{
@@ -199,7 +199,7 @@ The `classes` object represents all the classnames extracted from the CSS Module
199199

200200
This allows an editor like Visual Studio Code to go to a classname's definition (file and line).
201201

202-
This is experimental, and only works with Sass (for now) and may not always work as expected.
202+
This is experimental, and may not always work as expected. It currently supports CSS/PostCSS, Less, and Sass. Please raise an issue if you find something isn't working.
203203

204204
#### `postcssOptions`
205205

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

Lines changed: 237 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -728,7 +728,242 @@ export const __cssModule: true;
728728
export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3' | 'local-class-1' | 'inside-local' | 'inside-1-name-2' | 'inside-2-name-1';"
729729
`;
730730

731-
exports[`helpers / cssSnapshots with goToDefinition enabled should return a line-accurate dts file 1`] = `
731+
exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should return a line-accurate dts file 1`] = `
732+
"export let classA: string;
733+
734+
735+
736+
export let classB: string;
737+
738+
739+
740+
export let classC: string;
741+
742+
743+
744+
export let classD: string;
745+
746+
747+
748+
749+
750+
export let parent: string;export let childA: string;
751+
752+
753+
754+
export let childB: string;export let nestedChild: string;
755+
756+
757+
758+
759+
760+
export let fadeIn: string;
761+
762+
763+
764+
765+
766+
"
767+
`;
768+
769+
exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should return an object with classes, css, and a source map 1`] = `
770+
{
771+
"classes": {
772+
"ClassB": "ClassB",
773+
"childA": "childA",
774+
"childB": "childB",
775+
"class-c": "class-c",
776+
"classA": "classA",
777+
"class_d": "class_d",
778+
"fadeIn": "fadeIn",
779+
"nestedChild": "nestedChild",
780+
"parent": "parent",
781+
},
782+
"css": ".classA {
783+
color: rebeccapurple;
784+
}
785+
786+
.ClassB {
787+
color: rebeccapurple;
788+
}
789+
790+
.class-c {
791+
color: rebeccapurple;
792+
}
793+
794+
.class_d {
795+
@mixin postcss-mixin;
796+
color: rebeccapurple;
797+
}
798+
799+
.parent .childA {
800+
color: rebeccapurple;
801+
}
802+
803+
.parent .childB .nestedChild {
804+
color: rebeccapurple;
805+
}
806+
807+
@keyframes fadeIn {
808+
from {
809+
opacity: 0;
810+
}
811+
to {
812+
opacity: 1;
813+
}
814+
}
815+
816+
/*# sourceMappingURL=src/helpers/__tests__/fixtures/test.module.css.map */",
817+
"sourceMap": {
818+
"file": "src/helpers/__tests__/fixtures/test.module.css",
819+
"mappings": "AAAA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,oBAAoB;EACpB,oBAAoB;AACtB;;AAGE;IACE,oBAAoB;EACtB;;AAEE;MACE,oBAAoB;IACtB;;AAIJ;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF",
820+
"names": [],
821+
"sources": [
822+
"src/helpers/__tests__/fixtures/test.module.css",
823+
],
824+
"sourcesContent": [
825+
".classA {
826+
color: rebeccapurple;
827+
}
828+
829+
.ClassB {
830+
color: rebeccapurple;
831+
}
832+
833+
.class-c {
834+
color: rebeccapurple;
835+
}
836+
837+
.class_d {
838+
@mixin postcss-mixin;
839+
color: rebeccapurple;
840+
}
841+
842+
.parent {
843+
.childA {
844+
color: rebeccapurple;
845+
}
846+
.childB {
847+
.nestedChild {
848+
color: rebeccapurple;
849+
}
850+
}
851+
}
852+
853+
@keyframes fadeIn {
854+
from {
855+
opacity: 0;
856+
}
857+
to {
858+
opacity: 1;
859+
}
860+
}
861+
",
862+
],
863+
"version": 3,
864+
},
865+
}
866+
`;
867+
868+
exports[`helpers / cssSnapshots with goToDefinition enabled with Less should return a line-accurate dts file 1`] = `
869+
"export let nestedClassParent: string;export let childClass: string;export let selectorBlue: string;export let selectorGreen: string;export let selectorRed: string;export let column1: string;export let column2: string;export let column3: string;export let column4: string;
870+
871+
872+
873+
874+
875+
876+
877+
878+
879+
880+
881+
882+
883+
884+
885+
886+
887+
888+
889+
890+
891+
892+
893+
894+
895+
896+
897+
898+
export let colorSet: string;
899+
900+
901+
902+
"
903+
`;
904+
905+
exports[`helpers / cssSnapshots with goToDefinition enabled with Less should return an object with classes, css, and a source map 1`] = `
906+
{
907+
"classes": {
908+
"child-class": "child-class",
909+
"color-set": "color-set",
910+
"column-1": "column-1",
911+
"column-2": "column-2",
912+
"column-3": "column-3",
913+
"column-4": "column-4",
914+
"nested-class-parent": "nested-class-parent",
915+
"selector-blue": "selector-blue",
916+
"selector-green": "selector-green",
917+
"selector-red": "selector-red",
918+
},
919+
"css": ".nested-class-parent {
920+
color: black;
921+
}
922+
.nested-class-parent .child-class {
923+
font-size: 12px;
924+
}
925+
.selector-blue {
926+
color: b;
927+
}
928+
.selector-green {
929+
color: b;
930+
}
931+
.selector-red {
932+
color: b;
933+
}
934+
.column-1 {
935+
height: 50px;
936+
}
937+
.column-2 {
938+
height: 100px;
939+
}
940+
.column-3 {
941+
height: 150px;
942+
}
943+
.column-4 {
944+
height: 200px;
945+
}
946+
/* prettier-ignore */
947+
.color-set {
948+
one-1: blue;
949+
two-2: green;
950+
three-3: red;
951+
}
952+
",
953+
"sourceMap": {
954+
"file": "src/helpers/__tests__/fixtures/test.module.less",
955+
"mappings": "AAAA;EACE,YAAA;ACCF;ADFA;EAII,eAAA;ACCJ;ADLC;EAYG,QAAA;ACJJ;ADRC;EAYG,QAAA;ACDJ;ADXC;EAYG,QAAA;ACEJ;ADdC;EAkBG,YAAA;ACDJ;ADjBC;EAkBG,aAAA;ACEJ;ADpBC;EAkBG,aAAA;ACKJ;ADvBC;EAkBG,aAAA;ACQJ;AACA,oBAAoB;ADEpB;EAEI,WAAA;EAAA,YAAA;EAAA,YAAA;ACCJ",
956+
"names": [],
957+
"sources": [
958+
"[cwd]/src/helpers/__tests__/fixtures/test.module.less",
959+
"src/helpers/__tests__/fixtures/test.module.less",
960+
],
961+
"version": 3,
962+
},
963+
}
964+
`;
965+
966+
exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should return a line-accurate dts file 1`] = `
732967
"
733968
734969
@@ -819,7 +1054,7 @@ export let myAnimation: string;
8191054
"
8201055
`;
8211056

822-
exports[`helpers / cssSnapshots with goToDefinition enabled should return an object with classes, css, and a source map 1`] = `
1057+
exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should return an object with classes, css, and a source map 1`] = `
8231058
{
8241059
"classes": {
8251060
"App-logo": "App-logo",

‎src/helpers/__tests__/getDtsSnapshot.test.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -230,8 +230,12 @@ describe('helpers / cssSnapshots', () => {
230230
});
231231
});
232232

233-
describe('with goToDefinition enabled', () => {
234-
const fileName = join(__dirname, 'fixtures', 'test.module.scss');
233+
describe.each([
234+
['CSS', 'css'],
235+
['Less', 'less'],
236+
['Sass', 'scss'],
237+
])('with goToDefinition enabled with %s', (_, extension) => {
238+
const fileName = join(__dirname, 'fixtures', `test.module.${extension}`);
235239
const css = readFileSync(fileName, 'utf8');
236240
const options: Options = {
237241
classnameTransform: 'camelCaseOnly',

0 commit comments

Comments
 (0)