Merge pull request #13 from dburles/refactor

Refactor

.eslintrc.json

@@ -1,26 +1,35 @@
 {
   "extends": [
     "eslint:recommended",
-    "plugin:jsdoc/recommended",
-    "plugin:node/recommended",
-    "plugin:import/recommended",
-    "plugin:compat/recommended",
     "plugin:react/recommended",
-    "plugin:prettier/recommended"
+    "plugin:react-hooks/recommended"
   ],
-  "plugins": ["jsdoc", "react-hooks"],
   "parserOptions": {
-    "ecmaVersion": "latest"
+    "ecmaVersion": "latest",
+    "sourceType": "script"
   },
   "settings": {
     "react": {
       "version": "detect"
     }
   },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2022": true
+  },
+  "overrides": [
+    {
+      "files": ["**/*.mjs"],
+      "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+      }
+    }
+  ],
   "rules": {
     "arrow-body-style": ["error", "always"],
     "curly": ["error", "all"],
-    "jsdoc/require-jsdoc": "off",
     "func-style": ["error", "declaration"]
   }
 }

.github/workflows/nodejs.yml

@@ -6,8 +6,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        os: [ubuntu-latest, macos-latest]
-        node: ["14", "16", "18", "19"]
+        os: [ubuntu-latest]
+        node: ["18", "19"]
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js v${{ matrix.node }}

.prettierignore

@@ -1,2 +1 @@
 package.json
-/snapshots

Global.js

@@ -3,13 +3,12 @@
 const { Global: EmotionGlobal } = require("@emotion/react");
 const PropTypes = require("prop-types");
 const React = require("react");
-const transformStyles = require("./private/transformStyles.js");
+const css = require("./private/css.js");
 const useMystical = require("./useMystical.js");
 
