From 37bb0bbb60de96d15997739d3ac42bbeaaf07d1b Mon Sep 17 00:00:00 2001 From: Rahul Gupta Date: Mon, 16 Aug 2021 18:31:09 +0530 Subject: [PATCH] fix: position of named export in injected css All named export are now placed at the end of the injected css code. This solves the issue of css sourcemap not being passed on to the generateBundle hook due to the css being replaced by invalid js. --- __tests__/__snapshots__/index.test.ts.snap | 20 +++++++++---------- __tests__/fixtures/modules/composed.css.d.ts | 7 +++++-- __tests__/fixtures/modules/style.css.d.ts | 7 +++++-- .../modules/subdir/composition2.css.d.ts | 7 +++++-- .../fixtures/named-exports/style.css.d.ts | 16 ++++++++++----- src/loaders/postcss/index.ts | 15 ++++++++------ 6 files changed, 45 insertions(+), 27 deletions(-) diff --git a/__tests__/__snapshots__/index.test.ts.snap b/__tests__/__snapshots__/index.test.ts.snap index c9ae925d..07bd5b81 100644 --- a/__tests__/__snapshots__/index.test.ts.snap +++ b/__tests__/__snapshots__/index.test.ts.snap @@ -756,8 +756,8 @@ var modules_efa96bb5 = {\\"partial\\":\\"first_partial\\",\\"first\\":\\"first_f var first = /*#__PURE__*/Object.freeze({ __proto__: null, - css: css$1, - 'default': modules_efa96bb5 + 'default': modules_efa96bb5, + css: css$1 }); var css = \\".second_second {\\\\n color: royalblue;\\\\n}\\"; @@ -765,8 +765,8 @@ var modules_7a038d99 = {\\"second\\":\\"second_second\\"}; var second = /*#__PURE__*/Object.freeze({ __proto__: null, - css: css, - 'default': modules_7a038d99 + 'default': modules_7a038d99, + css: css }); (async () => { @@ -896,8 +896,8 @@ var modules_efa96bb5 = {\\"partial\\":\\"first_partial\\",\\"first\\":\\"first_f var first = /*#__PURE__*/Object.freeze({ __proto__: null, - css: css$1, - 'default': modules_efa96bb5 + 'default': modules_efa96bb5, + css: css$1 }); var css = \\".second_second {\\\\n color: royalblue;\\\\n}\\"; @@ -905,8 +905,8 @@ var modules_7a038d99 = {\\"second\\":\\"second_second\\"}; var second = /*#__PURE__*/Object.freeze({ __proto__: null, - css: css, - 'default': modules_7a038d99 + 'default': modules_7a038d99, + css: css }); (async () => { @@ -2284,8 +2284,8 @@ export { css, css as default }; `; exports[`extract preserve-modules: js 3`] = ` -"import { css } from './foo.css.js'; -import { css as css$1 } from './bar.css.js'; +"import css from './foo.css.js'; +import css$1 from './bar.css.js'; console.log(css, css$1); " diff --git a/__tests__/fixtures/modules/composed.css.d.ts b/__tests__/fixtures/modules/composed.css.d.ts index 47834ed4..21fb5b69 100644 --- a/__tests__/fixtures/modules/composed.css.d.ts +++ b/__tests__/fixtures/modules/composed.css.d.ts @@ -1,5 +1,8 @@ -export var css: string; +var css: string; interface ModulesExports {"primary":"#BF4040","composition":"composed_composition composition2_compositioned"} interface ModulesExports {inject:()=>void} declare const modules_2a102cc5: ModulesExports; -export default modules_2a102cc5; \ No newline at end of file +export default modules_2a102cc5; +export { + css +}; \ No newline at end of file diff --git a/__tests__/fixtures/modules/style.css.d.ts b/__tests__/fixtures/modules/style.css.d.ts index 5fe510d9..c0cc4a74 100644 --- a/__tests__/fixtures/modules/style.css.d.ts +++ b/__tests__/fixtures/modules/style.css.d.ts @@ -1,5 +1,8 @@ -export var css: string; +var css: string; interface ModulesExports {"primary":"#BF4040","secondary":"#1F4F7F","module":"style_module","module2":"style_module2 composed_composition composition2_compositioned"} interface ModulesExports {inject:()=>void} declare const modules_5a199c00: ModulesExports; -export default modules_5a199c00; \ No newline at end of file +export default modules_5a199c00; +export { + css +}; \ No newline at end of file diff --git a/__tests__/fixtures/modules/subdir/composition2.css.d.ts b/__tests__/fixtures/modules/subdir/composition2.css.d.ts index eceee9f2..b97bd5b0 100644 --- a/__tests__/fixtures/modules/subdir/composition2.css.d.ts +++ b/__tests__/fixtures/modules/subdir/composition2.css.d.ts @@ -1,5 +1,8 @@ -export var css: string; +var css: string; interface ModulesExports {"compositioned":"composition2_compositioned"} interface ModulesExports {inject:()=>void} declare const modules_354770d7: ModulesExports; -export default modules_354770d7; \ No newline at end of file +export default modules_354770d7; +export { + css +}; \ No newline at end of file diff --git a/__tests__/fixtures/named-exports/style.css.d.ts b/__tests__/fixtures/named-exports/style.css.d.ts index 15e7a98a..4cef4eaa 100644 --- a/__tests__/fixtures/named-exports/style.css.d.ts +++ b/__tests__/fixtures/named-exports/style.css.d.ts @@ -1,7 +1,13 @@ -export var css: string; -export var valid: "style_valid"; -export var _new: "style_new"; -export var _css: "style_css"; +var css: string; +var valid: "style_valid"; +var _new: "style_new"; +var _css: "style_css"; interface ModulesExports {"valid":"style_valid","new":"style_new","css":"style_css"} declare const modules_5a199c00: ModulesExports; -export default modules_5a199c00; \ No newline at end of file +export default modules_5a199c00; +export { + css, + valid, + _new, + _css +}; \ No newline at end of file diff --git a/src/loaders/postcss/index.ts b/src/loaders/postcss/index.ts index 746d0f07..9c4fa1c2 100644 --- a/src/loaders/postcss/index.ts +++ b/src/loaders/postcss/index.ts @@ -132,8 +132,9 @@ const loader: Loader = { const saferId = (id: string): string => safeId(id, path.basename(this.id)); const modulesVarName = saferId("modules"); - const output = [`export var ${cssVarName} = ${JSON.stringify(res.css)};`]; - const dts = [`export var ${cssVarName}: string;`]; + const output = [`var ${cssVarName} = ${JSON.stringify(res.css)};`]; + const dts = [`var ${cssVarName}: string;`]; + const outputExports = [cssVarName]; if (options.namedExports) { const getClassName = @@ -146,8 +147,9 @@ const loader: Loader = { this.warn(`Exported \`${name}\` as \`${newName}\` in ${humanlizePath(this.id)}`); const fmt = JSON.stringify(modulesExports[name]); - output.push(`export var ${newName} = ${fmt};`); - if (options.dts) dts.push(`export var ${newName}: ${fmt};`); + output.push(`var ${newName} = ${fmt};`); + if (options.dts) dts.push(`var ${newName}: ${fmt};`); + outputExports.push(newName); } } @@ -203,7 +205,8 @@ const loader: Loader = { if (!options.inject) output.push(`var ${modulesVarName} = ${JSON.stringify(modulesExports)};`); const defaultExport = `export default ${supportModules ? modulesVarName : cssVarName};`; - output.push(defaultExport); + const namedExport = `export {\n ${outputExports.filter(Boolean).join(",\n ")}\n};`; + output.push(defaultExport, namedExport); if (options.dts && (await fs.pathExists(this.id))) { if (supportModules) @@ -217,7 +220,7 @@ const loader: Loader = { `declare const ${modulesVarName}: ModulesExports;`, ); - dts.push(defaultExport); + dts.push(defaultExport, namedExport); await fs.writeFile(`${this.id}.d.ts`, dts.filter(Boolean).join("\n")); }