[chore] Upgrade styled components to v6

bindings/kepler.gl-jupyter/js/package.json

@@ -92,7 +92,7 @@
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
     "redux-actions": "^2.2.1",
-    "styled-components": "^4.1.3"
+    "styled-components": "6.1.8"
   },
   "resolutions": {
     "@deck.gl/core": "^8.9.27",

bindings/kepler.gl-jupyter/js/yarn.lock

@@ -1729,6 +1729,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@emotion/is-prop-valid@npm:1.2.1"
+  dependencies:
+    "@emotion/memoize": "npm:^0.8.1"
+  checksum: 10c0/7c2aabdf0ca9986ca25abc9dae711348308cf18d418d64ffa4c8ffd2114806c47f2e06ba8ee769f38ec67d65bd59ec73f34d94023e81baa1c43510ac86ccd5e6
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:^0.8.1":
   version: 0.8.8
   resolution: "@emotion/is-prop-valid@npm:0.8.8"
@@ -1745,6 +1754,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/memoize@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/memoize@npm:0.8.1"
+  checksum: 10c0/dffed372fc3b9fa2ba411e76af22b6bb686fb0cb07694fdfaa6dd2baeb0d5e4968c1a7caa472bfcf06a5997d5e7c7d16b90e993f9a6ffae79a2c3dbdc76dfe78
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:0.8.0":
+  version: 0.8.0
+  resolution: "@emotion/unitless@npm:0.8.0"
+  checksum: 10c0/1f2cfb7c0ccb83c20b1c6d8d92a74a93da4b2a440f9a0d49ded08647faf299065a2ffde17e1335920fa10397b85f8635bbfe14f3cd29222a59ea81d978478072
+  languageName: node
+  linkType: hard
+
 "@emotion/unitless@npm:^0.7.0":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
@@ -4918,6 +4941,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@types/stylis@npm:4.2.0"
+  checksum: 10c0/c76c13e76ca485f598a13984cfb5e07bb88a851da5bee213587424a5f101f182c74f4f92d633cebf9abcec40ccebb645d600d184b7e4b42793e3eeca8729b110
+  languageName: node
+  linkType: hard
+
 "@types/supercluster@npm:^7.1.0, @types/supercluster@npm:^7.1.3":
   version: 7.1.3
   resolution: "@types/supercluster@npm:7.1.3"
@@ -7351,6 +7381,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-to-react-native@npm:3.2.0":
+  version: 3.2.0
+  resolution: "css-to-react-native@npm:3.2.0"
+  dependencies:
+    camelize: "npm:^1.0.0"
+    css-color-keywords: "npm:^1.0.0"
+    postcss-value-parser: "npm:^4.0.2"
+  checksum: 10c0/fde850a511d5d3d7c55a1e9b8ed26b69a8ad4868b3487e36ebfbfc0b96fc34bc977d9cd1d61a289d0c74d3f9a662d8cee297da53d4433bf2e27d6acdff8e1003
+  languageName: node
+  linkType: hard
+
 "css-to-react-native@npm:^2.2.2":
   version: 2.3.2
   resolution: "css-to-react-native@npm:2.3.2"
@@ -7385,6 +7426,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:3.1.2":
+  version: 3.1.2
+  resolution: "csstype@npm:3.1.2"
+  checksum: 10c0/32c038af259897c807ac738d9eab16b3d86747c72b09d5c740978e06f067f9b7b1737e1b75e407c7ab1fe1543dc95f20e202b4786aeb1b8d3bdf5d5ce655e6c6
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -11549,7 +11597,7 @@ __metadata:
     redux: "npm:^4.2.1"
     redux-actions: "npm:^2.2.1"
     rimraf: "npm:^2.6.1"
-    styled-components: "npm:^4.1.3"
+    styled-components: "npm:6.1.8"
     webpack: "npm:^4.29.0"
     webpack-cli: "npm:^3.2.1"
     webpack-dev-middleware: "npm:^3.5.1"
@@ -12685,6 +12733,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.6":
+  version: 3.3.8
+  resolution: "nanoid@npm:3.3.8"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.7":
   version: 3.3.7
   resolution: "nanoid@npm:3.3.7"
@@ -13670,13 +13727,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
+"postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
   checksum: 10c0/f4142a4f56565f77c1831168e04e3effd9ffcc5aebaf0f538eee4b2d465adfd4b85a44257bb48418202a63806a7da7fe9f56c330aebb3cac898e46b4cbf49161
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.31":
+  version: 8.4.31
+  resolution: "postcss@npm:8.4.31"
+  dependencies:
+    nanoid: "npm:^3.3.6"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.0.2"
+  checksum: 10c0/748b82e6e5fc34034dcf2ae88ea3d11fd09f69b6c50ecdd3b4a875cfc7cdca435c958b211e2cb52355422ab6fccb7d8f2f2923161d7a1b281029e4a913d59acf
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.33":
   version: 8.4.41
   resolution: "postcss@npm:8.4.41"
@@ -15366,7 +15434,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.0.1":
+"shallowequal@npm:1.1.0, shallowequal@npm:^1.0.1":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: 10c0/b926efb51cd0f47aa9bc061add788a4a650550bbe50647962113a4579b60af2abe7b62f9b02314acc6f97151d4cf87033a2b15fc20852fae306d1a095215396c
@@ -15586,6 +15654,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.0.2":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "source-map-js@npm:1.2.0"
@@ -16049,6 +16124,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styled-components@npm:6.1.8":
+  version: 6.1.8
+  resolution: "styled-components@npm:6.1.8"
+  dependencies:
+    "@emotion/is-prop-valid": "npm:1.2.1"
+    "@emotion/unitless": "npm:0.8.0"
+    "@types/stylis": "npm:4.2.0"
+    css-to-react-native: "npm:3.2.0"
+    csstype: "npm:3.1.2"
+    postcss: "npm:8.4.31"
+    shallowequal: "npm:1.1.0"
+    stylis: "npm:4.3.1"
+    tslib: "npm:2.5.0"
+  peerDependencies:
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: 10c0/fafe4b9198d5d7980c2358821d1a89f86200d55c8eec03670cf12cf43b8a05a77eafaf0872cd85821f68238308e0f5c9d9aa43a62e6987c65b70baa2c3277ab8
+  languageName: node
+  linkType: hard
+
 "styled-components@npm:^4.1.3":
   version: 4.4.1
   resolution: "styled-components@npm:4.4.1"
@@ -16082,6 +16177,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.3.1":
+  version: 4.3.1
+  resolution: "stylis@npm:4.3.1"
+  checksum: 10c0/33e8ebd2bfa5f0bd0215f718dc2d3be896e1d00c5bcaeb9a4ae03cf239db6867af9eee230f57229bf1c29499357073ba3e6b547484ba1db2f5de1e8be7d4eee9
+  languageName: node
+  linkType: hard
+
 "stylis@npm:^3.5.0":
   version: 3.5.4
   resolution: "stylis@npm:3.5.4"
@@ -16522,6 +16624,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.5.0":
+  version: 2.5.0
+  resolution: "tslib@npm:2.5.0"
+  checksum: 10c0/e32fc99cc730dd514e53c44e668d76016e738f0bcc726aad5dbd2d335cf19b87a95a9b1e4f0a9993e370f1d702b5e471cdd4acabcac428a3099d496b9af2021e
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"

examples/custom-map-style/package.json

@@ -13,7 +13,7 @@
     "react-redux": "^8.0.5",
     "react-virtualized": "^9.21.0",
     "redux-actions": "^2.2.1",
-    "styled-components": "^4.1.3"
+    "styled-components": "6.1.8"
   },
   "devDependencies": {
     "@babel/core": "^7.12.1",

examples/custom-reducer/package.json

@@ -14,7 +14,7 @@
     "react-redux": "^8.0.5",
     "react-virtualized": "^9.21.0",
     "redux-actions": "^2.2.1",
-    "styled-components": "^4.1.3"
+    "styled-components": "6.1.8"
   },
   "devDependencies": {
     "@babel/core": "^7.12.1",

examples/custom-theme/package.json

@@ -13,7 +13,7 @@
     "react-redux": "^8.0.5",
     "react-virtualized": "^9.21.0",
     "redux-actions": "^2.2.1",
-    "styled-components": "^4.1.3"
+    "styled-components": "6.1.8"
   },
   "devDependencies": {
     "@babel/core": "^7.12.1",

examples/demo-app/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@auth0/auth0-spa-js": "^2.1.2",
     "@carto/toolkit": "0.0.1-rc.18",
+    "@emotion/is-prop-valid": "^1.2.1",
     "@kepler.gl/actions": "^3.0.0-alpha.1",
     "@kepler.gl/cloud-providers": "^3.0.0-alpha.1",
     "@kepler.gl/components": "^3.0.0-alpha.1",
@@ -46,7 +47,7 @@
     "redux-actions": "^2.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^1.0.0",
-    "styled-components": "^4.1.3"
+    "styled-components": "6.1.8"
   },
   "resolutions": {
     "@luma.gl/core": "8.5.21",

examples/demo-app/src/app.tsx

@@ -3,11 +3,12 @@
 
 import React, {useCallback, useEffect, useRef, useMemo, useState} from 'react';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
-import styled, {ThemeProvider} from 'styled-components';
+import styled, {ThemeProvider, StyleSheetManager} from 'styled-components';
 import window from 'global/window';
 import {connect, useDispatch} from 'react-redux';
 import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'lodash.isequal';
+import isPropValid from '@emotion/is-prop-valid';
 
 import {ScreenshotWrapper} from 'react-ai-assist';
 import {
@@ -43,7 +44,7 @@
 // Sample data
 /* eslint-disable no-unused-vars */
 import sampleTripData, {testCsvData, sampleTripDataConfig} from './data/sample-trip-data';
 import sampleGeojson from './data/sample-small-geojson';
 import sampleGeojsonPoints from './data/sample-geojson-points';
 import sampleGeojsonConfig from './data/sample-geojson-config';
 import sampleH3Data, {config as h3MapConfig} from './data/sample-hex-id-csv';
@@ -61,6 +62,16 @@
 import {processCsvData, processGeojson, processRowObject} from '@kepler.gl/processors';
 /* eslint-enable no-unused-vars */
 
+// This implements the default behavior from styled-components v5
+function shouldForwardProp(propName, target) {
+  if (typeof target === 'string') {
+    // For HTML elements, forward the prop if it is a valid HTML attribute
+    return isPropValid(propName);
+  }
+  // For other elements, forward all props
+  return true;
+}
+
 const BannerHeight = 48;
 const BannerKey = `banner-${FormLink}`;
 const keplerGlGetState = state => state.demo.keplerGl;
@@ -170,7 +181,7 @@
   );
 
   // eslint-disable-next-line no-unused-vars
   const _showBanner = useCallback(() => {
     toggleShowBanner(true);
   }, [toggleShowBanner]);
 
@@ -532,7 +543,7 @@
   }, []);
 
   // eslint-disable-next-line no-unused-vars
   const _loadSampleData = useCallback(() => {
     // _loadPointData();
     // _loadGeojsonData();
     // _loadTripGeoJson();
@@ -563,49 +574,51 @@
   ]);
 
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle
-      // this is to apply the same modal style as kepler.gl core
-      // because styled-components doesn't always return a node
-      // https://github.com/styled-components/styled-components/issues/617
-      // ref={node => {
-      //   node ? (this.root = node) : null;
-      // }}
-      >
-        <ScreenshotWrapper
-          startScreenCapture={props.demo.aiAssistant.screenshotToAsk.startScreenCapture}
-          setScreenCaptured={_setScreenCaptured}
-          setStartScreenCapture={_setStartScreenCapture}
+    <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle
+        // this is to apply the same modal style as kepler.gl core
+        // because styled-components doesn't always return a node
+        // https://github.com/styled-components/styled-components/issues/617
+        // ref={node => {
+        //   node ? (this.root = node) : null;
+        // }}
         >
