Deprecate externalCss

cli/configCra.js

@@ -104,12 +104,12 @@ function injectToFileIfExisted(filePath, content) {
 
 try {
   const configToInject = `import { jestPreviewConfigure } from 'jest-preview'
+// TODO: To add your global css here
+import './index.css';
 
 jestPreviewConfigure({
   // Opt-in to automatic mode to preview failed test case.
   autoPreview: true,
-  // TODO: To add your global css here
-  externalCss: ['src/index.css'],
 })
 `;
   injectToFileIfExisted(

config/jest/setupTests.js → demo/setupTests.js

@@ -1,8 +1,9 @@
 import '@testing-library/jest-dom/extend-expect';
-import { jestPreviewConfigure } from '../../dist/index';
+import { jestPreviewConfigure } from '../dist/index';
+import './global.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['demo/global.css', 'demo/assets/_scss/global-style.scss'],
   publicFolder: 'demo/public',
   autoPreview: true,
   sassLoadPaths: ['demo/assets/_scss/loadPathsExample'],

examples/create-react-app/src/setupTests.ts

@@ -4,9 +4,10 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
 import { jestPreviewConfigure } from 'jest-preview';
+import './index.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   sassLoadPaths: ['src/assets/_scss/loadPathsExample'],
 });
 

examples/jest-24/jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
     '!src/mocks/**',
   ],
   coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./config/jest/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/src'],
   transform: {

examples/jest-24/config/jest/setupTests.js → examples/jest-24/src/setupTests.ts

@@ -1,9 +1,10 @@
 // @ts-check
 import '@testing-library/jest-dom/extend-expect';
 import { jestPreviewConfigure } from 'jest-preview';
+import './index.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   autoPreview: true,
 });
 

examples/jest-28/jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
     '!src/mocks/**',
   ],
   coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./config/jest/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/src'],
   transform: {

examples/jest-28/config/jest/setupTests.js → examples/jest-28/src/setupTests.ts

@@ -1,9 +1,10 @@
 // @ts-check
 import '@testing-library/jest-dom/extend-expect';
 import { jestPreviewConfigure } from 'jest-preview';
+import './index.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   autoPreview: true,
 });
 

examples/nextjs-babel/README.md

@@ -64,17 +64,12 @@ Configure Jest Preview inside `jest.setup.js` (or any setup files) specified in
 
 ```js
 import { jestPreviewConfigure } from 'jest-preview';
+import 'styles/globals.css';
+// SCSS is also supported
+import 'demo/globals.scss',
+// Any CSS from node_modules is fine
+import '@your-design-system/css/dist/index.min.css',
 
-jestPreviewConfigure({
-  // An array of relative paths from the root of your project
-  externalCss: [
-    'styles/globals.css',
-    // SCSS is also supported
-    // 'demo/globals.scss',
-    // Any CSS from node_modules is fine
-    // 'node_modules/@your-design-system/css/dist/index.min.css',
-  ],
-});
 ```
 
 ## Done

examples/nextjs-babel/jest.setup.js

@@ -1,8 +1,6 @@
 import { jestPreviewConfigure } from 'jest-preview';
+import './styles/globals.css';
 
 jestPreviewConfigure({
-  // An array of relative path from the root of your project
-  externalCss: [
-    'styles/globals.css',
-  ],
+  autoPreview: true,
 });

examples/nextjs/README.md

@@ -49,17 +49,12 @@ Configure Jest Preview inside `jest.setup.js` (or any setup files) specified in
 
 ```js
 import { jestPreviewConfigure } from 'jest-preview';
+import 'styles/globals.css';
+// SCSS is also supported
+import 'demo/globals.scss',
+// Any CSS from node_modules is fine
+import '@your-design-system/css/dist/index.min.css',
 
-jestPreviewConfigure({
-  // An array of relative paths from the root of your project
-  externalCss: [
-    'styles/globals.css',
-    // SCSS is also supported
-    // 'demo/globals.scss',
-    // Any CSS from node_modules is fine
-    // 'node_modules/@your-design-system/css/dist/index.min.css',
-  ],
-});
 ```
 
 ## Done

examples/nextjs/jest.setup.js

@@ -1,8 +1,6 @@
 import { jestPreviewConfigure } from 'jest-preview';
+import './styles/globals.css';
 
 jestPreviewConfigure({
-  // An array of relative path from the root of your project
-  externalCss: [
-    'styles/globals.css',
-  ],
+  autoPreview: true,
 });

