refactor: replace emotion valid props with own solution

package.json

@@ -55,11 +55,12 @@
     "styled"
   ],
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.1.0",
     "classcat": "^5.0.3",
+    "html-attributes": "^1.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "style-vendorizer": "^2.1.1"
+    "style-vendorizer": "^2.1.1",
+    "svg-attributes": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",

src/lib/construct.ts

@@ -5,7 +5,7 @@ import generateDisplayName from '@src/utils/generateDisplayName';
 import hash from '@src/utils/hash';
 import insertDynamicCSSRule from '@src/utils/insertDynamicCSSRule';
 import isType from '@src/utils/isType';
-import isValidProp from '@emotion/is-prop-valid';
+import isValidProp from '@src/utils/isValidProp';
 import prefixCSSDeclaration from '@src/utils/prefixCSSDeclaration';
 import { createElement, forwardRef } from 'react';
 import type { ChicProps, ConstructOptions, ExtendableObject } from '@types';

src/store/attributes.ts

@@ -0,0 +1,18 @@
+import htmlAttributes from 'html-attributes';
+import svgAttributes from 'svg-attributes';
+
+const reactAttributes = {
+  autoFocus: true,
+  children: true,
+  dangerouslySetInnerHTML: true,
+  defaultChecked: true,
+  defaultValue: true,
+  innerHTML: true,
+  key: true,
+  ref: true,
+  suppressContentEditableWarning: true,
+  suppressHydrationWarning: true,
+  valueLink: true,
+};
+
+export const ATTRIBUTES = Object.assign({}, htmlAttributes, reactAttributes, svgAttributes);

src/utils/isValidProp.ts

@@ -0,0 +1,8 @@
+import { ATTRIBUTES } from '@src/store/attributes';
+
+export default function isValidProp(prop: string) {
+  const isDOMAttribute = !!ATTRIBUTES[prop];
+  const isEventDataAriaProp = /^(([Aa][Rr][Ii][Aa]|[Dd][Aa][Tt][Aa])-.+)|(on[A-Z])/.test(prop);
+
+  return isDOMAttribute || isEventDataAriaProp;
+}

test/utils/isValidProps.test.ts

@@ -0,0 +1,15 @@
+import isValidProp from '@src/utils/isValidProp';
+
+describe('utils/isValidProp', () => {
+  it('should return true for valid DOM/React props', () => {
+    const props = ['aria-label', 'data-key', 'className', 'children', 'onClick'];
+
+    props.forEach((prop) => expect(isValidProp(prop)).toBe(true));
+  });
+
+  it('should return false for invalid DOM/React props', () => {
+    const props = ['isPrimary', 'hasBorder', 'withTextColor'];
+
+    props.forEach((prop) => expect(isValidProp(prop)).toBe(false));
+  });
+});

tsconfig.json

@@ -26,5 +26,7 @@
     "strict": true,
     "target": "esnext",
     "typeRoots": ["./types", "./node_modules/@types"]
-  }
+  },
+
+  "include": ["src/**/*", "types/**/*"]
 }

types/index.d.ts

@@ -1,6 +1,18 @@
 import tags from './tags';
 import type { ComponentType, ForwardRefExoticComponent, PropsWithoutRef } from 'react';
 
+declare module 'html-attributes' {
+  const attributes: { [key: string]: string };
+
+  export default attributes;
+}
+
+declare module 'svg-attributes' {
+  const attributes: { [key: string]: string };
+
+  export default attributes;
+}
+
 export type ExtendableObject<T = any> = { [key: string]: T };
 
 export type AttrProps = ExtendableObject;