-function Global({ styles: initialStyles }) {
+function Global({ styles }) {
   const context = useMystical();
-  const styles = transformStyles(initialStyles)(context);
-  return React.createElement(EmotionGlobal, { styles });
+  return React.createElement(EmotionGlobal, { styles: css(styles)(context) });
 }
 
 Global.propTypes = {

MysticalProvider.js

@@ -5,26 +5,39 @@ 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");
 
-function MysticalProvider({ theme = {}, children }) {
-  return React.createElement(
-    ThemeProvider,
-    { theme: { theme } },
-    React.createElement(Global, {
-      styles: {
-        ":root": customProperties(theme.colors, "colors"),
+function MysticalGlobalStyles() {
+  const { theme } = useMystical();
+
+  return React.createElement(Global, {
+    styles: [
+      {
         ["*, *::before,*::after"]: {
           boxSizing: "border-box",
         },
-        ...theme.global,
       },
-    }),
+      theme.colors && { ":root": customProperties(theme.colors, "colors") },
+      theme.global,
+    ],
+  });
+}
+
+function MysticalProvider({ theme, options = {}, children }) {
+  return React.createElement(
+    ThemeProvider,
+    { theme: { theme, options } },
+    React.createElement(MysticalGlobalStyles),
     children
   );
 }
 
 MysticalProvider.propTypes = {
-  theme: PropTypes.object.isRequired,
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
+  options: PropTypes.shape({
+    darkModeOff: PropTypes.bool,
+    darkModeForcedBoundary: PropTypes.bool,
+  }),
   children: PropTypes.node.isRequired,
 };
 

darkColorMode.js

@@ -1,5 +1,5 @@
 "use strict";
 
-const darkColorMode = "@media (prefers-color-scheme: dark)";
+const darkColorMode = "__MYSTICAL_INTERNAL_DARK_MODE__";
 
 module.exports = darkColorMode;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mystical",
   "description": "CSS prop constraint based styling",
-  "version": "14.0.0",
+  "version": "15.0.0-beta.2",
   "author": "David Burles",
   "license": "MIT",
   "repository": "github:dburles/mystical",
@@ -15,22 +15,20 @@
     "react"
   ],
   "engines": {
-    "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+    "node": "^18.0.0 || >= 19.0.0"
   },
-  "browserslist": "Node 14.17 - 15 and Node < 15, Node >= 16, > 0.5%, not OperaMini all, not IE > 0, not dead",
+  "type": "commonjs",
   "sideEffects": false,
   "files": [
     "darkColorMode.js",
     "defaultColorMode.js",
     "Global.js",
     "index.d.ts",
-    "InitializeColorMode.js",
     "jsx-dev-runtime.js",
     "jsx-runtime.js",
     "jsx.js",
     "MysticalProvider.js",
     "private",
-    "useColorMode.js",
     "useModifiers.js",
     "useMystical.js",
     "useTheme.js"
@@ -40,13 +38,11 @@
     "./defaultColorMode.js": "./defaultColorMode.js",
     "./Global.js": "./Global.js",
     "./index.d.ts": "./index.d.ts",
-    "./InitializeColorMode.js": "./InitializeColorMode.js",
     "./jsx-dev-runtime": "./jsx-dev-runtime.js",
     "./jsx-runtime": "./jsx-runtime.js",
     "./jsx.js": "./jsx.js",
     "./MysticalProvider.js": "./MysticalProvider.js",
     "./package.json": "./package.json",
-    "./useColorMode.js": "./useColorMode.js",
     "./useModifiers.js": "./useModifiers.js",
     "./useMystical.js": "./useMystical.js",
     "./useTheme.js": "./useTheme.js"
@@ -56,25 +52,18 @@
     "test": "npm run test:lint && npm run test:prettier && npm run test:unit",
     "test:lint": "eslint .",
     "test:prettier": "prettier -c .",
-    "test:unit": "node test/run.mjs",
+    "test:unit": "node --test",
     "prepublishOnly": "npm test"
   },
   "devDependencies": {
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-compat": "^4.0.2",
-    "eslint-plugin-import": "^2.23.3",
-    "eslint-plugin-jsdoc": "^39.3.6",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "snapshot-assertion": "^5.0.0",
-    "test-director": "^10.0.0"
+    "react-test-renderer": "^18.2.0"
   },
   "dependencies": {
     "@emotion/react": "^11.4.0",

private/createJsxFn.js

@@ -1,14 +1,14 @@
 "use strict";
 
-const transformStyles = require("./transformStyles.js");
+const css = require("./css.js");
 
 function createJsxFn(jsxFn) {
   return (type, props, ...rest) => {
-    const { css, ...restProps } = props || {};
+    const { css: styles, ...restProps } = props || {};
 
     return jsxFn(
       type,
-      css ? { css: transformStyles(css), ...restProps } : props,
+      styles ? { css: css(styles), ...restProps } : props,
       ...rest
     );
   };

private/css.js

@@ -0,0 +1,82 @@
+"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");
+
+function transformStyle(property, value, theme = {}) {
+  const themeKey = themeTokens[property];
+
+  if (shorthandProperties[property]) {
+    return shorthandProperties[property](theme, String(value));
+  } else if (themeKey) {
+    let currentThemeProperties = theme[themeKey];
+    if (themeKey === "colors") {
+      return transformColors(theme.colors, property, value);
+    }
+    const transformNegatives = negativeTransform(property);
+    return {
+      [property]: transformNegatives(currentThemeProperties, value, value),
+    };
+  }
+  return { [property]: value };
+}
+
+function css(rootStyles) {
+  let mergedStyles = Array.isArray(rootStyles)
+    ? merge(...rootStyles)
+    : rootStyles;
+
+  return (context) => {
+    let transformedStyles = {};
+
+    function transformStyles(styles) {
+      for (const property in styles) {
+        const value = styles[property];
+        if (isObject(value)) {
+          if (property === darkColorMode) {
+            const transformed = css(value)(context);
+            if (!context.options?.darkModeOff) {
+              transformedStyles["@media (prefers-color-scheme: dark)"] =
+                transformed;
+            }
+            if (context.options?.darkModeForcedBoundary) {
+              transformedStyles[`[${forceDarkModeAttribute}] &`] = transformed;
+            }
+          } else {
+            transformedStyles[property] = css(value)(context);
+          }
+        } else {
+          transformedStyles = {
+            ...transformedStyles,
+            ...transformStyle(property, value, context.theme),
+          };
+        }
+      }
+    }
+
+    if (Array.isArray(context.theme?.breakpoints)) {
+      const mq = facepaint(
+        context.theme.breakpoints.map((bp) => {
+          return `@media (min-width: ${bp})`;
+        })
+      );
+
+      for (const styles of mq(mergedStyles)) {
+        transformStyles(styles);
+      }
+    } else {
+      transformStyles(mergedStyles);
+    }
+
+    return transformedStyles;
+  };
+}
+
+module.exports = css;