examples/vite-react/jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
     '!src/mocks/**',
   ],
   coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./config/jest/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/src'],
   transform: {

examples/vite-react/config/jest/setupTests.js → examples/vite-react/src/setupTests.ts

@@ -1,9 +1,10 @@
 // @ts-check
 import '@testing-library/jest-dom/extend-expect';
 import { jestPreviewConfigure } from 'jest-preview';
+import './index.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   autoPreview: true,
   sassLoadPaths: ['src/assets/_scss/loadPathsExample'],
 });

jest.config.js

@@ -7,7 +7,7 @@ module.exports = {
     // TODO: To report coverage in `src`. They are compiled to `dist` so it's difficult to report coverage directly
   ],
   coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./config/jest/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/demo/setupTests.js'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/demo'],
   transform: {

src/configure.ts

@@ -1,12 +1,15 @@
 import path from 'path';
 import fs from 'fs';
 import { exec } from 'child_process';
-
+import chalk from 'chalk';
 import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG } from './constants';
 import { createCacheFolderIfNeeded } from './utils';
 import { debug } from './preview';
 
 interface JestPreviewConfigOptions {
+  /**
+   * @deprecated externalCss should not be used and will be removed in 0.4.0. Import the css files directly instead. Read more at www.jest-preview.com/blog/deprecate-externalCss
+   */
   externalCss?: string[];
   autoPreview?: boolean;
   publicFolder?: string;
@@ -15,12 +18,11 @@ interface JestPreviewConfigOptions {
 
 export async function jestPreviewConfigure(
   {
-    externalCss = [],
+    externalCss,
     autoPreview = false,
     publicFolder,
     sassLoadPaths,
   }: JestPreviewConfigOptions = {
-    externalCss: [],
     autoPreview: false,
     sassLoadPaths: [],
   },
@@ -53,6 +55,12 @@ export async function jestPreviewConfigure(
   externalCss?.forEach((cssFile) => {
     // Avoid name collision
     // Example: src/common/styles.css => cache-src___common___styles.css
+    console.log(
+      chalk.yellow(
+        'externalCss is deprecated. Please import css files directly in your setup file.',
+        'See the migration guide at www.jest-preview.com/blog/deprecate-externalCss',
+      ),
+    );
     const delimiter = '___';
     const destinationBasename = `cache-${cssFile.replace(/\//g, delimiter)}`;
     const destinationFile = path.join(CACHE_FOLDER, destinationBasename);

website/blog/2022-04-23-sass-support/index.md

@@ -12,20 +12,13 @@ Sass is one of the most popular CSS extension language in the ecosystem and is b
 
 ![Jest Preview supports Sass](./jest-preview-supports-sass.png)
 
-You can even add Sass as an external CSS via [jestPreviewConfigure](/docs/api/jestPreviewConfigure). This is usually handy for stylesheet files imported in `src/index.js` or `src/main.js`.
+You can even add Sass as an external CSS directly in your setup test file. This is usually handy for stylesheet files imported in `src/index.js` or `src/main.js`.
 
 ```js
 // setupTests.js
 import { jestPreviewConfigure } from 'jest-preview';
-
-// Should be path from root of your project
-jestPreviewConfigure({
-  // Configure external CSS
-  externalCss: [
-    'demo/global.scss',
-    'node_modules/@your-design-system/css/dist/index.min.scss', // scss from node_modules
-  ],
-});
+import './global.scss';
+import '@your-design-system/css/dist/index.min.scss';
 ```
 
 For now, Jest Preview only supports Dart Sass, since [LibSass and Node Sass are deprecated](https://sass-lang.com/blog/libsass-is-deprecated). One caveat is that Jest Preview doesn't support [load path](https://sass-lang.com/documentation/cli/dart-sass#load-path) yet. We will add it to the next version.

website/blog/2022-04-25-nextjs-support/index.md

@@ -51,16 +51,12 @@ and configure external CSS files if there are any.
 
 ```js
 import { jestPreviewConfigure } from 'jest-preview';
-
-jestPreviewConfigure({
-  // An array of relative paths from the root of your project
-  externalCss: [
-    'styles/globals.css',
-    // SCSS is also supported
-    'demo/globals.scss',
-    // Any CSS from node_modules is fine
-    'node_modules/@your-design-system/css/dist/index.min.css',
-  ],
+// Global CSS is supported
+import 'styles/globals.css';
+// SCSS is also supported
+import 'demo/globals.scss';
+// Any CSS from dependencies is fine
+import '@your-design-system/css/dist/index.min.css';
 ```
 
 For details, please refer to [Installation guide](/docs/getting-started/installation). You can also see the **full example** at [Nextjs with Rust compiler](https://github.com/nvh95/jest-preview/tree/main/examples/nextjs)

website/blog/2022-06-15-deprecate-externalCss/index.md

@@ -0,0 +1,30 @@
+---
+slug: deprecate-externalCss
+title: Deprecate externalCss option
+authors: [nvh95]
+tags: [jest-preview, backward-compatible, css]
+# TODO: To add new social image
+# image: /img/first-class-support-cra.jpg
+---
+
+Previous Jest Preview provides a way to configure external CSS via `externalCss` option in `jestPreviewConfigure` function. However, we realized that we can actually import the css DIRECTLY in the setup test file (usually `setupFilesAfterEnv` file) instead. This way, we can use the same logic to process external CSS as well as CSS in your components.
+
+**What you need to do is as follow:**
+
+```diff
+// src/setupTests.js
+-jestPreviewConfigure({
+-  externalCss: ['src/global.css', 'src/assets/_scss/global-style.scss'],
+-});
++import './global.css';
++import './assets/_scss/global-style.scss';
+```
+
+`externalCss` is not recommended to use anymore. Please do not use it. We are planning to remove it gradually with this road map:
+
+> - 0.2.4: Add a warning to warn users if they use `externalCss`.
+> - 0.3.0: Remove the code to process `externalCss` in `jestPreviewConfigure`, show an error if users use `externalCss`.
+> - 0.4.0: Throw an error if users configure `externalCss`.
+> - 0.5.0: Remove `externalCss` completely.
+
+We hope with this change, Jest Preview will get better and better. Please reach us at [Issues](https://github.com/nvh95/jest-preview/issues) if you have any issues with this deprecation. Thanks.

website/docs/api/jestPreviewConfigure.md

@@ -5,39 +5,23 @@ sidebar_position: 2
 # jestPreviewConfigure()
 
 ```js
-// ./config/jest/setupTests.js
+// src/setupTests.js
 import { jestPreviewConfigure } from 'jest-preview';
+// Configure external CSS
+import './global.css';
+import './global.scss';
+import '@your-design-system/css/dist/index.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
-// Should be path from root of your project
 jestPreviewConfigure({
-  // Configure external CSS
-  externalCss: [
-    'demo/global.css',
-    'demo/global.scss', // Sass
-    'node_modules/@your-design-system/css/dist/index.min.css', // css from node_modules
-    'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  ],
   // Configure public folder if your public folder is not "public"
   publicFolder: 'your-public-folder-name',
 });
 ```
 
-## externalCss: string[]
+## externalCss: string[] (Deprecated)
 
-Default: `[]`
-
-CSS files outside your Jest rendered app (e.g: CSS from `src/index.js`, `main.jsx`) should be configured via `externalCss` option. They should be path from root of your project. For example:
-
-```js
-jestPreviewConfigure({
-  // Configure external CSS
-  externalCss: [
-    'demo/global.css',
-    'demo/global.scss', // Sass
-    'node_modules/@your-design-system/css/dist/index.min.css', // css from node_modules
-    'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  ],
-```
+This option is deprecated. Please do not use it. Instead, import the CSS directly. See the instruction at [Deprecate CSS](/blog/deprecate-externalCss)
 
 ## sassLoadPaths: string[]
 
@@ -48,9 +32,8 @@ Paths in which to look for stylesheets loaded by rules like `@use` and `@import`
 ```js
 jestPreviewConfigure({
   // Configure Sass load paths
-  sassLoadPaths: [
-    'demo/assets/_scss/loadPathsExample',
-  ],
+  sassLoadPaths: ['demo/assets/_scss/loadPathsExample'],
+});
 ```
 
 ## publicFolder: string

website/docs/getting-started/installation.md

@@ -59,22 +59,15 @@ Sometimes, there are some CSS files imported outside your current test component
 ```js
   // jest.config.js
   {
-    setupFilesAfterEnv: ["./config/jest/setupTests.js"],
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   }
 ```
 
 ```js
-// ./config/jest/setupTests.js
-import { jestPreviewConfigure } from 'jest-preview';
-
-// Should be path from root of your project
-jestPreviewConfigure({
-  externalCss: [
-    'demo/global.css',
-    'node_modules/@your-design-system/css/dist/index.min.css',
-    'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  ],
-});
+// src/setupTests.js
+import './global.css';
+import '@your-design-system/css/dist/index.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 ```
 
 ### 5. (Optional) Configure public folder