Merge pull request #9 from dburles/housekeeping

Version 10

.eslintrc.json

@@ -3,6 +3,7 @@
   "rules": {
     "arrow-body-style": ["error", "always"],
     "curly": ["error", "all"],
-    "react/react-in-jsx-scope": 0
+    "react/react-in-jsx-scope": 0,
+    "jsdoc/require-jsdoc": 0
   }
 }

.github/workflows/nodejs.yml

@@ -7,21 +7,19 @@ on:
     branches: [master]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [10.x]
+        node-version: ['12', '14', '16']
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm i
-      - run: npm run prepare
-      - run: npm run test
+      - run: npm install-test
         env:
           CI: true

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mystical",
   "description": "CSS prop constraint based styling",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "author": "David Burles",
   "license": "MIT",
   "repository": "github:dburles/mystical",
@@ -15,7 +15,7 @@
     "react"
   ],
   "engines": {
-    "node": ">=10"
+    "node": "^12.20 || >= 14.13"
   },
   "browserslist": [
     "> 0.5%",
@@ -29,7 +29,9 @@
       "import": "./public/index.mjs",
       "require": "./public/index.js"
     },
-    "./public/": "./public/",
+    "./public/*": "./public/*",
+    "./public/jsx-runtime": "./public/jsx-runtime.js",
+    "./public/jsx-dev-runtime": "./public/jsx-dev-runtime.js",
     "./package": "./package.json",
     "./package.json": "./package.json"
   },
@@ -48,44 +50,42 @@
     "test": "npm run test:eslint && npm run test:prettier && npm run test:api && npm run test:size",
     "test:eslint": "eslint --ext mjs,js .",
     "test:prettier": "prettier -c .",
-    "test:api": "coverage-node -r hard-rejection/register test",
+    "test:api": "node test/index.mjs",
     "test:size": "size-limit",
     "dev": "chokidar src --initial -c 'npm run prepare && npm run test:api --silent'",
     "prepublishOnly": "npm test"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.0",
-    "@babel/core": "^7.13.8",
-    "@babel/eslint-parser": "^7.13.8",
-    "@babel/node": "^7.13.0",
-    "@babel/plugin-transform-runtime": "^7.13.8",
-    "@babel/preset-env": "^7.13.8",
-    "@babel/preset-react": "^7.12.13",
-    "@size-limit/preset-small-lib": "^4.9.2",
-    "@testing-library/react": "^11.2.5",
+    "@babel/cli": "^7.14.3",
+    "@babel/core": "^7.14.3",
+    "@babel/eslint-parser": "^7.14.3",
+    "@babel/node": "^7.14.2",
+    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-react": "^7.13.13",
+    "@size-limit/preset-small-lib": "^4.11.0",
+    "@testing-library/react": "^11.2.7",
     "chokidar-cli": "^2.1.0",
-    "coverage-node": "^4.0.0",
-    "eslint": "^7.21.0",
-    "eslint-config-env": "^18.0.1",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint": "^7.27.0",
+    "eslint-config-env": "^20.0.1",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-compat": "^3.9.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^32.2.0",
+    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-jsdoc": "^35.0.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "hard-rejection": "^2.1.0",
-    "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "size-limit": "^4.9.2",
-    "snapshot-assertion": "^2.0.0",
-    "test-director": "^5.0.0"
+    "prettier": "^2.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "size-limit": "^4.11.0",
+    "snapshot-assertion": "^3.0.0",
+    "test-director": "^6.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.8",
-    "@emotion/react": "^11.1.5",
+    "@babel/runtime": "^7.14.0",
+    "@emotion/react": "^11.4.0",
     "deepmerge": "^4.2.2",
     "facepaint": "^1.2.1",
     "prop-types": "^15.7.2"

readme.md

