gatsby-plugin-theme-ui - npm Package Compare versions

Comparing version 0.0.16-6 to 0.0.17-alpha.0

gatsby-browser.js

@@ -1,8 +0,1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.wrapRootElement = void 0;
-
-var _root = require("./root");
-
-exports.wrapRootElement = _root.wrapRootElement;
+exports.wrapRootElement = require('./root')

gatsby-node.js

@@ -0,4 +1,35 @@
+const fs = require('fs')
 const path = require('path')
+const pkg = require('./package.json')
 
-exports.onCreateWebpackConfig = ({ actions, loaders }, opts) => {
+const themeModules = []
+
+const hasModule = dirname => {
+  return fs.existsSync(path.join(dirname, 'src', 'theme.js'))
+    || fs.existsSync(path.join(dirname, 'src', 'theme', 'index.js'))
+}
+
+exports.onCreateWebpackConfig = ({ actions, loaders, store }, opts) => {
+  const { program, config, themes } = store.getState()
+  const siteThemeModule = path.join(program.directory, 'src', 'theme')
+
+  if (Array.isArray(themes.themes)) {
+    themes.themes.forEach(theme => {
+      let hasThemePlugin = false
+      if (theme.themeConfig && theme.themeConfig.plugins) {
+        hasThemePlugin = theme.themeConfig.plugins.includes(pkg.name)
+      }
+      if (hasThemePlugin) {
+        const filepath = path.join(theme.themeDir, 'src', 'theme.js')
+        if (hasModule(theme.themeDir)) {
+          themeModules.push(filepath)
+        }
+      }
+    })
+  }
+
+  if (hasModule(program.directory)) {
+    themeModules.push(siteThemeModule)
+  }
+
   actions.setWebpackConfig({
@@ -9,11 +40,14 @@ module: {
           test: /\.js$/,
-          include: path.dirname(require.resolve('gatsby-plugin-theme-ui')) },
+          include: path.dirname(require.resolve('gatsby-plugin-theme-ui'))
+        },
         {
-          test: /gatsby-plugin-theme-ui\/theme-loader/,
+          test: /gatsby-plugin-theme-ui\/loader/,
+          include: path.dirname(require.resolve('gatsby-plugin-theme-ui')),
           use: [
             loaders.js(),
             {
-              loader: require.resolve('./theme-loader'),
+              loader: require.resolve('./loader'),
               options: {
                 ...opts,
+                themes: themeModules,
               }
@@ -20,0 +54,0 @@ }

gatsby-ssr.js

@@ -1,8 +0,26 @@
-"use strict";
+const { jsx } = require('theme-ui')
 
-exports.__esModule = true;
-exports.wrapRootElement = void 0;
+exports.wrapRootElement = require('./root')
 
-var _root = require("./root");
+// prevent color mode flash
+const noflash = `
+(function() {
+  try {
+    var mode = localStorage.getItem('theme-ui-color-mode');
+    if (!mode) return
+    document.body.classList.add('theme-ui-' + mode);
+  } catch (e) {
+  }
+})();
+`
 
-exports.wrapRootElement = _root.wrapRootElement;
+exports.onRenderBody = ({
+  setPreBodyComponents,
+}) => {
+  const script = jsx('script', {
+    dangerouslySetInnerHTML: {
+      __html: noflash
+    }
+  })
+  setPreBodyComponents([ script ])
+}

package.json

 {
   "name": "gatsby-plugin-theme-ui",
-  "version": "0.0.16-6",
+  "version": "0.0.17-alpha.0",
   "main": "index.js",
   "author": "Brent Jackson <[e-mail]>",
   "license": "MIT",
-  "scripts": {
-    "prepare": "babel src -d ."
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "babel-preset-gatsby-package": "^0.1.4"
-  },
   "dependencies": {
     "loader-utils": "^1.2.3",
-    "theme-ui": "^0.0.15"
-  }
+    "lodash.merge": "^4.6.1"
+  },
+  "gitHead": "525dde70c2a15c98f5ffe2ecb5ea62d15be487f0"
 }

README.md

 
 # gatsby-plugin-theme-ui
 
-Adds the Theme UI ThemeProvider context to Gatsby themes and sites, deeply merging them into a single context.
+Automatically adds Theme UI context to a Gatsby site or theme
 
 ```sh
-npm i gatsby-plugin-theme-ui
+npm i theme-ui gatsby-plugin-theme-ui
 ```
@@ -14,15 +14,39 @@
   plugins: [
-    {
-      resolve: 'gatsby-plugin-theme-ui',
-      options: {
-        // required
-        theme: require.resolve('./src/theme.js'),
-        // optional
-        components: require.resolve('./src/components.js'),
-        // optional, initial color mode
-        initialColorMode: 'light',
+    'gatsby-plugin-theme-ui',
+  ]
+}
+```
+
+Add a `src/theme.js` file to your site to add values to the theme context.
+
+```js
+// src/theme.js
+export default {
+  colors: {
+    text: '#000',
+    background: '#fff',
+    primary: 'tomato',
+  },
+}
+```
+
+## Color Modes
+
+To enable support for multiple color modes, add an `initialColorMode` field to your `theme.js` object.
+
+```js
+// src/theme.js
+export default {
+  initialColorMode: 'light',
+  colors: {
+    text: '#000',
+    background: '#fff',
+    modes: {
+      dark: {
+        text: '#fff',
+        background: '#000',
       }
     }
-  ]
+  },
 }
 ```

root.js

@@ -1,50 +0,21 @@
-"use strict";
+const {
+  jsx,
+  ThemeProvider,
+  ColorMode,
+} = require('theme-ui')
+const merge = require('lodash.merge')
+const { themes } = require('gatsby-plugin-theme-ui/loader')
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+const theme = merge({}, ...themes)
 
-exports.__esModule = true;
-exports.wrapRootElement = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _themeUi = require("theme-ui");
-
-var _lodash = _interopRequireDefault(require("lodash.merge"));
-
-var _themeLoader = require("gatsby-plugin-theme-ui/theme-loader");
-
-var _jsxFileName = "/Users/jxnblk/repos/theme-ui/gatsby-plugin-theme-ui/src/root.js";
-
-var theme = _lodash.default.apply(void 0, [{}].concat(_themeLoader.themes));
-
-var comps = _lodash.default.apply(void 0, [{}].concat(_themeLoader.components));
-
-var wrapRootElement = function wrapRootElement(_ref, opts) {
-  var element = _ref.element,
-      props = _ref.props;
-
-  var children = _react.default.createElement(_themeUi.ThemeProvider, {
-    components: comps,
-    theme: theme,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 11
-    },
-    __self: this
-  }, element);
-
-  if (!opts.initialColorMode) {
-    return children;
-  }
-
-  return _react.default.createElement(_themeUi.ColorModeProvider, {
-    initialColorMode: opts.initialColorMode,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 23
-    },
-    __self: this
-  }, children);
-};
-
-exports.wrapRootElement = wrapRootElement;
+module.exports = ({ element }, opts) => {
+  return jsx(ThemeProvider, {
+    ...opts,
+    theme,
+  },
+    theme.initialColorMode && jsx(ColorMode, {
+      key: 'theme-ui-color-mode',
+    }),
+    element
+  )
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5274

increased by38.94%

Dev dependency count

0

decreased by-100%

Number of downloads

3221

increased by16.66%

Number of package files

9

increased by12.5%

Lines of code

118

increased by29.67%

Number of lines in readme file

52

increased by85.71%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedlodash.merge@^4.6.1

• - Removedtheme-ui@^0.0.15

• - Removed@babel/code-frame@7.26.2(transitive)

• - Removed@babel/generator@7.26.2(transitive)

• - Removed@babel/helper-module-imports@7.25.9(transitive)

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/parser@7.26.2(transitive)

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@babel/template@7.25.9(transitive)

• - Removed@babel/traverse@7.25.9(transitive)

• - Removed@babel/types@7.26.0(transitive)

• - Removed@emotion/cache@10.0.29(transitive)

• - Removed@emotion/core@10.3.1(transitive)

• - Removed@emotion/css@10.0.27(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• - Removed@emotion/is-prop-valid@0.8.8(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removed@emotion/serialize@0.11.16(transitive)

• - Removed@emotion/sheet@0.9.4(transitive)

• - Removed@emotion/styled@10.3.0(transitive)

• - Removed@emotion/styled-base@10.3.0(transitive)

• - Removed@emotion/stylis@0.8.5(transitive)

• - Removed@emotion/unitless@0.7.5(transitive)

• - Removed@emotion/utils@0.11.3(transitive)

• - Removed@emotion/weak-memoize@0.2.5(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@mdx-js/react@1.6.22(transitive)

• - Removed@styled-system/css@2.0.4(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removedbabel-plugin-emotion@10.2.2(transitive)

• - Removedbabel-plugin-macros@2.8.0(transitive)

• - Removedbabel-plugin-syntax-jsx@6.18.0(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedcompass-vertical-rhythm@1.4.5(transitive)

• - Removedconsole-polyfill@0.1.2(transitive)

• - Removedconvert-css-length@1.0.2(transitive)

• - Removedconvert-source-map@1.9.0(transitive)

• - Removedcosmiconfig@6.0.0(transitive)

• - Removedcss-what@2.1.3(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removeddecamelize@1.2.0(transitive)

• - Removedemotion-theming@10.3.0(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedfind-root@1.1.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedgray-percentage@2.0.0(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedimport-fresh@3.3.0(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.15.1(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedjsesc@3.0.2(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedlodash.get@4.4.2(transitive)

• - Removedlodash.isnumber@3.0.3(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedmodularscale@1.0.22.0.1(transitive)

• - Removedms@2.1.3(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedparse-unit@1.0.1(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedresolve@1.22.8(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedstyled-system@4.2.4(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removedtheme-ui@0.0.15(transitive)

• - Removedtheme-ui-typography@0.0.15(transitive)

• - Removedtypography@0.16.24(transitive)

• - Removedtypography-normalize@0.16.19(transitive)

• - Removedyaml@1.10.2(transitive)