Skip to content

Commit

Permalink
test: add additional goToDefinition tests (#202)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrmckeb
mrmckeb authored Feb 19, 2023
1 parent e284307 commit c179960
Show file tree
Hide file tree
Showing 3 changed files with 257 additions and 18 deletions.
28 changes: 14 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,19 +97,19 @@ const b = styles['my_other-class'];

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

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

```json
{
Expand Down Expand Up @@ -199,7 +199,7 @@ The `classes` object represents all the classnames extracted from the CSS Module

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

This is experimental, and only works with Sass (for now) and may not always work as expected.
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.

#### `postcssOptions`

Expand Down
239 changes: 237 additions & 2 deletions src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -728,7 +728,242 @@ export const __cssModule: true;
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';"
`;

exports[`helpers / cssSnapshots with goToDefinition enabled should return a line-accurate dts file 1`] = `
exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should return a line-accurate dts file 1`] = `
"export let classA: string;
export let classB: string;
export let classC: string;
export let classD: string;
export let parent: string;export let childA: string;
export let childB: string;export let nestedChild: string;
export let fadeIn: string;
"
`;

exports[`helpers / cssSnapshots with goToDefinition enabled with CSS should return an object with classes, css, and a source map 1`] = `
{
"classes": {
"ClassB": "ClassB",
"childA": "childA",
"childB": "childB",
"class-c": "class-c",
"classA": "classA",
"class_d": "class_d",
"fadeIn": "fadeIn",
"nestedChild": "nestedChild",
"parent": "parent",
},
"css": ".classA {
color: rebeccapurple;
}
.ClassB {
color: rebeccapurple;
}
.class-c {
color: rebeccapurple;
}
.class_d {
@mixin postcss-mixin;
color: rebeccapurple;
}
.parent .childA {
color: rebeccapurple;
}
.parent .childB .nestedChild {
color: rebeccapurple;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*# sourceMappingURL=src/helpers/__tests__/fixtures/test.module.css.map */",
"sourceMap": {
"file": "src/helpers/__tests__/fixtures/test.module.css",
"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",
"names": [],
"sources": [
"src/helpers/__tests__/fixtures/test.module.css",
],
"sourcesContent": [
".classA {
color: rebeccapurple;
}
.ClassB {
color: rebeccapurple;
}
.class-c {
color: rebeccapurple;
}
.class_d {
@mixin postcss-mixin;
color: rebeccapurple;
}
.parent {
.childA {
color: rebeccapurple;
}
.childB {
.nestedChild {
color: rebeccapurple;
}
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
",
],
"version": 3,
},
}
`;

exports[`helpers / cssSnapshots with goToDefinition enabled with Less should return a line-accurate dts file 1`] = `
"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;
export let colorSet: string;
"
`;

exports[`helpers / cssSnapshots with goToDefinition enabled with Less should return an object with classes, css, and a source map 1`] = `
{
"classes": {
"child-class": "child-class",
"color-set": "color-set",
"column-1": "column-1",
"column-2": "column-2",
"column-3": "column-3",
"column-4": "column-4",
"nested-class-parent": "nested-class-parent",
"selector-blue": "selector-blue",
"selector-green": "selector-green",
"selector-red": "selector-red",
},
"css": ".nested-class-parent {
color: black;
}
.nested-class-parent .child-class {
font-size: 12px;
}
.selector-blue {
color: b;
}
.selector-green {
color: b;
}
.selector-red {
color: b;
}
.column-1 {
height: 50px;
}
.column-2 {
height: 100px;
}
.column-3 {
height: 150px;
}
.column-4 {
height: 200px;
}
/* prettier-ignore */
.color-set {
one-1: blue;
two-2: green;
three-3: red;
}
",
"sourceMap": {
"file": "src/helpers/__tests__/fixtures/test.module.less",
"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",
"names": [],
"sources": [
"[cwd]/src/helpers/__tests__/fixtures/test.module.less",
"src/helpers/__tests__/fixtures/test.module.less",
],
"version": 3,
},
}
`;

exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should return a line-accurate dts file 1`] = `
"
Expand Down Expand Up @@ -819,7 +1054,7 @@ export let myAnimation: string;
"
`;

exports[`helpers / cssSnapshots with goToDefinition enabled should return an object with classes, css, and a source map 1`] = `
exports[`helpers / cssSnapshots with goToDefinition enabled with Sass should return an object with classes, css, and a source map 1`] = `
{
"classes": {
"App-logo": "App-logo",
Expand Down
8 changes: 6 additions & 2 deletions src/helpers/__tests__/getDtsSnapshot.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,8 +230,12 @@ describe('helpers / cssSnapshots', () => {
});
});

describe('with goToDefinition enabled', () => {
const fileName = join(__dirname, 'fixtures', 'test.module.scss');
describe.each([
['CSS', 'css'],
['Less', 'less'],
['Sass', 'scss'],
])('with goToDefinition enabled with %s', (_, extension) => {
const fileName = join(__dirname, 'fixtures', `test.module.${extension}`);
const css = readFileSync(fileName, 'utf8');
const options: Options = {
classnameTransform: 'camelCaseOnly',
Expand Down

0 comments on commit c179960

Please sign in to comment.