Merge pull request #14 from dburles/esm-compat

ESM

.eslintrc.json

@@ -6,7 +6,7 @@
   ],
   "parserOptions": {
     "ecmaVersion": "latest",
-    "sourceType": "script"
+    "sourceType": "module"
   },
   "settings": {
     "react": {

Global.mjs

@@ -0,0 +1,16 @@
+import { Global as EmotionGlobal } from "@emotion/react";
+import PropTypes from "prop-types";
+import React from "react";
+import css from "./private/css.mjs";
+import useMystical from "./useMystical.mjs";
+
+function Global({ styles }) {
+  const context = useMystical();
+  return React.createElement(EmotionGlobal, { styles: css(styles)(context) });
+}
+
+Global.propTypes = {
+  styles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+};
+
+export default Global;

MysticalProvider.js → MysticalProvider.mjs

@@ -1,11 +1,9 @@
-"use strict";
-
-const { ThemeProvider } = require("@emotion/react");
-const PropTypes = require("prop-types");
-const React = require("react");
-const Global = require("./Global.js");
-const customProperties = require("./private/customProperties.js");
-const useMystical = require("./useMystical.js");
+import { ThemeProvider } from "@emotion/react";
+import PropTypes from "prop-types";
+import React from "react";
+import Global from "./Global.mjs";
+import customProperties from "./private/customProperties.mjs";
+import useMystical from "./useMystical.mjs";
 
 function MysticalGlobalStyles() {
   const { theme } = useMystical();
@@ -28,7 +26,7 @@ function MysticalProvider({ theme, options = {}, children }) {
     ThemeProvider,
     { theme: { theme, options } },
     React.createElement(MysticalGlobalStyles),
-    children
+    children,
   );
 }
 
@@ -41,4 +39,4 @@ MysticalProvider.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-module.exports = MysticalProvider;
+export default MysticalProvider;

MysticalProvider.test.mjs

@@ -1,10 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import assert from "node:assert/strict";
 import { act, create } from "react-test-renderer";
-import { createElement } from "react";
-import MysticalProvider from "./MysticalProvider.js";
+import MysticalProvider from "./MysticalProvider.mjs";
 import test from "node:test";
-import jsx from "./jsx.js";
+import createElement from "./createElement.mjs";
 
 test("MysticalProvider", async (t) => {
   await t.test("theme object is optional", () => {
@@ -18,14 +17,14 @@ test("MysticalProvider", async (t) => {
               return {};
             },
           },
-          jsx(
+          createElement(
             "div",
             {
               css: { color: "red" },
             },
-            "Red text"
-          )
-        )
+            "Red text",
+          ),
+        ),
       );
     });
 

createElement.mjs

@@ -0,0 +1,6 @@
+import { jsx as emotionJsx } from "@emotion/react";
+import wrapCreateElement from "./private/wrapCreateElement.mjs";
+
+const createElement = wrapCreateElement(emotionJsx);
+
+export default createElement;

darkColorMode.js → darkColorMode.mjs

@@ -1,5 +1,3 @@
-"use strict";
-
 const darkColorMode = "__MYSTICAL_INTERNAL_DARK_MODE__";
 
-module.exports = darkColorMode;
+export default darkColorMode;

index.d.ts

@@ -1,4 +1,4 @@
-declare module "mystical/Global.js" {
+declare module "mystical/Global.mjs" {
   export { Global as default } from "@emotion/react/types";
 }
 

jsx-dev-runtime.mjs

@@ -0,0 +1,6 @@
+import { jsxDEV as emotionJsxDev } from "@emotion/react/jsx-dev-runtime";
+import wrapCreateElement from "./private/wrapCreateElement.mjs";
+
+const jsxDEV = wrapCreateElement(emotionJsxDev);
+
+export { jsxDEV };

jsx-runtime.mjs

@@ -0,0 +1,11 @@
+import {
+  jsx as emotionJsx,
+  jsxs as emotionJsxs,
+} from "@emotion/react/jsx-runtime";
+import wrapCreateElement from "./private/wrapCreateElement.mjs";
+
+const jsx = wrapCreateElement(emotionJsx);
+const jsxs = wrapCreateElement(emotionJsxs);
+
+// https://github.com/facebook/react/blob/master/packages/react/src/jsx/ReactJSX.js#L16-L19
+export { jsx, jsxs };

package.json

@@ -1,10 +1,13 @@
 {
   "name": "mystical",
   "description": "CSS prop constraint based styling",
-  "version": "15.0.3",
+  "version": "16.0.0",
   "author": "David Burles",
   "license": "MIT",
-  "repository": "github:dburles/mystical",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dburles/mystical.git"
+  },
   "homepage": "https://github.com/dburles/mystical#readme",
   "bugs": "https://github.com/dburles/mystical/issues",
   "keywords": [
@@ -15,52 +18,51 @@
     "react"
   ],
   "engines": {
-    "node": "^18.0.0 || >= 19.0.0"
+    "node": ">= 20.0.0"
   },
-  "type": "commonjs",
   "sideEffects": false,
   "files": [
-    "darkColorMode.js",
-    "defaultColorMode.js",
-    "Global.js",
+    "createElement.mjs",
+    "darkColorMode.mjs",
+    "Global.mjs",
     "index.d.ts",
-    "jsx-dev-runtime.js",
-    "jsx-runtime.js",
-    "jsx.js",
-    "MysticalProvider.js",
-    "private/css.js",
-    "private/customProperties.js",
-    "private/deepmerge.js",
-    "private/facepaint.js",
-    "private/forceDarkModeAttribute.js",
-    "private/get.js",
-    "private/isDevelopment.js",
-    "private/isObject.js",
-    "private/isServer.js",
-    "private/merge.js",
-    "private/mergeModifiers.js",
-    "private/negativeTransform.js",
-    "private/positiveOrNegative.js",
-    "private/shorthandProperties.js",
-    "private/themeTokens.js",
-    "private/transformColors.js",
-    "private/wrapCreateElement.js",
-    "useModifiers.js",
-    "useMystical.js",
-    "useTheme.js"
+    "jsx-dev-runtime.mjs",
+    "jsx-runtime.mjs",
+    "MysticalProvider.mjs",
+    "private/css.mjs",
+    "private/customProperties.mjs",
+    "private/deepmerge.mjs",
+    "private/facepaint.mjs",
+    "private/forceDarkModeAttribute.mjs",
+    "private/get.mjs",
+    "private/isDevelopment.mjs",
+    "private/isObject.mjs",
+    "private/isServer.mjs",
+    "private/merge.mjs",
+    "private/mergeModifiers.mjs",
+    "private/negativeTransform.mjs",
+    "private/positiveOrNegative.mjs",
+    "private/shorthandProperties.mjs",
+    "private/themeTokens.mjs",
+    "private/transformColors.mjs",
+    "private/wrapCreateElement.mjs",
+    "useModifiers.mjs",
+    "useMystical.mjs",
+    "useTheme.mjs"
   ],
   "exports": {
-    "./darkColorMode.js": "./darkColorMode.js",
-    "./Global.js": "./Global.js",
+    "./createElement.mjs": "./createElement.mjs",
+    "./darkColorMode.mjs": "./darkColorMode.mjs",
+    "./defaultColorMode.mjs": "./defaultColorMode.mjs",
+    "./Global.mjs": "./Global.mjs",
     "./index.d.ts": "./index.d.ts",
-    "./jsx-dev-runtime": "./jsx-dev-runtime.js",
-    "./jsx-runtime": "./jsx-runtime.js",
-    "./jsx.js": "./jsx.js",
-    "./MysticalProvider.js": "./MysticalProvider.js",
+    "./jsx-dev-runtime": "./jsx-dev-runtime.mjs",
+    "./jsx-runtime": "./jsx-runtime.mjs",
+    "./MysticalProvider.mjs": "./MysticalProvider.mjs",
     "./package.json": "./package.json",
-    "./useModifiers.js": "./useModifiers.js",
-    "./useMystical.js": "./useMystical.js",
-    "./useTheme.js": "./useTheme.js"
+    "./useModifiers.mjs": "./useModifiers.mjs",
+    "./useMystical.mjs": "./useMystical.mjs",
+    "./useTheme.mjs": "./useTheme.mjs"
   },
   "types": "index.d.ts",
   "scripts": {
@@ -75,7 +77,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.3.0",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0"
@@ -85,6 +87,6 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0"
   }
 }

private/css.js → private/css.mjs

@@ -1,14 +1,12 @@
-"use strict";
-
-const darkColorMode = require("../darkColorMode.js");
-const facepaint = require("./facepaint.js");
-const forceDarkModeAttribute = require("./forceDarkModeAttribute.js");
-const isObject = require("./isObject.js");
-const merge = require("./merge.js");
-const negativeTransform = require("./negativeTransform.js");
-const shorthandProperties = require("./shorthandProperties.js");
-const themeTokens = require("./themeTokens.js");
-const transformColors = require("./transformColors.js");
+import darkColorMode from "../darkColorMode.mjs";
+import facepaint from "./facepaint.mjs";
+import forceDarkModeAttribute from "./forceDarkModeAttribute.mjs";
+import isObject from "./isObject.mjs";
+import merge from "./merge.mjs";
+import negativeTransform from "./negativeTransform.mjs";
+import shorthandProperties from "./shorthandProperties.mjs";
+import themeTokens from "./themeTokens.mjs";
+import transformColors from "./transformColors.mjs";
 
 function transformStyle(property, value, theme = {}) {
   const themeKey = themeTokens[property];
@@ -65,7 +63,7 @@ function css(rootStyles) {
       const mq = facepaint(
         context.theme.breakpoints.map((bp) => {
           return `@media (min-width: ${bp})`;
-        })
+        }),
       );
 
       for (const styles of mq(mergedStyles)) {
@@ -79,4 +77,4 @@ function css(rootStyles) {
   };
 }
 
-module.exports = css;
+export default css;

private/css.test.mjs

@@ -1,9 +1,9 @@
 import test from "node:test";
-import css from "./css.js";
+import css from "./css.mjs";
 import theme from "../test-utils/theme.mjs";
 import assert from "node:assert/strict";
-import darkColorMode from "../darkColorMode.js";
-import forceDarkModeAttribute from "./forceDarkModeAttribute.js";
+import darkColorMode from "../darkColorMode.mjs";
+import forceDarkModeAttribute from "./forceDarkModeAttribute.mjs";
 
 test("css", async (t) => {
   await t.test("colors", () => {
@@ -86,7 +86,7 @@ test("css", async (t) => {
             color: "red",
           },
         });
-      }
+      },
     );
 
     await tt.test("merge styles", () => {

private/customProperties.js → private/customProperties.mjs

@@ -1,6 +1,4 @@
-"use strict";
-
-const get = require("./get");
+import get from "./get.mjs";
 
 function customProperties(theme, prefix) {
   const customProperties = {};
@@ -34,4 +32,4 @@ function customProperties(theme, prefix) {
   return customProperties;
 }
 
-module.exports = customProperties;
+export default customProperties;

private/customProperties.test.mjs

@@ -1,6 +1,6 @@
 import test from "node:test";
 import assert from "node:assert/strict";
-import customProperties from "./customProperties.js";
+import customProperties from "./customProperties.mjs";
 
 test("customProperties", async (t) => {
   await t.test("self referencing", () => {