jest-transform-css - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

index.js

 const fs = require("fs");
-const path = require("path");
 const crypto = require("crypto");
 const crossSpawn = require("cross-spawn");
+const cosmiconfig = require("cosmiconfig");
 const stripIndent = require("common-tags/lib/stripIndent");
 const THIS_FILE = fs.readFileSync(__filename);
+const explorer = cosmiconfig("jesttransformcss");
+const transformConfig = explorer.searchSync();
 
 module.exports = {
-  getCacheKey: (fileData, filename, configString, { instrument, rootDir }) => {
+  getCacheKey: (fileData, filename, configString, { instrument }) => {
     return (
@@ -17,5 +19,7 @@ crypto
         .update("\0", "utf8")
-        .update(path.relative(rootDir, filename))
+        .update(filename)
         .update("\0", "utf8")
         .update(configString)
+        .update("\0", "utf8")
+        .update(JSON.stringify(transformConfig))
         // TODO load postcssrc (the config) sync and make it part of the cache
@@ -32,2 +36,24 @@ // key
   process: (src, filename, config, options) => {
+    // skip when plain CSS is used
+    // You can create jesttransformcss.config.js in your project and add
+    // module.exports = { modules: true };
+    // or
+    // module.exports = { modules: filename => filename.endsWith(".mod.css") };
+    // to enable css module transformation. for all or for certain files.
+    const useModules =
+      transformConfig &&
+      transformConfig.config &&
+      ((typeof transformConfig.config.modules === "boolean" &&
+        transformConfig.config.modules) ||
+        (typeof transformConfig.config.modules === "function" &&
+          transformConfig.config.modules(filename)));
+    if (!useModules) {
+      return stripIndent`
+        const styleInject = require('style-inject');
+
+        styleInject(${JSON.stringify(src)});
+        module.exports = {};
+      `;
+    }
+
     // The "process" function of this Jest transform must be sync,
@@ -34,0 +60,0 @@ // but postcss is async. So we spawn a sync process to do an sync

package.json

 {
   "name": "jest-transform-css",
   "description": "Jest transformer to import CSS into Jest's `jsdom`",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "main": "index.js",
@@ -10,2 +10,3 @@ "author": "Dominik Ferber <[e-mail]> (http://dferber.de/)",
     "common-tags": "1.8.0",
+    "cosmiconfig": "5.0.6",
     "cross-spawn": "6.0.5",
@@ -12,0 +13,0 @@ "postcss-load-config": "2.0.0",

README.md

@@ -23,3 +23,3 @@ # jest-transform-css
 
-When you want to do Visual Regression Testing in Jest, it is important that the CSS of components is available to the test setup. So far, CSS was not part of tests as it was mocked away by `identity-obj-proxy`.
+When you want to do Visual Regression Testing in Jest, it is important that the CSS of components is available to the test setup. So far, CSS was not part of tests as it was mocked away by using `moduleNameMapper` like a file-mock or `identity-obj-proxy`.
 
@@ -32,4 +32,6 @@ `jest-transform-css` is intended to be used in an `jsdom` environment. When any component imports CSS in the test environment, then the loaded CSS will get added to `jsdom` using [`style-inject`](https://github.com/egoist/style-inject) - just like the Webpack CSS loader would do in a production environment. This means the full styles are added to `jsdom`.
 
-## Installation
+## Setup
 
+### Installation
+
 ```bash
@@ -39,9 +41,32 @@ yarn add jest-transform-css --dev
 
-## Setup
+The old setup of CSS in jest needs to be removed, and the new setup needs to be added next.
 
-### Setup - adding `transform`
+### Removing module name mapping
 
+If your project is using plain CSS imported in the components, then you're likely using a mock file. You can remove that configuration.
+
+```diff
+// in the Jest config
+"moduleNameMapper": {
+- "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+},
+```
+
+If your project is using CSS Modules, then it's likely that `identity-obj-proxy` is configured. It needs to be removed in order for the styles of the `jest-transform-css` to apply.
+
+So, remove these lines from `jest.config.js`:
+
+```diff
+// in the Jest config
+"moduleNameMapper": {
+-  "\\.(s?css|less)$": "identity-obj-proxy"
+},
+```
+
+### Adding `transform`
+
 Open `jest.config.js` and modify the `transform`:
 
 ```
+// in the Jest config
 transform: {
@@ -61,30 +86,45 @@ "^.+\\.js$": "babel-jest",
 
-### Setup - removing `identity-obj-proxy`
+### Enabling CSS modules
 
-If your project is using CSS Modules, then it's likely that `identity-obj-proxy` is configured. It needs to be removed in order for the styles of the `jest-transform-css` to apply.
+By default, `jest-transform-css` will treat every file it transforms as a regular CSS file.
 
-So, remove these lines from `jest.config.js`:
+You need to opt into css-modules mode by specifying it in the configuration. Create a file called `jesttransformcss.config.js` at your project root and add
 
-```diff
-"moduleNameMapper": {
--  "\\.(s?css|less)$": "identity-obj-proxy"
-},
+```js
+// jesttransformcss.config.js
+
+module.exports = {
+  modules: true
+};
 ```
 
+This will enable CSS module transformation for all CSS files transformed by `jest-transform-css`.
+
+If your setup uses both, CSS modules and regular CSS, then you can determine how to load each file individually by specifying a function:
+
+```js
+// jesttransformcss.config.js
+
+module.exports = {
+  modules: filename => filename.endsWith(".mod.css")
+};
+```
+
+This will load all files with `.mod.css` as CSS modules and load all other files as regular CSS. Notice that the function will only be called for whichever regex you provided in the `transform` option of the Jest config.
+
 ## Further setup
 
-There are many ways to setup styles in a project (CSS modules, global styles, external global styles, local global styles, CSS in JS, LESS, SASS just to name a few). How to continue from here on depends on your project.
+There are many ways to set up styles in a project (CSS modules, global styles, external global styles, local global styles, CSS in JS, LESS, SASS just to name a few). How to continue from here depends on your project.
 
-### Further Setup - PostCSS
+### PostCSS
 
 If your setup is using `PostCSS` then you should add a `postcss.config.js` at the root of your folder.
 
-You can apply certain plugins only when `process.env.NODE_ENV === 'test'`. Ensure that valid CSS can be generated. It might be likely that more functionality (transforms) are required to make certain CSS work (like background-images).
+You can apply certain plugins only when `process.env.NODE_ENV === 'test'`. Ensure that valid CSS can be generated.
 
-### Further Setup - css-loader
+> `jest-transform-css` is likley not flexible enough yet to support more sophisticated PostCSS configurations. However, we should be able to add this functionality by extending the configuration file. Feel free to open an issue with your setup and we'll try to support it.
 
-If your setup is using `css-loader` only, without PostCSS then you should be fine. When components import CSS in the test environment, then the CSS is transformed through PostCSS's `cssModules` plugin to generate the classnames. It also injects the styles into `jsdom`.
+### css-loader
 
-## Known Limitations
-
-At the moment I struggled to get CSS from `node_modules` to transpile, due to the `jest` configuration. I might just be missing something obvious.
+If your setup is using `css-loader` only, without PostCSS then you should be fine.
+If you have `modules: true` enabled in `css-loader`, you need to also enable it for `jest-transform-css` (see "Enabling CSS modules"). When components import CSS modules in the test environment, then the CSS is transformed through PostCSS's `cssModules` plugin to generate the classnames. It also injects the styles into `jsdom`.

No alert changes

Improved metrics

Total package byte prevSize

14301

increased by20.59%

Lines of code

175

increased by15.89%

Number of lines in readme file

127

increased by45.98%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedcosmiconfig@5.0.6

• + Addedcosmiconfig@5.0.6(transitive)