@@ -44,7 +44,9 @@ Build themeable, robust and maintainable React component libraries and applicati
 Wrap your app with [MysticalProvider](#mysticalprovider):
 
 ```js
-import { MysticalProvider } from 'mystical';
+// While named imports are available, deep imports result in a small bundle size
+// regardless of the (often dubious) tree-shaking abilities of your bundler.
+import MysticalProvider from 'mystical/public/MysticalProvider.js';
 
 // Optional theme object
 const theme = {
@@ -64,7 +66,7 @@ This `Button` component attempts to illustrate some of the important parts of th
 2. The concept of _modifiers_, the combination of a `modifiers` object with a [useModifiers hook](#usemodifiers). This makes prop based variations of components simple and declarative.
 
 ```js
-import { useModifiers } from 'mystical';
+import useModifiers from 'mystical/public/useModifiers.js';
 
 const modifiers = {
   variant: {
@@ -158,7 +160,7 @@ If you wish to use the `classic` runtime instead, just add the `@jsx` pragma and
 
 ```js
 /** @jsx jsx **/
-import { jsx } from 'mystical';
+import jsx from 'mystical/public/jsx.js';
 
 const MyComponent = () => {
   // ...
@@ -276,7 +278,7 @@ const options = {
 Global style component that automatically removes its styles when unmounted.
 
 ```js
-import { Global } from 'mystical';
+import Global from 'mystical/public/Global.js';
 
 const App = () => {
   return (
@@ -325,7 +327,7 @@ const Component = () => {
 A simple way to pick out values from the theme similar to using the [`css` prop](#css-prop).
 
 ```js
-import { useTheme } from 'mystical';
+import useTheme from 'mystical/public/useTheme.js';
 
 const purple = useTheme('colors', 'purple');
 ```
@@ -335,7 +337,7 @@ const purple = useTheme('colors', 'purple');
 Provides access to the complete [theme object](#theme-object).
 
 ```js
-import { useMystical } from 'mystical';
+import useMystical from 'mystical/public/useMystical.js';
 
 const { theme } = useMystical();
 ```
@@ -345,7 +347,7 @@ const { theme } = useMystical();
 A declarative API for handling prop based variations to component styles. This example demonstrates applying modifier styles to a component with multiple elements. See the [`Button` component above](#example-component) for another example.
 
 ```js
-import { useModifiers } from 'mystical';
+import useModifiers from 'mystical/public/useModifiers.js';
 
 const modifiers = {
   // `default` is a special key for applying and overwriting default styles across each element (experimental).
@@ -386,7 +388,7 @@ const Component = ({ size = 'small', modifiers: customModifiers }) => {
 Allows for altering the color mode on the fly.
 
 ```js
-import { useColorMode } from 'mystical';
+import useColorMode from 'mystical/public/useColorMode.js';
 
 const [colorMode, setColorMode] = useColorMode();
 ```

src/test/index.mjs

@@ -0,0 +1,8 @@
+import TestDirector from 'test-director';
+import mergeModifiers from './mergeModifiers.test.mjs';
+import transformStyles from './transformStyles.test.mjs';
+
+const tests = new TestDirector();
+transformStyles(tests);
+mergeModifiers(tests);
+tests.run();

src/test/lib/snapshotPath.mjs

@@ -0,0 +1,3 @@
+export default function snapshotPath(file) {
+  return './snapshots/' + file;
+}

src/test/lib/theme.js → src/test/lib/theme.mjs

@@ -1,5 +1,3 @@
-'use strict';
-
 const theme = {
   space: [
     '0',
@@ -140,8 +138,7 @@ const theme = {
   fonts: {
     serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
     mono: 'Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
-    sans:
-      'Inter, system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
+    sans: 'Inter, system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
   },
   fontSizes: {
     xs: '0.75rem',
@@ -211,10 +208,8 @@ const theme = {
   shadows: {
     default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
     md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    lg:
-      '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    xl:
-      '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
     '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
     inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
     outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
@@ -231,4 +226,4 @@ const theme = {
   },
 };
 
-module.exports = theme;
+export default theme;

src/test/mergeModifiers.test.js → src/test/mergeModifiers.test.mjs

@@ -1,7 +1,5 @@
-'use strict';
-
-const assert = require('assert');
-const mergeModifiers = require('../private/mergeModifiers');
+import assert from 'assert';
+import mergeModifiers from '../private/mergeModifiers.js';
 
 const modifiers = {
   default: {
@@ -34,7 +32,7 @@ const modifiers2 = {
   },
 };
 
-module.exports = (tests) => {
+export default function (tests) {
   tests.add('mergeModifiers: basic', async () => {
     const modifierStyles = mergeModifiers({ size: 'small' }, modifiers);
 
@@ -43,7 +41,7 @@ module.exports = (tests) => {
     assert.strictEqual(modifierStyles.fontSize, 3);
   });
 
-  tests.add('mergeModifiers: basic with customModifiers,', async () => {
+  tests.add('mergeModifiers: basic with customModifiers', async () => {
     const modifierStyles = mergeModifiers({ size: 'small' }, modifiers, {
       fontSize: 4,
     });
@@ -64,7 +62,7 @@ module.exports = (tests) => {
   });
 
   tests.add(
-    'mergeModifiers: multiple elements with customModifiers,',
+    'mergeModifiers: multiple elements with customModifiers',
     async () => {
       const modifierStyles = mergeModifiers({ size: 'small' }, modifiers2, {
         title: {
@@ -75,4 +73,4 @@ module.exports = (tests) => {
       assert.strictEqual(modifierStyles.title.fontSize, 4);
     }
   );
-};
+}

src/test/transformStyles.test.js → src/test/transformStyles.test.mjs

@@ -1,11 +1,9 @@
-'use strict';
+import snapshot from 'snapshot-assertion';
+import transformStyles from '../private/transformStyles.js';
+import snapshotPath from './lib/snapshotPath.mjs';
+import theme from './lib/theme.mjs';
 
-const snapshot = require('snapshot-assertion');
-const transformStyles = require('../private/transformStyles');
-const snapshotPath = require('./lib/snapshotPath');
-const theme = require('./lib/theme');
-
-module.exports = (tests) => {
+export default function (tests) {
   tests.add('colors', async () => {
     const styles = transformStyles({
       borderColor: 'orange.500',
@@ -17,4 +15,4 @@ module.exports = (tests) => {
       snapshotPath('transformStyles-colors.json')
     );
   });
-};
+}