feat(serialize): Bump csstype

.changeset/spotty-cars-camp.md

@@ -0,0 +1,8 @@
+---
+'@emotion/core': minor
+'@emotion/css': minor
+'@emotion/serialize': minor
+'@emotion/styled': minor
+---
+
+Upgraded [`csstype`](https://www.npmjs.com/package/csstype) dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.

README.md

@@ -87,6 +87,7 @@ Look here 👉 _[emotion babel plugin feature table and documentation](https://g
 - [polished](https://github.com/styled-components/polished) - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.
 - [monad-ui](https://github.com/muhajirdev/monad-ui/) - Utility First CSS-In-JS
 - [css-in-js-media](https://github.com/zx6658/css-in-js-media) - you can deal with responsive design using css-in-js easily with this `css-in-js-media` which is similar with include-media
+- [emotion-native-extended](https://github.com/ItsWendell/emotion-native-extended) - Better styling support for Emotion Native with [React Native Extended Stylesheet](https://github.com/vitalets/react-native-extended-stylesheet)
 
 ### In the Wild
 

packages/serialize/package.json

@@ -18,7 +18,7 @@
     "@emotion/memoize": "0.7.4",
     "@emotion/unitless": "0.7.5",
     "@emotion/utils": "1.0.0-next.0",
-    "csstype": "^2.6.7"
+    "csstype": "^3.0.2"
   },
   "devDependencies": {
     "dtslint": "^0.3.0"

packages/serialize/types/tslint.json

@@ -1,12 +1,9 @@
 {
-    "extends": "dtslint/dtslint.json",
-    "rules": {
-        "array-type": [
-            true,
-            "generic"
-        ],
-        "semicolon": false,
-        "no-null-undefined-union": false,
-        "callable-types": false
-    }
-}
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "array-type": [true, "generic"],
+    "semicolon": false,
+    "no-null-undefined-union": false,
+    "callable-types": false
+  }
+}

site/src/components/DocWrapper.js

@@ -177,10 +177,7 @@ export default ({
                   'none',
                   'none',
                   `1px solid ${colors.lighten(0.25, colors.border)}`
-                ],
-                filter: 'grayscale(100%)',
-                // needed for the filter above, Chrome messed up layers without it
-                zIndex: 1
+                ]
               })}
             >
               <Search />
@@ -211,8 +208,7 @@ export default ({
                 ],
                 gridRow: 2,
                 gridColumn: ['1 / span 2', '1 / span 2', '1 / span 1'],
-                paddingRight: [0, 0, 0],
-                filter: 'grayscale(100%)'
+                paddingRight: [0, 0, 0]
               })}
             >
               {children}

site/src/components/SiteHeader.js

@@ -64,8 +64,7 @@ export default function SiteHeader() {
           paddingTop: 24,
           display: 'flex',
           alignItems: 'center',
-          paddingBottom: space[2],
-          filter: 'grayscale(100%)'
+          paddingBottom: space[2]
         }}
       >
         <Link

site/src/pages/404.js

@@ -7,14 +7,8 @@ const NotFoundPage = () => {
   const title = 'NOT FOUND'
   return (
     <Layout title={title}>
-      <div
-        css={{
-          filter: 'grayscale(100%)'
-        }}
-      >
-        <h1>{title}</h1>
-        <p>You just hit a route that doesn&#39;t exist... the sadness.😢</p>
-      </div>
+      <h1>{title}</h1>
+      <p>You just hit a route that doesn&#39;t exist... the sadness.😢</p>
     </Layout>
   )
 }

site/src/pages/community.js

@@ -16,8 +16,7 @@ const Community = (props: *) => {
     <Layout title={title}>
       <div
         css={mq({
-          gridColumn: '1 / span 2',
-          filter: 'grayscale(100%)'
+          gridColumn: '1 / span 2'
         })}
       >
         <div>

site/src/utils/style.js

@@ -16,7 +16,7 @@ export const colors = {
   darken2: darken(0.15),
   darken3: darken(0.2),
   reallyLightPink: '#f9e9fb',
-  hightlight: '#D36AC2',
+  hightlight: '#C43BAD',
   border: '#C865B9',
   bg: '#FAF9FA',
   color: '#1B1D1D',

yarn.lock

@@ -7287,11 +7287,16 @@ cssstyle@^2.0.0, cssstyle@^2.2.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7:
+csstype@^2.2.0, csstype@^2.5.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
 
+csstype@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.2.tgz#ee5ff8f208c8cd613b389f7b222c9801ca62b3f7"
+  integrity sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==
+
 csv-generate@^3.2.0:
   version "3.2.3"
   resolved "https://registry.npmjs.org/csv-generate/-/csv-generate-3.2.3.tgz#24004f21de61c2ea1c4474d3e65a18261f638a80"