From d737c5d691c65140d8cf1170ca2f5e7e1256cebd Mon Sep 17 00:00:00 2001 From: Marco Pasqualetti Date: Tue, 10 Dec 2024 19:22:52 +0100 Subject: [PATCH] test: add unit tests for css modules --- src/insertStyle.ts | 4 +- src/types.ts | 2 +- test/index.test.ts | 178 ++++++++++++++++++------- test/snapshots/test/index.test.ts.md | 18 +++ test/snapshots/test/index.test.ts.snap | Bin 1056 -> 1133 bytes 5 files changed, 152 insertions(+), 50 deletions(-) diff --git a/src/insertStyle.ts b/src/insertStyle.ts index 1814aa0..d8edf9d 100644 --- a/src/insertStyle.ts +++ b/src/insertStyle.ts @@ -10,9 +10,7 @@ export default function insertStyle( css: string | undefined, ): string | undefined { - if (!css || typeof window === 'undefined') { - return; - } + if (!css || typeof window === 'undefined') return; const style = document.createElement('style'); style.setAttribute('type', 'text/css'); diff --git a/src/types.ts b/src/types.ts index 2acba2e..cbc3f49 100644 --- a/src/types.ts +++ b/src/types.ts @@ -19,7 +19,7 @@ export type RollupPluginSassProcessorFnOutput = css: string; /** If provided, the default export of the CSS file will be the map returned here */ - cssModules?: Record, + cssModules?: Record; // User processor might add additional exports [key: string]: unknown; diff --git a/test/index.test.ts b/test/index.test.ts index 146bcaa..b7afc8e 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -20,6 +20,7 @@ import sass from '../src/index'; import type { RollupPluginSassOutputFn, RollupPluginSassOptions, + RollupPluginSassProcessorFn, } from '../src/types'; type ApiValue = Extract; @@ -260,7 +261,7 @@ const createApiOptionTestCaseTitle: TitleFn<[RollupPluginSassOptions]> = ( }, }); } -// #endregion +// #endregion basic tests // #region insert option { @@ -397,7 +398,7 @@ const createApiOptionTestCaseTitle: TitleFn<[RollupPluginSassOptions]> = ( test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_LEGACY); test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_MODERN); } -// #endregion +// #endregion insert option // #region output option { @@ -425,7 +426,6 @@ const createApiOptionTestCaseTitle: TitleFn<[RollupPluginSassOptions]> = ( * Right now we can't use snapshot testing on this tests because sometimes rollup mess with the order of imports. * Detailed information can be found here: https://github.com/elycruz/rollup-plugin-sass/pull/143#issuecomment-2227274405 */ - { const title = 'should support output as function'; @@ -713,47 +713,133 @@ const createApiOptionTestCaseTitle: TitleFn<[RollupPluginSassOptions]> = ( test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_MODERN); } -// { -// const title = -// 'should produces CSS modules if `cssModules` is returned from processor'; - -// const macro = test.macro<[RollupPluginSassOptions]>({ -// async exec(t, pluginOptions) { -// const outputBundle = await rollup({ -// input: 'test/fixtures/css-modules/index.js', -// plugins: [ -// sass({ -// ...pluginOptions, -// processor: async (styles, id) => { -// let cssModules = {}; -// const postcssProcessResult = await postcss([ -// postcssModules({ -// getJSON: (_, json) => { -// if (json) cssModules = json; -// }, -// }), -// ]).process(styles, { -// from: id, -// }); - -// return { css: postcssProcessResult.css, cssModules }; -// }, -// }), -// ], -// }); - -// const { output } = await outputBundle.generate(TEST_GENERATE_OPTIONS); -// const result = getFirstChunkCode(output); - -// t.snapshot(result); -// }, -// title: createApiOptionTestCaseTitle, -// }); - -// test.only(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_LEGACY); -// test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_MODERN); -// } -// #endregion +{ + const postcssModulesProcessor: RollupPluginSassProcessorFn = async ( + styles, + id, + ) => { + let cssModules = {}; + const postcssProcessResult = await postcss([ + postcssModules({ + getJSON: (_, json) => { + if (json) cssModules = json; + }, + }), + ]).process(styles, { + from: id, + }); + + return { css: postcssProcessResult.css, cssModules }; + }; + + { + const title = + 'should produces CSS modules if `cssModules` is returned from processor'; + + const macro = test.macro<[RollupPluginSassOptions]>({ + async exec(t, pluginOptions) { + const outputBundle = await rollup({ + input: 'test/fixtures/css-modules/index.js', + plugins: [ + sass({ + ...pluginOptions, + processor: postcssModulesProcessor, + }), + ], + }); + + const { output } = await outputBundle.generate(TEST_GENERATE_OPTIONS); + const result = getFirstChunkCode(output); + + t.snapshot(result); + }, + title: createApiOptionTestCaseTitle, + }); + + test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_LEGACY); + test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_MODERN); + } + + // { + // const title = + // 'should produces CSS modules alongside `insertStyle` if `cssModules` is returned from processor'; + + // const macro = test.macro<[RollupPluginSassOptions]>({ + // async exec(t, pluginOptions) { + // const outputBundle = await rollup({ + // input: 'test/fixtures/css-modules/index.js', + // plugins: [ + // sass({ + // ...pluginOptions, + // insert: true, + // processor: postcssModulesProcessor, + // }), + // ], + // }); + + // const { output } = await outputBundle.generate(TEST_GENERATE_OPTIONS); + + // t.is( + // output.length, + // 1, + // 'has 1 chunk (we are bundling all in one single file)', + // ); + + // const [{ moduleIds, modules }] = output; + + // t.is( + // moduleIds.filter((it) => it.endsWith('insertStyle')).length, + // 1, + // 'include insertStyle one time', + // ); + + // const actualAModuleID = moduleIds.find((it) => + // it.endsWith('actual_a.scss'), + // ) as string; + // const actualAModule = modules[actualAModuleID]; + // t.truthy(actualAModule); + // t.snapshot( + // actualAModule.code, + // 'actual_a content is compiled with insertStyle', + // ); + // }, + // title: createApiOptionTestCaseTitle, + // }); + + // test.only(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_LEGACY); + // test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_MODERN); + // } + + { + const title = 'should throw error when CSS modules is not an object'; + + const macro = test.macro<[RollupPluginSassOptions]>({ + async exec(t, pluginOptions) { + const message = + 'You need to provide a js object as `cssModules` property. See https://github.com/elycruz/rollup-plugin-sass#processor'; + + await t.throwsAsync( + rollup({ + input: 'test/fixtures/css-modules/index.js', + plugins: [ + sass({ + ...pluginOptions, + // @ts-expect-error testing error + processor: () => ({ css: 'body {}', cssModules: 'asd' }), + }), + ], + }), + { message }, + ); + }, + title: createApiOptionTestCaseTitle, + }); + + test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_LEGACY); + test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_MODERN); + } +} +// #endregion processor option // #region node resolution { @@ -833,7 +919,7 @@ const createApiOptionTestCaseTitle: TitleFn<[RollupPluginSassOptions]> = ( test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_LEGACY); test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_MODERN); } -// #endregion +// #endregion node resolution { const title = 'should support options.runtime'; @@ -960,7 +1046,7 @@ const createApiOptionTestCaseTitle: TitleFn<[RollupPluginSassOptions]> = ( test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_LEGACY); test(title, macro, TEST_PLUGIN_OPTIONS_DEFAULT_MODERN); } -// #endregion +// #endregion sourcemap { const title = 'module stylesheets graph should be added to watch list'; diff --git a/test/snapshots/test/index.test.ts.md b/test/snapshots/test/index.test.ts.md index f294f4f..b943d4b 100644 --- a/test/snapshots/test/index.test.ts.md +++ b/test/snapshots/test/index.test.ts.md @@ -250,6 +250,24 @@ Generated by [AVA](https://avajs.dev). export { color, color2, withIcssExports as default };␊ ` +## should produces CSS modules if `cssModules` is returned from processor using 'api' = 'legacy' (implicit) + +> Snapshot 1 + + `var style = {"something":"_something_ngy8h_1"};␊ + ␊ + export { style as default };␊ + ` + +## should produces CSS modules if `cssModules` is returned from processor using 'api' = 'modern' + +> Snapshot 1 + + `var style = {"something":"_something_ngy8h_1"};␊ + ␊ + export { style as default };␊ + ` + ## should resolve ~ as node_modules using 'api' = 'legacy' (implicit) > Snapshot 1 diff --git a/test/snapshots/test/index.test.ts.snap b/test/snapshots/test/index.test.ts.snap index 18706b385fdd5ece54e8001aac1f2476e9872972..2fc71e8c93e8e9d04d8983f19b071ef50482786b 100644 GIT binary patch literal 1133 zcmV-z1d{tfRzVD>m0wa8k}>{IR~NIv%qK0;H61~Dcg%Wo z56JjNS09TA00000000B+nayq^MG(gm5Fq)+0f_?=g)iP^lOPrWi@lD3C_)Pafh@#= z0(QH*?CH%+_o%BUv1J(q9C!o7b@LENJOC0`-hf9z^WlkSXU4H-;{=7| z{_^8N-_`txetYE1CBl!42nNzcf)i;S5IA6gYeD-~ zY9&cApB!!J$Hzi2%O3vo?8XZl;os(S8!tZd_r@_Zz_<;V+hx#(dS8n%Ob!(Q*RD2A zFeqAwYFcmAYIC;zLffH1R0Y<&(7NviIBzVKz!9|1MV^SO-BMS=j4z zs??4%k7x6nxu`^*POH!O(a`8XiR~wOr1I0(iz9ezl?Y0+dg-!L@BvxvCB=ybPP93y z)U=;uB4~#ZkR7{NQj@99*ytR#%ZMyxyAEaTL>UEsWF4;tv=ch4Lhp-=#=W`xpDQ!9 zD^_}U1*N43*C+3T+3ctYP24k5Sq%;{0hSF{f%(&Etadx2_SJakPMFPGIjOf>=(0Y# zqwRD;<62o%79>SYEnO7xZeVVp#M2uYPp_4EO4>8$tG}GD1l2n$qRM6Sn)BI9`1nS1 zB+>>9+Q6u=^2nNyO@+?-OHo$#%T zD2QTAr3G>A*gSkq(o!tA9ctgNhWva~o$&e_@{0*(~z zQ9Uh!@Pb1QpvQ?0;>TXNrHgZi0tQBVb2+Ur-yUXmnxD-d@+NiC9$H7LVZB-JrVm{; z9N%-gZ`P;Fp8CFBPkg1b=%obpVG@)<((Wdk(7eJ68XJz<%gGsID(QScD~rX zk2@K$NnL$;v2~Senww(!9~IO4CD(~2P*!?)^K;MJs{y*^zw`VHcC5$%v>pHe0_-z5 literal 1056 zcmV+*1mF8XRzVZONj3milDnVehCyk&2Br`5u7%wd{7!6=J* z)@jY5eOUt<3nY+r;0*MABhc!8Y^lv9$GfX>3`y!Cv{@kA(1o_bA>)%a+>m~tB$w`H z5#gUXgilKmPLmidib`^+NzAMgSZWlZIwMYZ8gWXht$oqq?4)qG@dJxQ;6?}n$-!=~ z*Q9nvi+I+*Ux-Q+>2y5C4~Eu+T5LYgBa@#!ULL`Fbt0(D>PwfMfe*Bw4kX1*EftDnH?S~J>gnB_r?;y-rR`bp<*nu`MfE{VRE2C_a6Y>!pTHW9 zM8<+e7g`-v9yuGaY0#O!<<{F@3+wGnpxw4c89to|y87mH>#EQ+m&NoyDyB~=Zl-Lg ao%HeYpM&@70lMIS8T<=Zo?zbp8~^~FE(fvz