Skip to content

Commit 137a6eb

Browse files
nperez0111skovy
authored andcommitted
fix(export-default): export a type instead of an interface Fixes #71
Before we were unable to do this: ```typescript export interface Styles { 'classname--first': string; 'classname--second': string; } function foo(bar: Record<string, string>){ return Object.keys(bar); } ``` Because an interface does not allow being cast as a wider type. This fixes that by using types instead of interfaces: ```typescript export type Styles = { 'classname--first': string; 'classname--second': string; } ``` BREAKING CHANGE: this can interfere with how others use their default exported classnames
1 parent 1626f9d commit 137a6eb

File tree

7 files changed

+17
-23
lines changed

7 files changed

+17
-23
lines changed

README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ yarn tsm src
5555

5656
For all possible commands, run `tsm --help`.
5757

58-
The only required argument is the directoy where all SCSS files are located. Running `tsm src` will search for all files matching `src/**/*.scss`. This can be overridden by providing a [glob](https://github.com/isaacs/node-glob#glob-primer) pattern instead of a directory. For example, `tsm src/*.scss`
58+
The only required argument is the directory where all SCSS files are located. Running `tsm src` will search for all files matching `src/**/*.scss`. This can be overridden by providing a [glob](https://github.com/isaacs/node-glob#glob-primer) pattern instead of a directory. For example, `tsm src/*.scss`
5959

6060
### `--watch` (`-w`)
6161

@@ -180,10 +180,10 @@ Given the following SCSS:
180180
The following type definitions will be generated:
181181

182182
```typescript
183-
export interface Styles {
183+
export type Styles = {
184184
text: string;
185185
textHighlighted: string;
186-
}
186+
};
187187

188188
export type ClassNames = keyof Styles;
189189

@@ -217,9 +217,9 @@ Customize the interface name exported in the generated file when `--exportType`
217217
Only default exports are affected by this command. This example will change the export interface line to:
218218

219219
```typescript
220-
export interface IStyles {
220+
export type IStyles = {
221221
// ...
222-
}
222+
};
223223
```
224224

225225
### `--quoteType` (`-q`)

examples/default-export/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This example contains:
44

5-
- Class names that are expected to be kebab (param) cased. Since variables cannot contain a `-` this can be achieved using an interface with default export.
5+
- Class names that are expected to be kebab (param) cased. Since variables cannot contain a `-` this can be achieved using a type with default export.
66
- Class names that are TypeScript keywords (eg: `while`) that cannot be used as named constants.
77

88
The command to generate the proper type files would look like this (_in the root of this repository_):

examples/default-export/feature-a/style.scss.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
export interface Styles {
1+
export type Styles = {
22
i: string;
33
"i-am-kebab-cased": string;
44
while: string;
5-
}
5+
};
66

77
export type ClassNames = keyof Styles;
88

lib/cli.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ const { _: patterns, ...rest } = yargs
2020
.usage(
2121
"Generate .scss.d.ts from CSS module .scss files.\nUsage: $0 <glob pattern> [options]"
2222
)
23-
.example("$0 src", "All .scss files at any level in the src directoy")
23+
.example("$0 src", "All .scss files at any level in the src directory")
2424
.example(
2525
"$0 src/**/*.scss",
26-
"All .scss files at any level in the src directoy"
26+
"All .scss files at any level in the src directory"
2727
)
2828
.example(
2929
"$0 src/**/*.scss --watch",
30-
"Watch all .scss files at any level in the src directoy that are added or changed"
30+
"Watch all .scss files at any level in the src directory that are added or changed"
3131
)
3232
.example(
3333
"$0 src/**/*.scss --includePaths src/core src/variables",

lib/core/list-different.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const listDifferent = async (
1313
pattern: string,
1414
options: MainOptions
1515
): Promise<void> => {
16-
// Find all the files that match the provied pattern.
16+
// Find all the files that match the provided pattern.
1717
const files = glob.sync(pattern);
1818

1919
if (!files || !files.length) {

lib/typescript/class-names-to-type-definition.ts

+4-10
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,7 @@ export const quoteTypeDefault: QuoteType = "single";
2525
const classNameToNamedTypeDefinition = (className: ClassName) =>
2626
`export const ${className}: string;`;
2727

28-
const classNameToInterfaceKey = (
29-
className: ClassName,
30-
quoteType: QuoteType
31-
) => {
28+
const classNameToType = (className: ClassName, quoteType: QuoteType) => {
3229
const quote = quoteType === "single" ? "'" : '"';
3330
return ` ${quote}${className}${quote}: string;`;
3431
};
@@ -66,13 +63,10 @@ export const classNamesToTypeDefinitions = (
6663

6764
switch (options.exportType) {
6865
case "default":
69-
typeDefinitions = `export interface ${Styles} {\n`;
66+
typeDefinitions = `export type ${Styles} = {\n`;
7067
typeDefinitions += options.classNames
7168
.map(className =>
72-
classNameToInterfaceKey(
73-
className,
74-
options.quoteType || quoteTypeDefault
75-
)
69+
classNameToType(className, options.quoteType || quoteTypeDefault)
7670
)
7771
.join("\n");
7872
typeDefinitions += "\n}\n\n";
@@ -85,7 +79,7 @@ export const classNamesToTypeDefinitions = (
8579
.filter(isValidName)
8680
.map(classNameToNamedTypeDefinition);
8781

88-
// Sepearte all type definitions be a newline with a trailing newline.
82+
// Separate all type definitions be a newline with a trailing newline.
8983
return typeDefinitions.join("\n") + "\n";
9084
default:
9185
return null;

lib/typescript/get-type-definition-path.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Given a file path to a SCSS file, generate the corresponding type defintion
2+
* Given a file path to a SCSS file, generate the corresponding type definition
33
* file path.
44
*
55
* @param file the SCSS file path

0 commit comments

Comments
 (0)