Add support for configuring Shared Sass Resources for using global mixins, variables, etc. #300
Conversation
…xins, variables, etc.
✅ Deploy Preview for jest-preview-library canceled.
|
✅ Deploy Preview for jest-preview-chinese canceled.
|
src/transform.ts
Outdated
| const buildOptions: BuildCssOptions = { prependUseShared: false}; | ||
|
|
||
| if (fs.existsSync(sharedSassResourcesPath)) { | ||
| buildOptions.prependUseShared = true; |
There was a problem hiding this comment.
@mikeb-meq I think we can move the logic to create sassPrefixedWithSharedResources to be here, the reasons should be:
- For consistency with
sassLoadPathsConfig. We might update thebuildCssResultarguments to `buildCssResult(sass: any, sassLoadPathsConfig: string[], sassPrefixedWithSharedResources: string, filename: string) - Can remove BuildCssOptions
src/transform.ts
Outdated
| return tildeImporter(url); | ||
| }, | ||
| if (options.prependUseShared && !sass.compileString) { | ||
| console.warn("WARNING: Config specifies sharedSassResources, but your version of Sass doesn't support it - consider updating to v1.45.0 or higher.") |
There was a problem hiding this comment.
Should add a semicolon to the end of this line
|
|
||
| ## sharedSassResources: string[] | ||
|
|
||
| Default: `undefined` |
There was a problem hiding this comment.
The default value should be [], just for consistency with sassLoadPaths, and no need to check that sharedSassResources is existed. Also, I think we can move this doc right below the sassLoadPaths doc, so we wrap all the sass configs in the same area.
|
@ntt261298 I apologize but I have been unable to spend extra time at my computer recently due to some health issues. Thank you for assistance with the CI problems. Let me know if I can clarify anything but would try to get to any further fixes when I can. |
Thanks, @mikeb-meq , just waiting for the final approval from @nvh95 then we can deploy a new version where we have this feature. Thanks for your contribution. I wish you good health. |
Summary/ Motivation (TLDR;)
jest-preview currently supports testing JS that imports SASS, but if the SASS files in the main project use variables, mixins, etc, defined in a shared file, the test will not recognize them. This is addressed on the application side with plugins like e.g. sass-resources-loader for webpack. This feature adds similar support to jest-preview.
Related issues
Features
sharedSassResourcesoption to the API forjestPreviewConfigure. This property takes an array of strings with paths to the SASS files that define shared resources (e.g. variables). The paths are relative to the root of the project being tested. The implementation usessass.compileStringto prepend a "use" statement to all imported SASS, referencing a concatenated copy of the shared resources from the jest-preview cache folder. If the project's version of SASS does not support this method, a warning will be logged and the SASS compilation step will fall back to supported methods.