-          <Banner show={showBanner} height={BannerHeight} bgColor="#2E7CF6" onClose={hideBanner}>
-            <Announcement onDisable={_disableBanner} />
-          </Banner>
-          <div style={CONTAINER_STYLE}>
-            <div style={{flexGrow: 1}}>
-              <AutoSizer>
-                {({height, width}) => (
-                  <KeplerGl
-                    mapboxApiAccessToken={CLOUD_PROVIDERS_CONFIGURATION.MAPBOX_TOKEN}
-                    id="map"
-                    /*
-                     * Specify path to keplerGl state, because it is not mount at the root
-                     */
-                    getState={keplerGlGetState}
-                    width={width}
-                    height={height}
-                    cloudProviders={CLOUD_PROVIDERS}
-                    localeMessages={combinedMessages}
-                    onExportToCloudSuccess={onExportFileSuccess}
-                    onLoadCloudMapSuccess={onLoadCloudMapSuccess}
-                    featureFlags={DEFAULT_FEATURE_FLAGS}
-                  />
-                )}
-              </AutoSizer>
+          <ScreenshotWrapper
+            startScreenCapture={props.demo.aiAssistant.screenshotToAsk.startScreenCapture}
+            setScreenCaptured={_setScreenCaptured}
+            setStartScreenCapture={_setStartScreenCapture}
+          >
+            <Banner show={showBanner} height={BannerHeight} bgColor="#2E7CF6" onClose={hideBanner}>
+              <Announcement onDisable={_disableBanner} />
+            </Banner>
+            <div style={CONTAINER_STYLE}>
+              <div style={{flexGrow: 1}}>
+                <AutoSizer>
+                  {({height, width}) => (
+                    <KeplerGl
+                      mapboxApiAccessToken={CLOUD_PROVIDERS_CONFIGURATION.MAPBOX_TOKEN}
+                      id="map"
+                      /*
+                       * Specify path to keplerGl state, because it is not mount at the root
+                       */
+                      getState={keplerGlGetState}
+                      width={width}
+                      height={height}
+                      cloudProviders={CLOUD_PROVIDERS}
+                      localeMessages={combinedMessages}
+                      onExportToCloudSuccess={onExportFileSuccess}
+                      onLoadCloudMapSuccess={onLoadCloudMapSuccess}
+                      featureFlags={DEFAULT_FEATURE_FLAGS}
+                    />
+                  )}
+                </AutoSizer>
+              </div>
             </div>
-          </div>
-        </ScreenshotWrapper>
-      </GlobalStyle>
-    </ThemeProvider>
+          </ScreenshotWrapper>
+        </GlobalStyle>
+      </ThemeProvider>
+    </StyleSheetManager>
   );
 };
 

examples/demo-app/src/components/announcement.js

@@ -14,7 +14,7 @@ const StyledLink = styled.a`
   font-weight: 500;
   margin-left: 8px;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;