add tests

Author: geoctrl

README.md

@@ -122,7 +122,7 @@ language injection and can easily be setup to give you full syntax highlighting
 1. Go to intellij's `Settings`, and choose `Editor` > `Language Injections` 
 2. Press the `+` button and choose `JS Tagged Literal Injection`
 3. Name your new injection setting to something memorable, like `cssModules`
-4. Set your "Language ID" to `CSS` (or `SASS` if your using that)
+4. Set your "Language ID" to `CSS` (or `SASS` if you're using that)
 5. Set "Places Patterns" to `+ taggedString("cssModules")`
 6. Leave all other options empty and click "OK"
 7. Enjoy css-in-js like a boss

babel.config.js renamed to babel.config.cjs

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ["@babel/preset-env", "@babel/preset-react"],
+  plugins: ["babel-plugin-css-to-module"],
 };

package.json

@@ -1,25 +1,36 @@
 {
   "name": "inline-css-modules-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/inline-css-modules-react.umd.js",
   "module": "dist/inline-css-modules-react.esm.js",
   "type": "module",
   "types": "dist/inline-css-modules-react.d.ts",
   "scripts": {
     "watch": "rollup --config --watch",
+    "test": "jest",
     "build": "rm -rf ./dist && rollup --config",
     "prepublish": "npm run build"
   },
   "author": "Tony Lefler <[email protected]>",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/geoctrl/babel-plugin-css-to-module"
+  },
   "devDependencies": {
     "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-typescript": "^11.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
+    "babel-plugin-css-to-module": "^0.2.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^3.29.4",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.6.2",
@@ -28,5 +39,8 @@
   "peerDependencies": {
     "react": ">=16"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "jest": "^29.7.0"
+  }
 }

src/inline-css-modules-react.test.tsx

@@ -0,0 +1,69 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import { screen, render } from "@testing-library/react";
+import {
+  cssModules,
+  useCssModules,
+} from "../dist/inline-css-modules-react.umd";
+
+describe("cssModules and useCssModules", () => {
+  test("default should not have styles", () => {
+    render(<NoStyles />);
+    const div = screen.getByText(text);
+    expect(getComputedStyle(div).backgroundColor).toBeFalsy();
+  });
+
+  test("should display styles from applied class", () => {
+    render(<WithStyles />);
+    const div = screen.getByText(text);
+    expect(getComputedStyle(div).backgroundColor).toBe("red");
+  });
+
+  test("style className should be the same as applied className", () => {
+    render(<WithStyles />);
+    const className = document.head
+      .querySelector("style")
+      .innerHTML.split("{")[0]
+      .slice(1);
+    expect(className).toBe(s.test);
+  });
+
+  test("should only mount one style element", () => {
+    render(
+      <>
+        <WithStyles />
+        <WithStyles />
+      </>,
+    );
+    const styles = document.head.querySelectorAll("style");
+    expect(styles.length).toBe(1);
+  });
+
+  test("should remove style after unmount", () => {
+    const { unmount } = render(<WithStyles />);
+    expect(document.head.querySelector("style")).toBeTruthy();
+    unmount();
+    expect(document.head.querySelector("style")).toBeFalsy();
+  });
+});
+
+// setup
+const text = "Hello, World!";
+
+function NoStyles() {
+  return <div>{text}</div>;
+}
+
+function WithStyles() {
+  useCssModules(css);
+  return <div className={s.test}>{text}</div>;
+}
+
+const { css, s } = cssModules`
+  .test {
+    background-color: red;
+  }
+`;

tsconfig.json

@@ -10,7 +10,8 @@
     ],
     "moduleResolution": "node",
     "declaration": true,
-    "allowJs": true
+    "allowJs": true,
+    "jsx": "react"
   },
   "include": [
     "src",