From bf02ea661c7eaf17fcb24afa31f5569fc2dc090a Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Mon, 22 Jan 2024 18:07:47 -0600 Subject: [PATCH] Revert "chore: remove styled-components" This reverts commit 4a9f8480534ad88fdaaec2ddff7fde8d910d272a. --- example/package.json | 2 + example/src/App.tsx | 23 +++--- example/src/styles.css | 139 ---------------------------------- example/src/styles.tsx | 166 +++++++++++++++++++++++++++++++++++++---- yarn.lock | 118 ++++++++++++++++++++++++++++- 5 files changed, 282 insertions(+), 166 deletions(-) delete mode 100644 example/src/styles.css diff --git a/example/package.json b/example/package.json index 11cf779381..611a584283 100644 --- a/example/package.json +++ b/example/package.json @@ -16,6 +16,7 @@ "react-dom": "^18.2.0", "react-merge-refs": "^2.1.1", "react-use-refs": "^1.0.1", + "styled-components": "^6.1.8", "three": "^0.160.0", "three-stdlib": "^2.29.1", "use-error-boundary": "^2.0.6", @@ -24,6 +25,7 @@ }, "devDependencies": { "@types/react": "^18.2.47", + "@types/styled-components": "^5.1.34", "@vitejs/plugin-react-refresh": "^1.3.6", "typescript": "^5.3.3", "vite": "^5.0.11" diff --git a/example/src/App.tsx b/example/src/App.tsx index ea8150acac..e70dc1a95d 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { useErrorBoundary } from 'use-error-boundary' import { Route, useRoute, Redirect } from 'wouter' -import { Loading, Page, DemoPanel, Dot, Error } from './styles' +import { Global, Loading, Page, DemoPanel, Dot, Error } from './styles' import * as demos from './demos' @@ -47,14 +47,17 @@ export default function App() { const dev = new URLSearchParams(location.search).get('dev') return ( - - }> - } /> - - - - - {dev === null && } - + <> + + + }> + } /> + + + + + {dev === null && } + + ) } diff --git a/example/src/styles.css b/example/src/styles.css deleted file mode 100644 index 437d09456c..0000000000 --- a/example/src/styles.css +++ /dev/null @@ -1,139 +0,0 @@ -* { - box-sizing: border-box; -} - -html, -body, -#root { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - overflow: hidden; -} - -#root { - overflow: auto; -} - -body { - position: fixed; - overflow: hidden; - overscroll-behavior-y: none; - font-family: 'Inter var', sans-serif; - color: black; - background: #dedddf !important; -} - -canvas { - touch-action: none; -} - -.container { - position: relative; - width: 100%; - height: 100%; -} - -.text { - line-height: 1em; - text-align: left; - font-size: 8em; - word-break: break-word; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.Page { - position: relative; - width: 100%; - height: 100vh; - - & > h1 { - font-family: 'Roboto', sans-serif; - font-weight: 900; - font-size: 8em; - margin: 0; - color: white; - line-height: 0.59em; - letter-spacing: -2px; - } - - & > h1 { - position: absolute; - top: 70px; - left: 60px; - } - - & > span { - position: absolute; - bottom: 60px; - right: 60px; - } - - @media only screen and (max-width: 1000px) { - & > h1 { - font-size: 5em; - letter-spacing: -1px; - } - } - - & > a { - margin: 0; - color: white; - text-decoration: none; - } -} - -.DemoPanel { - z-index: 1000; - position: absolute; - bottom: 50px; - left: 50px; - max-width: 250px; -} - -.Dot { - display: inline-block; - width: 20px; - height: 20px; - border-radius: 50%; - margin: 8px; -} - -.LoadingContainer { - position: fixed; - inset: 0; - z-index: 100; - display: flex; - align-items: center; - justify-content: center; - - background-color: #dedddf; - color: white; -} - -.LoadingMessage { - font-family: 'Inter', Helvetica, sans-serif; -} - -.StyledError { - position: absolute; - padding: 10px 20px; - bottom: unset; - right: unset; - top: 60px; - left: 60px; - max-width: 380px; - border: 2px solid #ff5050; - color: #ff5050; -} diff --git a/example/src/styles.tsx b/example/src/styles.tsx index d9ad9e4a46..db509b6ed9 100644 --- a/example/src/styles.tsx +++ b/example/src/styles.tsx @@ -1,24 +1,160 @@ import * as React from 'react' -import { Link, LinkProps } from 'wouter' -// import '@pmndrs/branding/styles.css' -import './styles.css' +import styled, { createGlobalStyle } from 'styled-components' +import { Link } from 'wouter' -type DivProps = Partial> +const Page = styled.div` + position: relative; + width: 100%; + height: 100vh; -export const Page = (props: DivProps) =>
+ & > h1 { + font-family: 'Roboto', sans-serif; + font-weight: 900; + font-size: 8em; + margin: 0; + color: white; + line-height: 0.59em; + letter-spacing: -2px; + } -export const DemoPanel = (props: DivProps) =>
+ & > h1 { + position: absolute; + top: 70px; + left: 60px; + } -export const Dot = (props: LinkProps) => + & > span { + position: absolute; + bottom: 60px; + right: 60px; + } -const LoadingContainer = (props: DivProps) =>
+ @media only screen and (max-width: 1000px) { + & > h1 { + font-size: 5em; + letter-spacing: -1px; + } + } -const LoadingMessage = (props: DivProps) =>
+ & > a { + margin: 0; + color: white; + text-decoration: none; + } +` -export const Loading = () => ( - - Loading. - -) +const Global = createGlobalStyle` + @import url('@pmndrs/branding/styles.css'); -export const Error = (props: DivProps) =>
+ * { + box-sizing: border-box; + } + + html, + body, + #root { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + overflow: hidden; + } + + #root { + overflow: auto; + } + + body { + position: fixed; + overflow: hidden; + overscroll-behavior-y: none; + font-family: 'Inter var', sans-serif; + color: black; + background: #dedddf !important; + } + + canvas { + touch-action: none; + } + + .container { + position: relative; + width: 100%; + height: 100%; + } + + .text { + line-height: 1em; + text-align: left; + font-size: 8em; + word-break: break-word; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +` +export const DemoPanel = styled.div` + z-index: 1000; + position: absolute; + bottom: 50px; + left: 50px; + max-width: 250px; +` + +export const Dot = styled(Link)` + display: inline-block; + width: 20px; + height: 20px; + border-radius: 50%; + margin: 8px; +` + +const LoadingContainer = styled.div` + position: fixed; + inset: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + + background-color: #dedddf; + color: white; +` + +const LoadingMessage = styled.div` + font-family: 'Inter', Helvetica, sans-serif; +` + +export const Loading = () => { + return ( + + Loading. + + ) +} + +const StyledError = styled.div` + position: absolute; + padding: 10px 20px; + bottom: unset; + right: unset; + top: 60px; + left: 60px; + max-width: 380px; + border: 2px solid #ff5050; + color: #ff5050; +` + +export const Error = ({ children }: React.PropsWithChildren<{}>) => { + return {children} +} + +export { Global, Page } diff --git a/yarn.lock b/yarn.lock index 24432458b7..78c25d47de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1538,6 +1538,23 @@ dependencies: "@jridgewell/trace-mapping" "0.3.9" +"@emotion/is-prop-valid@1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" + integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== + dependencies: + "@emotion/memoize" "^0.8.1" + +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/unitless@0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + "@esbuild/aix-ppc64@0.19.11": version "0.19.11" resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3" @@ -2833,6 +2850,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/is-ci@^3.0.0": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/is-ci/-/is-ci-3.0.0.tgz#7e8910af6857601315592436f030aaa3ed9783c3" @@ -3011,6 +3036,20 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== +"@types/styled-components@^5.1.34": + version "5.1.34" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.34.tgz#4107df8ef8a7eaba4fa6b05f78f93fba4daf0300" + integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + +"@types/stylis@4.2.0": + version "4.2.0" + resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b" + integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw== + "@types/three@^0.139.0": version "0.139.0" resolved "https://registry.yarnpkg.com/@types/three/-/three-0.139.0.tgz#69af1f0c52f8eea390f513e05478af1dd7f49e6f" @@ -3928,6 +3967,11 @@ camelcase@^6.0.0, camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + camera-controls@^2.4.2: version "2.7.3" resolved "https://registry.yarnpkg.com/camera-controls/-/camera-controls-2.7.3.tgz#99e0449f68d203bf5f98f6c4ac0021c10b5c13a8" @@ -4313,6 +4357,20 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + +css-to-react-native@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" + integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + cssom@^0.4.4: version "0.4.4" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10" @@ -4330,6 +4388,11 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" +csstype@3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" + integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== + csstype@^3.0.2: version "3.0.11" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" @@ -5635,6 +5698,13 @@ hermes-profile-transformer@^0.0.6: dependencies: source-map "^0.7.3" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^2.1.4: version "2.8.9" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" @@ -7945,7 +8015,7 @@ multimatch@^4.0.0: arrify "^2.0.1" minimatch "^3.0.4" -nanoid@^3.3.7: +nanoid@^3.3.6, nanoid@^3.3.7: version "3.3.7" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== @@ -8518,6 +8588,20 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= +postcss-value-parser@^4.0.2: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + +postcss@8.4.31: + version "8.4.31" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" + integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== + dependencies: + nanoid "^3.3.6" + picocolors "^1.0.0" + source-map-js "^1.0.2" + postcss@^8.4.32: version "8.4.33" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742" @@ -8722,7 +8806,7 @@ react-dom@^18.2.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.0.0.tgz#026f6c4a27dbe33bf4a35655b9e1327c4e55e3f5" integrity sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw== -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -9336,6 +9420,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -9772,6 +9861,26 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +styled-components@^6.1.8: + version "6.1.8" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201" + integrity sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw== + dependencies: + "@emotion/is-prop-valid" "1.2.1" + "@emotion/unitless" "0.8.0" + "@types/stylis" "4.2.0" + css-to-react-native "3.2.0" + csstype "3.1.2" + postcss "8.4.31" + shallowequal "1.1.0" + stylis "4.3.1" + tslib "2.5.0" + +stylis@4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb" + integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ== + sudo-prompt@^9.0.0: version "9.2.1" resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd" @@ -10092,6 +10201,11 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" +tslib@2.5.0: + version "2.5.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" + integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== + tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"