From 969041cadb3da2f9835af49c5b1dabe10d232acc Mon Sep 17 00:00:00 2001 From: Artyom Trityak Date: Tue, 29 Oct 2019 15:52:11 -0400 Subject: [PATCH 1/3] Adding prefix option --- index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 27d0de3..57f9c8e 100644 --- a/index.js +++ b/index.js @@ -6,7 +6,7 @@ const LineDiff = require('line-diff'); const bannerMessage = '// This file is automatically generated.\n// Please do not change this file!'; -const cssModuleExport = 'declare const cssExports: CssExports;\nexport = cssExports;\n'; +const cssModuleExport = (prefix) => `declare const cssExports: ${prefix}CssExports;\nexport = cssExports;\n`; const getNoDeclarationFileError = ({ filename }) => new Error( @@ -21,13 +21,13 @@ const getTypeMismatchError = ({ filename, expected, actual }) => { ); }; -const cssModuleToInterface = (cssModuleKeys) => { +const cssModuleToInterface = (cssModuleKeys, prefix) => { const interfaceFields = cssModuleKeys .sort() .map(key => ` '${key}': string;`) .join('\n'); - return `interface CssExports {\n${interfaceFields}\n}`; + return `interface ${prefix}CssExports {\n${interfaceFields}\n}`; }; const filenameToTypingsFilename = filename => { @@ -68,7 +68,7 @@ module.exports = function(content, ...rest) { const { failed, success } = makeDoneHandlers(this.async(), content, rest); const filename = this.resourcePath; - const { mode = 'emit' } = loaderUtils.getOptions(this) || {}; + const { mode = 'emit', prefix = '' } = loaderUtils.getOptions(this) || {}; if (!validModes.includes(mode)) { return failed(new Error(`Invalid mode option: ${mode}`)); } @@ -88,7 +88,7 @@ module.exports = function(content, ...rest) { } } - const cssModuleDefinition = `${bannerMessage}\n${cssModuleToInterface(cssModuleKeys)}\n${cssModuleExport}`; + const cssModuleDefinition = `${bannerMessage}\n${cssModuleToInterface(cssModuleKeys, prefix)}\n${cssModuleExport(prefix)}`; if (mode === 'verify') { read((err, fileContents) => { From 9564f06089a30b3c40ad89d6d33022c8ad9d1d97 Mon Sep 17 00:00:00 2001 From: Artyom Trityak Date: Tue, 29 Oct 2019 15:55:24 -0400 Subject: [PATCH 2/3] Prefix docs --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index 36fc6c5..b2f70cb 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,23 @@ Instead of emitting new TypeScript declarations, this will throw an error if a g This workflow is similar to using the [Prettier](https://github.com/prettier/prettier) [`--list-different` option](https://prettier.io/docs/en/cli.html#list-different). +### Prefix + +It is possible to customize generated interface name with prefix. + +For example: + +```js +{ + loader: 'css-modules-typescript-loader', + options: { + prefix: 'I' + } +} +``` + +will generate `ICssModules` interface name. + ## With Thanks This package borrows heavily from [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader). From da8a1b4591bdd8e17a30430895ca60dd497dc7d8 Mon Sep 17 00:00:00 2001 From: Artyom Trityak Date: Tue, 29 Oct 2019 16:14:43 -0400 Subject: [PATCH 3/3] chore: [tests] Add tests --- .../verify-prefix-declaration.test.js.snap | 16 ++++++++++++++++ test/verify-prefix-declaration/index.css | 16 ++++++++++++++++ test/verify-prefix-declaration/index.css.d.ts | 11 +++++++++++ test/verify-prefix-declaration/index.js | 1 + .../verify-prefix-declaration.test.js | 17 +++++++++++++++++ 5 files changed, 61 insertions(+) create mode 100644 test/verify-prefix-declaration/__snapshots__/verify-prefix-declaration.test.js.snap create mode 100644 test/verify-prefix-declaration/index.css create mode 100644 test/verify-prefix-declaration/index.css.d.ts create mode 100644 test/verify-prefix-declaration/index.js create mode 100644 test/verify-prefix-declaration/verify-prefix-declaration.test.js diff --git a/test/verify-prefix-declaration/__snapshots__/verify-prefix-declaration.test.js.snap b/test/verify-prefix-declaration/__snapshots__/verify-prefix-declaration.test.js.snap new file mode 100644 index 0000000..d2fea28 --- /dev/null +++ b/test/verify-prefix-declaration/__snapshots__/verify-prefix-declaration.test.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Should have prefixed interface name 1`] = ` +"// This file is automatically generated. +// Please do not change this file! +interface ICssExports { + 'hyphened-classname': string; + 'otherClass': string; + 'someClass': string; + 'underscored_classname': string; + 'validClass': string; +} +declare const cssExports: ICssExports; +export = cssExports; +" +`; diff --git a/test/verify-prefix-declaration/index.css b/test/verify-prefix-declaration/index.css new file mode 100644 index 0000000..a7d4cdf --- /dev/null +++ b/test/verify-prefix-declaration/index.css @@ -0,0 +1,16 @@ +.validClass { + position: relative; +} + +.someClass { + position: relative; +} + +.otherClass { + display: block; +} + +.hyphened-classname, +.underscored_classname { + color: papayawhip; +} diff --git a/test/verify-prefix-declaration/index.css.d.ts b/test/verify-prefix-declaration/index.css.d.ts new file mode 100644 index 0000000..b47bbaa --- /dev/null +++ b/test/verify-prefix-declaration/index.css.d.ts @@ -0,0 +1,11 @@ +// This file is automatically generated. +// Please do not change this file! +interface ICssExports { + 'hyphened-classname': string; + 'otherClass': string; + 'someClass': string; + 'underscored_classname': string; + 'validClass': string; +} +declare const cssExports: ICssExports; +export = cssExports; diff --git a/test/verify-prefix-declaration/index.js b/test/verify-prefix-declaration/index.js new file mode 100644 index 0000000..14a65bf --- /dev/null +++ b/test/verify-prefix-declaration/index.js @@ -0,0 +1 @@ +import styles from './index.css'; diff --git a/test/verify-prefix-declaration/verify-prefix-declaration.test.js b/test/verify-prefix-declaration/verify-prefix-declaration.test.js new file mode 100644 index 0000000..37b0eee --- /dev/null +++ b/test/verify-prefix-declaration/verify-prefix-declaration.test.js @@ -0,0 +1,17 @@ +const fs = require('fs'); +const compiler = require('../compiler.js'); + +test('Should have prefixed interface name', async () => { + expect.assertions(1); + + await compiler(require.resolve('./index.js'), { + prefix: 'I' + }); + + const declaration = fs.readFileSync( + require.resolve('./index.css.d.ts'), + 'utf-8' + ); + + expect(declaration).toMatchSnapshot(); +});