feat: Add style checker

.gitignore

@@ -26,4 +26,5 @@ lib
 coverage
 yarn.lock
 /es/
-package-lock.json
+package-lock.json
+.doc

examples/styleChecker.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { isStyleSupport, isStyleValueSupport } from '../src/Dom/styleChecker';
+
+export default () => {
+  const supportFlex = isStyleSupport('flex');
+  const supportSticky = isStyleValueSupport('position', 'sticky');
+  const supportNotExistValue = isStyleValueSupport('position', 'sticky2');
+
+  return (
+    <ul>
+      <li key="flex">supportFlex: {String(supportFlex)}</li>
+      <li key="sticky">supportSticky: {String(supportSticky)}</li>
+      <li key="not-exist">
+        supportNotExistValue: {String(supportNotExistValue)}
+      </li>
+    </ul>
+  );
+};

now.json

@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "name": "rc-util",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": { "distDir": ".doc" }
+    }
+  ]
+}

package.json

@@ -25,7 +25,8 @@
     "compile": "father build",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "test": "father test",
-    "coverage": "father test --coverage && cat ./coverage/lcov.info | coveralls"
+    "coverage": "father test --coverage && cat ./coverage/lcov.info | coveralls",
+    "now-build": "father doc build --storybook"
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.5",

src/Dom/styleChecker.ts

@@ -0,0 +1,22 @@
+import canUseDom from './canUseDom';
+
+export const isStyleSupport = (styleName: string | string[]): boolean => {
+  if (canUseDom() && window.document.documentElement) {
+    const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
+    const { documentElement } = window.document;
+
+    return styleNameList.some(name => name in documentElement.style);
+  }
+  return false;
+};
+
+export const isStyleValueSupport = (styleName: string, value: any) => {
+  if (!isStyleSupport(styleName)) {
+    return false;
+  }
+
+  const ele = document.createElement('div');
+  const origin = ele.style[styleName];
+  ele.style[styleName] = value;
+  return ele.style[styleName] !== origin;
+};

tests/style.test.js

@@ -0,0 +1,8 @@
+import { isStyleSupport } from '../src/Dom/styleChecker';
+
+describe('StyleChecker', () => {
+  it('isStyleSupport', () => {
+    expect(isStyleSupport('position')).toBeTruthy();
+    expect(isStyleSupport('not-exist')).toBeFalsy();
+  });
+});