enable css prop in react element

aragon · Jun 23, 2021 · 33b94f9 · 33b94f9
1 parent 74451f6
commit 33b94f9
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 5 deletions.
diff --git a/packages/govern-console/.babelrc b/packages/govern-console/.babelrc
@@ -0,0 +1,4 @@
+{
+  "plugins": [["styled-components", { "displayName": true }]]
+}
+
diff --git a/packages/govern-console/config-overrides.js b/packages/govern-console/config-overrides.js
@@ -0,0 +1,4 @@
+// Use a custom babel configuration with CRA
+const { useBabelRc, override } = require('customize-cra')
+
+module.exports = override(useBabelRc())
diff --git a/packages/govern-console/package.json b/packages/govern-console/package.json
@@ -55,15 +55,15 @@
   "scripts": {
     "sync-assets": "copy-aragon-ui-assets ./public",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "yarn sync-assets && react-scripts start",
+    "start": "yarn sync-assets && react-app-rewired start",
     "start:mainnet": "cross-env REACT_APP_ENVIRONMENT=mainnet yarn start",
     "start:rinkeby": "cross-env REACT_APP_ENVIRONMENT=rinkeby yarn start",
     "start:staging": "cross-env REACT_APP_ENVIRONMENT=staging yarn start",
-    "build": "yarn sync-assets && react-scripts build",
+    "build": "yarn sync-assets && react-app-rewired build",
     "build:mainnet": "cross-env REACT_APP_ENVIRONMENT=mainnet yarn build",
     "build:rinkeby": "cross-env REACT_APP_ENVIRONMENT=rinkeby yarn build",
     "build:staging": "cross-env REACT_APP_ENVIRONMENT=staging yarn build",
-    "test": "react-scripts test",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
@@ -105,11 +105,14 @@
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
     "babel-loader": "8.1.0",
+    "babel-plugin-styled-components": "^1.12.0",
     "cross-env": "^7.0.3",
+    "customize-cra": "^1.0.0",
     "eslint-config-prettier": "4.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^5.2.0",
-    "prettier": "^2.2.1"
+    "prettier": "^2.2.1",
+    "react-app-rewired": "^2.1.8"
   }
 }
diff --git a/packages/govern-console/src/global.d.ts b/packages/govern-console/src/global.d.ts
@@ -0,0 +1,9 @@
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-780019806
+import { CSSProp } from 'styled-components';
+import 'styled-components/cssprop';
+
+declare module 'react' {
+  interface DOMAttributes<T> {
+    css?: CSSProp;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -7740,7 +7740,7 @@ babel-plugin-react-docgen@^4.1.0, babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
-"babel-plugin-styled-components@>= 1.12.0":
+"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^1.12.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9"
   integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==
@@ -10475,6 +10475,13 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
+customize-cra@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/customize-cra/-/customize-cra-1.0.0.tgz#73286563631aa08127ad4d30a2e3c89cf4e93c8d"
+  integrity sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==
+  dependencies:
+    lodash.flow "^3.5.0"
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -18939,6 +18946,11 @@ lodash.flatten@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
   integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
 
+lodash.flow@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -23383,6 +23395,13 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-app-rewired@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.8.tgz#e192f93b98daf96889418d33d3e86cf863812b56"
+  integrity sha512-wjXPdKPLscA7mn0I1de1NHrbfWdXz4S1ladaGgHVKdn1hTgKK5N6EdGIJM0KrS6bKnJBj7WuqJroDTsPKKr66Q==
+  dependencies:
+    semver "^5.6.0"
+
 react-blockies@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/react-blockies/-/react-blockies-1.4.1.tgz#d4f0faf95ac197213a297a370a4d7f77ea3d0b08"