From 0d1e2016ca8086e32d346face45e78ff2c8e49dc Mon Sep 17 00:00:00 2001 From: jsDotCr Date: Fri, 5 Apr 2019 11:24:04 +0300 Subject: [PATCH 1/3] Add export default option --- README.md | 28 ++++++++++++++++++++++++++++ src/cli.js | 4 +++- src/dtsCreator.js | 10 +++++++--- test/dtsCreator.spec.js | 19 +++++++++++++++++++ test/testStyleExportDefault.css | 2 ++ 5 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 test/testStyleExportDefault.css diff --git a/README.md b/README.md index 9d0e176..2389cf8 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,33 @@ export const SomeComponent: string; See also [webpack css-loader's camelCase option](https://github.com/webpack/css-loader#camelcase). +#### Use `export default` syntax +With `-x` or `--exportDefault`, this tool will use the [export default declaration syntax](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#11342-export-default-declarations) rather than the default [export assignment syntax](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#1135-export-assignments). + +If you have the following css, + +```css +/* stylesWithExportDefault.css */ + +@value primary: red; + +.myClass { + color: primary; +} +``` + +typed-css-modules creates the following .d.ts files from the above css: + +```ts +/* stylesWithExportDefault.css.d.ts */ +declare const styles: { + readonly "primary": string; + readonly "myClass": string; +}; +export default styles; +``` + + ## API ```sh @@ -133,6 +160,7 @@ You can set the following options: * `option.outDir`: Output directory(default: `option.searchDir`). * `option.camelCase`: Camelize CSS class tokens. * `option.EOL`: EOL (end of line) for the generated `d.ts` files. Possible values `'\n'` or `'\r\n'`(default: `os.EOL`). +* `option.exportDefault`: Uses `export default styles` syntax fir the generated `d.ts` files. #### `create(filepath, contents) => Promise(dtsContent)` Returns `DtsContent` instance. diff --git a/src/cli.js b/src/cli.js index c95ced7..06b8bc2 100755 --- a/src/cli.js +++ b/src/cli.js @@ -19,6 +19,7 @@ let yarg = yargs.usage('Create .css.d.ts from CSS modules *.css files.\nUsage: $ .alias('w', 'watch').describe('w', 'Watch input directory\'s css files or pattern').boolean('w') .alias('d', 'dropExtension').describe('d', 'Drop the input files extension').boolean('d') .alias('s', 'silent').describe('s', 'Silent output. Do not show "files written" or warning messages').boolean('s') + .alias('x', 'exportDefault').describe('x', 'Use "export default" syntax for .d.ts files').boolean('x') .alias('h', 'help').help('h') .version(() => require('../package.json').version) let argv = yarg.argv; @@ -62,7 +63,8 @@ let main = () => { searchDir, outDir: argv.o, camelCase: argv.c, - dropExtension: argv.d + dropExtension: argv.d, + defaultExport: argv.x }); if(!argv.w) { diff --git a/src/dtsCreator.js b/src/dtsCreator.js index 2914a5f..b6f538c 100644 --- a/src/dtsCreator.js +++ b/src/dtsCreator.js @@ -25,7 +25,8 @@ class DtsContent { rInputPath, rawTokenList, resultList, - EOL + EOL, + exportDefault }) { this.dropExtension = dropExtension; this.rootDir = rootDir; @@ -35,6 +36,7 @@ class DtsContent { this.rawTokenList = rawTokenList; this.resultList = resultList; this.EOL = EOL; + this.exportDefault = exportDefault; } get contents() { @@ -47,7 +49,7 @@ class DtsContent { 'declare const styles: {', ...this.resultList.map(line => ' ' + line), '};', - 'export = styles;', + this.exportDefault ? 'export default styles;' : 'export = styles;', '' ].join(os.EOL) + this.EOL; } @@ -94,6 +96,7 @@ export class DtsCreator { this.camelCase = options.camelCase; this.dropExtension = !!options.dropExtension; this.EOL = options.EOL || os.EOL; + this.exportDefault = !!options.exportDefault; } create(filePath, initialContents, clearCache = false) { @@ -126,7 +129,8 @@ export class DtsCreator { rInputPath, rawTokenList: keys, resultList: result, - EOL: this.EOL + EOL: this.EOL, + exportDefault: this.exportDefault }); resolve(content); diff --git a/test/dtsCreator.spec.js b/test/dtsCreator.spec.js index 51b812c..309a1a6 100644 --- a/test/dtsCreator.spec.js +++ b/test/dtsCreator.spec.js @@ -121,6 +121,25 @@ export = styles; }); }); + describe('#exportDefault option', () => { + it('returns formatted .d.ts string', done => { + new DtsCreator({ exportDefault: true }).create('test/testStyleExportDefault.css').then(content => { + assert.equal( + content.formatted, + `\ +declare const styles: { + readonly "myClass": string; + readonly "anotherClass": string; +}; +export default styles; + +` + ); + done(); + }); + }); + }) + describe('#camelCase option', () => { it('camelCase == true: returns camelized tokens for lowercase classes', done => { new DtsCreator({ camelCase: true }) diff --git a/test/testStyleExportDefault.css b/test/testStyleExportDefault.css new file mode 100644 index 0000000..bba1d80 --- /dev/null +++ b/test/testStyleExportDefault.css @@ -0,0 +1,2 @@ +.myClass {color: red;} +.anotherClass {color: pink;} From 8918f7a3b5d71cba1a195465f28eac476163fc49 Mon Sep 17 00:00:00 2001 From: jsDotCr Date: Fri, 5 Apr 2019 12:35:26 +0300 Subject: [PATCH 2/3] fix typo --- src/cli.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cli.js b/src/cli.js index 06b8bc2..af7d40d 100755 --- a/src/cli.js +++ b/src/cli.js @@ -64,7 +64,7 @@ let main = () => { outDir: argv.o, camelCase: argv.c, dropExtension: argv.d, - defaultExport: argv.x + exportDefault: argv.x }); if(!argv.w) { From 13124b9529eb2b5624c3944663133cd3ffaa9f3c Mon Sep 17 00:00:00 2001 From: jsDotCr Date: Fri, 5 Apr 2019 13:14:02 +0300 Subject: [PATCH 3/3] local --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1cca970..4e8bc0f 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "test": "jest", "test:watch": "jest --watch", "test:ci": "jest --coverage", - "prepublish": "npm run build" + "prepare": "npm run build" }, "bin": { "tcm": "lib/cli.js"