Linting and auto detect styleEngineTag from name/displayName

package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-style-engine",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "An in script style engine to be used with state/redux and shadow dom",
   "main": "dist/index.js",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/@curiosity26"
   },
   "scripts": {
     "build": "NODE_ENV=production $(npm bin)/babel src --out-dir dist",
-    "test": "$(npm bin)/eslint && $(npm bin)/jest"
+    "test": "$(npm bin)/eslint src test && $(npm bin)/jest"
   },
   "repository": {
     "type": "git",
@@ -41,6 +41,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.20.0",
     "jest": "^26.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
@@ -50,9 +51,11 @@
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "construct-style-sheets-polyfill": "^2.3.5",
     "react-shadow": "^18.1.0"
   },
+  "optionalDependencies": {
+    "construct-style-sheets-polyfill": "^2.3.5"
+  },
   "files": [
     "dist/**/*"
   ]

src/engine/constructGlobalStyleSheets.js

@@ -10,7 +10,7 @@ export default (global, scales = {}) => {
 
     if (!definition) continue;
 
-    styleSheets = [...styleSheets, ...constructStyleSheets(definition, scales, selector)]
+    styleSheets = [ ...styleSheets, ...constructStyleSheets(definition, scales, selector) ]
   }
 
   return styleSheets

src/engine/constructStyleFromDefinition.js

@@ -9,7 +9,7 @@ const convertStyle = (field, value) => {
                  .map(([ key, rule ]) =>
                    rule && `${ field }-${ hyphenateStyleName(key) }: ${ rule };`)
                  .filter(rule => rule)
-                 .join("\n") + '\n'
+                 .join("\n") + "\n"
   }
 
   return `${ hyphenateStyleName(field) }: ${ value };\n`

src/engine/constructStyleSheets.js

@@ -11,9 +11,9 @@ const reduceStyles = scales => (def = { directives: [], hostRules: {}, childRule
       ...def, directives: [ ...directives, `${ key } ${
         // In the case of key being @keyframes, the value should be an object
         "object" === typeof value
-        ? `{\n${ Object.entries(value)
+          ? `{\n${ Object.entries(value)
                        .reduce((s, [ f, v ]) => `${ s } ${ f } {${ constructStyleFromDefinition(v) }}\n`, "") }}`
-        : value
+          : value
       };` ],
     }
   }

src/index.jsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext, useEffect, forwardRef } from "react"
 import PropTypes                                                   from "prop-types"
 import createStyleEngine                                           from "./engine/createStyleEngine"
 
-export { default as GlobalStyles }                                                from "./GlobalStyles"
+export { default as GlobalStyles }                                 from "./GlobalStyles"
 
 const StyleContext = createContext()
 
@@ -14,7 +14,7 @@ export const StyleProvider = ({ globalStyles = {}, componentStyles = {}, scales:
   const styles = {
     global,
     components,
-    scales
+    scales,
   }
 
   const engine = createStyleEngine({
@@ -48,9 +48,7 @@ export const withStyle = (
   Component,
   { attributeName = "style", styleEngineTag, style = {} } = {},
 ) => {
-  if (styleEngineTag) {
-    Component.styleEngineTag = styleEngineTag
-  }
+  Component.styleEngineTag = Component.styleEngineTag || styleEngineTag || Component.displayName || Component.name
 
   const WrappedComponent = forwardRef(({ style: styleOverride = {}, ...props }, ref) => {
     const compProps = { ...(props || {}) }
@@ -66,7 +64,7 @@ export const withStyle = (
   })
 
   WrappedComponent.defaultProps = Component.defaultProps
-  WrappedComponent.displayName = Component.displayName
+  WrappedComponent.displayName = `withStyles(${Component.styleEngineTag})`
   WrappedComponent.propTypes = {
     ...(Component.propTypes || {}),
     style: PropTypes.object,
@@ -79,16 +77,14 @@ export const withStyleSheets = (
   Component,
   { attributeName = "styleSheets", styleEngineTag, style = {} } = {},
 ) => {
-  if (styleEngineTag) {
-    Component.styleEngineTag = styleEngineTag
-  }
+  Component.styleEngineTag = Component.styleEngineTag || styleEngineTag || Component.displayName || Component.name
 
-  const WrappedComponent = forwardRef(({ style: styleOverride = {}, styleEngine, ...props }, ref) => {
+  const WrappedComponent = forwardRef(({ style: styleOverride = {}, ...props }, ref) => {
     const compProps = { ...(props || {}) }
     const defaultStyle = processStyle(style, compProps);
 
     return <StyleConsumer>{ styleEngine => {
-      styleEngine.addComponentStyle(Component, defaultStyle).save()
+      styleEngine.addComponentStyle(Component.styleEngineTag, defaultStyle).save()
 
       // Since computed style sheets are memoized, compute the stylesheets for the component first
       // The component is likely to be reused many times so this will optimize component loading
@@ -106,7 +102,7 @@ export const withStyleSheets = (
   })
 
   WrappedComponent.defaultProps = Component.defaultProps
-  WrappedComponent.displayName = Component.displayName
+  WrappedComponent.displayName = `withStyleSheets(${Component.styleEngineTag})`
   WrappedComponent.propTypes = {
     ...(Component.propTypes || {}),
     style: PropTypes.object,

test/GlobalStyles.spec.jsx

@@ -15,8 +15,8 @@ describe("Global Styles", () => {
     </StyleProvider>)
 
     expect(wrapper).toHaveLength(1);
-    expect(wrapper.find('div')).toHaveLength(1)
-    expect(wrapper.find('div').text()).toEqual("I'm mounted baby!")
+    expect(wrapper.find("div")).toHaveLength(1)
+    expect(wrapper.find("div").text()).toEqual("I'm mounted baby!")
 
     expect(document.adoptedStyleSheets).toHaveLength(1)