Add SKIP_PREFLIGHT_CHECK as env variable

.eslintrc

@@ -48,11 +48,15 @@
     "no-underscore-dangle": "off",
     "global-require": "off",
     "arrow-body-style": "off",
+    "implicit-arrow-linebreak": "off",
     "object-curly-newline": "off",
     "lines-between-class-members": "off",
+    "function-paren-newline": "off",
     "linebreak-style": "off",
+    "operator-linebreak": "off",
+    "jsx-quotes": "off",
     "no-prototype-builtins": "off",
     "consistent-return": "off",
-    "max-len": ["warn",{ "code": 120 }]
+    "max-len": ["warn", { "code": 120 }]
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "direflow-cli",
-  "version": "3.4.7",
+  "version": "3.4.8",
   "description": "Official CLI for Direflow",
   "main": "dist/index.js",
   "scripts": {
@@ -106,4 +106,4 @@
     ],
     "collectCoverage": true
   }
-}
+}

packages/direflow-component/declarations.d.ts

@@ -1,6 +1,4 @@
-declare module 'style-it';
-
-declare module 'react-shadow';
+declare module 'react-lib-adler32';
 
 declare module '*.css' {
   const classes: { readonly [key: string]: string };

packages/direflow-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "direflow-component",
-  "version": "3.4.7",
+  "version": "3.4.8",
   "description": "Create Web Components using React",
   "main": "dist/index.js",
   "author": "Silind Software",
@@ -20,8 +20,7 @@
     "chalk": "2.4.2",
     "lodash.clonedeep": "4.5.0",
     "node-sass": "4.13.0",
-    "react": "16.13.1",
-    "style-it": "2.1.4",
+    "react-lib-adler32": "^1.0.3",
     "webfontloader": "1.6.28"
   },
   "devDependencies": {
@@ -35,4 +34,4 @@
     "react": "16.13.1",
     "react-dom": "16.13.1"
   }
-}
+}

packages/direflow-component/src/components/Styled.tsx

@@ -1,10 +1,11 @@
 import React, { FC, Component, ReactNode, ComponentClass, CSSProperties } from 'react';
-import Style from 'style-it';
+import Style from '../helpers/styleInjector';
 
 type TStyles = string | string[] | CSSProperties | CSSProperties[];
 
 interface IStyled {
   styles: TStyles;
+  scoped?: boolean;
   children: ReactNode | ReactNode[];
 }
 
@@ -19,7 +20,12 @@ const Styled: FC<IStyled> = (props): JSX.Element => {
     );
   }
 
-  return Style.it(styles, props.children);
+  return (
+    <Style scoped={props.scoped}>
+      {styles}
+      {props.children}
+    </Style>
+  );
 };
 
 const withStyles = (styles: TStyles) => <P, S>(WrappedComponent: ComponentClass<P, S> | FC<P>) => {