Skip to content
This repository has been archived by the owner on May 15, 2024. It is now read-only.

fix(one-app-dev-bundler): avoid default export of sass #543

Merged
merged 2 commits into from
Jun 12, 2023
Merged

fix(one-app-dev-bundler): avoid default export of sass #543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83db87d
fix(one-app-dev-bundler): avoid default export of sass
PixnBits Jun 12, 2023
0c8f536
Merge branch 'main' into fix/sass-default-export-removal
PixnBits Jun 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 22 additions & 13 deletions packages/one-app-dev-bundler/__tests__/esbuild/plugins/styles-loader.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

import glob from 'glob-all';
import sass from 'sass';
import { compile as sassCompile } from 'sass';
import stylesLoader from '../../../esbuild/plugins/styles-loader';
import { runSetupAndGetLifeHooks, runOnLoadHook } from './__plugin-testing-utils__';
import {
Expand All @@ -29,7 +29,16 @@ jest.mock('glob-all');

jest.mock('cssnano');

jest.spyOn(sass, 'compile');
// sass has different loaders for CJS and ESM, the latter does not have a "default" export
// making `import sass from 'sass';` throw an error
// Jest is still working on ESM mocking https://jestjs.io/docs/ecmascript-modules#module-mocking-in-esm
// so there is a divergance from this test setup and sass versions: update this setup once the jest
// API is stable
jest.mock('sass', () => {
const sass = jest.requireActual('sass');
jest.spyOn(sass, 'compile');
return sass;
});

const mockNodeEnv = (env) => {
let oldEnv;
Expand Down Expand Up @@ -93,8 +102,8 @@ describe('Esbuild plugin stylesLoader', () => {
{ mockFileName, mockFileContent }
);

expect(sass.compile).toHaveBeenCalledTimes(1);
expect(sass.compile).toHaveBeenCalledWith(`mock/path/to/file/${mockFileName}`, { loadPaths: ['./node_modules'] });
expect(sassCompile).toHaveBeenCalledTimes(1);
expect(sassCompile).toHaveBeenCalledWith(`mock/path/to/file/${mockFileName}`, { loadPaths: ['./node_modules'] });

expect(loader).toEqual('js');
expect(contents).toMatchInlineSnapshot(`
Expand Down Expand Up @@ -140,7 +149,7 @@ body > p {
{ mockFileName, mockFileContent }
);

expect(sass.compile).toHaveBeenCalledTimes(0);
expect(sassCompile).toHaveBeenCalledTimes(0);
expect(loader).toEqual('js');
expect(contents).toMatchInlineSnapshot(`
"const digest = '83279c4025e8b1107c3f376acaaac5656a3b68d0066ab70f2ceeb3c065a5751f';
Expand Down Expand Up @@ -186,8 +195,8 @@ body > p {
{ mockFileName, mockFileContent }
);

expect(sass.compile).toHaveBeenCalledTimes(1);
expect(sass.compile).toHaveBeenCalledWith(`mock/path/to/file/${mockFileName}`, { loadPaths: ['./node_modules'] });
expect(sassCompile).toHaveBeenCalledTimes(1);
expect(sassCompile).toHaveBeenCalledWith(`mock/path/to/file/${mockFileName}`, { loadPaths: ['./node_modules'] });

expect(loader).toEqual('js');
expect(contents).toMatchInlineSnapshot(`
Expand Down Expand Up @@ -227,7 +236,7 @@ body > p {
{ mockFileName, mockFileContent }
);

expect(sass.compile).toHaveBeenCalledTimes(0);
expect(sassCompile).toHaveBeenCalledTimes(0);
expect(loader).toEqual('js');
expect(contents).toMatchInlineSnapshot(`
"const digest = '83279c4025e8b1107c3f376acaaac5656a3b68d0066ab70f2ceeb3c065a5751f';
Expand Down Expand Up @@ -294,7 +303,7 @@ export { css, digest };"
additionalMockedFiles
);

expect(sass.compile).toHaveBeenCalledTimes(0);
expect(sassCompile).toHaveBeenCalledTimes(0);
expect(loader).toEqual('js');
expect(contents).toMatchInlineSnapshot(`
"const digest = '786f696ae19422021e0f17df7c6dd6eb43f92c9c101f7d0649b341165dda1b31';
Expand Down Expand Up @@ -366,7 +375,7 @@ export { css, digest };"
additionalMockedFiles
);

expect(sass.compile).toHaveBeenCalledTimes(0);
expect(sassCompile).toHaveBeenCalledTimes(0);
expect(loader).toEqual('js');
expect(contents).toMatchInlineSnapshot(`
"const digest = '786f696ae19422021e0f17df7c6dd6eb43f92c9c101f7d0649b341165dda1b31';
Expand Down Expand Up @@ -418,8 +427,8 @@ export { css, digest };"
{ mockFileName, mockFileContent }
);

expect(sass.compile).toHaveBeenCalledTimes(1);
expect(sass.compile).toHaveBeenCalledWith(`mock/path/to/file/${mockFileName}`, { loadPaths: ['./node_modules'] });
expect(sassCompile).toHaveBeenCalledTimes(1);
expect(sassCompile).toHaveBeenCalledWith(`mock/path/to/file/${mockFileName}`, { loadPaths: ['./node_modules'] });

expect(loader).toEqual('js');
expect(contents).toMatchInlineSnapshot(`
Expand Down Expand Up @@ -469,7 +478,7 @@ body > p {
{ mockFileName, mockFileContent }
);

expect(sass.compile).toHaveBeenCalledTimes(0);
expect(sassCompile).toHaveBeenCalledTimes(0);
expect(loader).toEqual('js');
expect(contents).toMatchInlineSnapshot(`
"const digest = '83279c4025e8b1107c3f376acaaac5656a3b68d0066ab70f2ceeb3c065a5751f';
Expand Down
4 changes: 2 additions & 2 deletions packages/one-app-dev-bundler/esbuild/plugins/styles-loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* permissions and limitations under the License.
*/

import sass from 'sass';
import { compile as sassCompile } from 'sass';
import postcss from 'postcss';
import cssModules from 'postcss-modules';
import crypto from 'crypto';
Expand All @@ -40,7 +40,7 @@ const stylesLoader = (cssModulesOptions = {}, { bundleType } = {}) => ({
// Compile scss to css
let cssContent;
if (args.path.endsWith('scss')) {
cssContent = sass.compile(args.path, { loadPaths: ['./node_modules'] }).css.toString();
cssContent = sassCompile(args.path, { loadPaths: ['./node_modules'] }).css.toString();
} else {
cssContent = await fs.promises.readFile(args.path, 'utf8');
}
Expand Down