Implement property validation with is-native-prop

Author: lttb

package.json

@@ -33,9 +33,12 @@
   },
   "homepage": "https://github.com/lttb/jss-styled#readme",
   "dependencies": {
-    "react": "^15.5.4",
     "react-jss": "^6.1.1"
   },
+  "peerDependencies": {
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  },
   "devDependencies": {
     "babel-cli": "^6.23.0",
     "babel-core": "^6.23.1",
@@ -47,6 +50,8 @@
     "eslint": "^3.13.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-jss": "^3.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.10.3",
     "flow-bin": "^0.44.2",
     "flow-typed": "^2.0.0",

src/index.jsx

@@ -1,18 +1,21 @@
 import React from 'react'
 import injectSheetDefault from 'react-jss'
 
+import filterProps from './utils/filter-props'
+
 
 type StyledElementType = Function & { Tag: string, styles: Object }
-type PrimitiveProps = {
+type TagNameOrStyledElementType = string | StyledElementType
+type PrimitivePropsType = {
   classes: Object,
-  children?: any,
-  className?: string,
+  children: ?any,
+  className: ?string,
 }
 
 
-export const prepareStyled = (injectSheet?: Function = injectSheetDefault) =>
+export const createStyled = (injectSheet?: Function = injectSheetDefault) =>
   (
-    Element: string | StyledElementType,
+    TagNameOrStyledElement: TagNameOrStyledElementType,
     styles: Object,
     baseStyles?: Object = {},
   ): StyledElementType => {
@@ -22,30 +25,39 @@ export const prepareStyled = (injectSheet?: Function = injectSheetDefault) =>
     }: {
       Tag: string,
       styles?: Object
-    } = typeof Element === 'string' ? { Tag: Element } : Element
+    } = typeof TagNameOrStyledElement === 'string'
+      ? {Tag: TagNameOrStyledElement}
+      : TagNameOrStyledElement
+
+    const elementStyles = {...inheritStyles, ...styles}
 
-    const elementStyles = { ...inheritStyles, ...styles }
+    const Primitive = ({classes, children, className, ...attrs}: PrimitivePropsType) => {
+      const props = filterProps(attrs)
 
-    const Primitive = ({ classes, children, className }: PrimitiveProps) =>
-      <Tag className={classes[Tag].concat(className ? ` ${className}` : '')}>
-        {children}
-      </Tag>
+      return (
+        <Tag className={className ? `${classes[Tag]} ${className}` : classes[Tag]} {...props}>
+          {children}
+        </Tag>
+      )
+    }
 
     const StyledPrimitive = injectSheet({
       [Tag]: elementStyles,
       ...baseStyles,
     })(Primitive)
 
-    return Object.assign(StyledPrimitive, { Tag, styles: elementStyles })
+    return Object.assign(StyledPrimitive, {Tag, styles: elementStyles})
   }
 
-export const styled = prepareStyled()
+const defaultStyled = createStyled()
+
+export {defaultStyled as styled}
 
-export const setStyledCreator = (styledFunction: Function = styled) =>
+export const createStyledCreator = (styled: Function = defaultStyled) =>
   (baseStyles: Object) => Object.assign(
-    (Element: string | StyledElementType, styles: Object) =>
-      styledFunction(Element, styles, baseStyles),
-    { styles: baseStyles },
+    (TagNameOrStyledElement: TagNameOrStyledElementType, styles: Object) =>
+      styled(TagNameOrStyledElement, styles, baseStyles),
+    {styles: baseStyles},
   )
 
-export default setStyledCreator()
+export default createStyledCreator()

src/tests/App.jsx

@@ -3,11 +3,11 @@ import React from 'react'
 
 export default (styled: Function) => {
   const App = styled('div', {
-    margin: '50px',
+    margin: 50,
   })
 
   const Header = styled('header', {
-    padding: '10px',
+    padding: 10,
   })
 
   const Section = styled('section', {
@@ -23,7 +23,7 @@ export default (styled: Function) => {
   })
 
   const Button = styled('button', {
-    margin: ({ margin = 0 }) => `${margin}px`,
+    margin: ({margin = 0}) => margin,
   })
 
 
@@ -35,7 +35,7 @@ export default (styled: Function) => {
 
       <Section data-name="content">
         <Button>primitive test</Button>
-        <Button _margin={10}>dynamic primitive test</Button>
+        <Button margin={10}>dynamic primitive test</Button>
       </Section>
 
       <AnotherSection>Another section</AnotherSection>

src/tests/__snapshots__/index.spec.jsx.snap

@@ -15,12 +15,12 @@ exports[`test renders correctly App with default Styled 1`] = `
       primitive test
     </button>
     <button
-      className="button-0-19 button-0-16">
+      className="button-0-20 button-0-16">
       dynamic primitive test
     </button>
   </section>
   <section
-    className="section-0-20">
+    className="section-0-22">
     Another section
   </section>
 </div>

src/utils/filter-props.js

@@ -0,0 +1,9 @@
+import isNativeProp from './is-native-prop'
+
+
+export default (props: Object) => Object
+  .entries(props)
+  .reduce((acc, [name, value]) => (isNativeProp(name)
+    ? {...acc, [name]: value}
+    : acc
+  ), {})

src/utils/is-native-prop.js

@@ -0,0 +1,36 @@
+import DOMProperty from 'react-dom/lib/DOMProperty'
+import EventPluginRegistry from 'react-dom/lib/EventPluginRegistry'
+
+
+const reactProps = {
+  children: true,
+  dangerouslySetInnerHTML: true,
+  key: true,
+  ref: true,
+
+  autoFocus: true,
+  defaultValue: true,
+  defaultChecked: true,
+  innerHTML: true,
+  suppressContentEditableWarning: true,
+  onFocusIn: true,
+  onFocusOut: true,
+}
+
+
+export default (prop: string) => {
+  if (
+    Object.prototype.hasOwnProperty.call(DOMProperty, prop) ||
+    DOMProperty.isCustomAttribute(prop)
+  ) {
+    return true
+  }
+  if (Object.prototype.hasOwnProperty.call(reactProps, prop) && reactProps[prop]) {
+    return true
+  }
+  if (Object.prototype.hasOwnProperty.call(EventPluginRegistry.registrationNameModules, prop)) {
+    return true
+  }
+
+  return false
+}