Merge pull request #890 from cyrilchapon/ts-typography

@theme-ui/typography => Typescript

Author: hasparus

packages/docs/src/components/theme-scales.js

@@ -3,15 +3,15 @@ import { jsx } from 'theme-ui'
 import { scales, multiples } from '@theme-ui/css'
 import { Styled } from 'theme-ui'
 
-const camelDash = string =>
-  string.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`)
+const camelDash = (string) =>
+  string.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`)
 
 const alphabeticSort = (a, b) =>
   a.localeCompare(b, undefined, {
     sensitivity: 'base',
   })
 
-export default props => {
+export default (props) => {
   const exclude = Object.keys(multiples)
   const table = Object.keys(scales).reduce((acc, curr) => {
     if (!Array.isArray(acc[scales[curr]])) {
@@ -35,7 +35,7 @@ export default props => {
       <tbody>
         {Object.keys(table)
           .sort(alphabeticSort)
-          .map(key => (
+          .map((key) => (
             <tr>
               <td>
                 <Styled.inlineCode>{key}</Styled.inlineCode>
@@ -44,7 +44,10 @@ export default props => {
                 {table[key].map((property, index) => (
                   <Styled.inlineCode>
                     {!!index && ', '}
-                    <Styled.a href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${property}`}>{property}</Styled.a>
+                    <Styled.a
+                      href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${property}`}>
+                      {property}
+                    </Styled.a>
                   </Styled.inlineCode>
                 ))}
               </td>

packages/typography/package.json

@@ -3,16 +3,23 @@
   "version": "0.4.0-rc.1",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "prepare": "microbundle --no-compress",
-    "watch": "microbundle watch --no-compress"
+    "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
+    "watch": "microbundle watch --no-compress --tsconfig tsconfig.json"
   },
   "dependencies": {
+    "@theme-ui/css": "^0.4.0-rc.1",
+    "@types/compass-vertical-rhythm": "^1.4.1",
+    "@types/modularscale": "^2.0.0",
+    "@types/typography": "^0.16.3",
     "compass-vertical-rhythm": "^1.4.5",
+    "csstype": "^2.6.10",
     "modularscale": "^2.0.1",
-    "object-assign": "^4.1.1"
+    "type-fest": "^0.13.1"
   },
   "devDependencies": {
     "typography": "^0.16.19",

packages/typography/src/index.js

@@ -0,0 +1,3 @@
+export { toTheme } from './to-theme'
+export { styles } from './styles'
+export { CustomTypographyOptions, ThemeTypographyRhythm as CustomVerticalRhythm } from './to-theme'

packages/typography/src/index.ts

@@ -1,18 +1,18 @@
+import { ThemeStyles } from '@theme-ui/css'
+
 // theme.styles object for use with typography.js-generated theme object
 // similar to typography.js style output, with these differences
 // - only includes styles for markdown elements
 // - does not include color styles
 // - does not include responsive styles
 
-import assign from 'object-assign'
-
 const heading = {
   fontFamily: 'heading',
   lineHeight: 'heading',
   fontWeight: 'heading',
 }
 
-export const styles = {
+const baseStyles: ThemeStyles = {
   root: {
     fontFamily: 'body',
     fontSize: 2,
@@ -22,42 +22,30 @@ export const styles = {
   img: {
     maxWidth: '100%',
   },
-  h1: assign(
-    {
-      fontSize: 5,
-    },
-    heading
-  ),
-  h2: assign(
-    {
-      fontSize: 4,
-    },
-    heading
-  ),
-  h3: assign(
-    {
-      fontSize: 3,
-    },
-    heading
-  ),
-  h4: assign(
-    {
-      fontSize: 2,
-    },
-    heading
-  ),
-  h5: assign(
-    {
-      fontSize: 1,
-    },
-    heading
-  ),
-  h6: assign(
-    {
-      fontSize: 0,
-    },
-    heading
-  ),
+  h1: {
+    fontSize: 5,
+    ...heading,
+  },
+  h2: {
+    fontSize: 4,
+    ...heading,
+  },
+  h3: {
+    fontSize: 3,
+    ...heading,
+  },
+  h4: {
+    fontSize: 2,
+    ...heading,
+  },
+  h5: {
+    fontSize: 1,
+    ...heading,
+  },
+  h6: {
+    fontSize: 0,
+    ...heading,
+  },
   ul: {
     listStylePosition: 'outside',
     listStyleImage: 'none',
@@ -137,7 +125,7 @@ export const styles = {
   },
 }
 
-const headings = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1']
+const headings = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const
 const blockElements = [
   ...headings,
   'ul',
@@ -148,19 +136,22 @@ const blockElements = [
   'blockquote',
   'img',
   'hr',
-]
+] as const
 
-blockElements.forEach(tag => {
-  assign(styles, {
-    [tag]: assign(
-      {
+export const styles: ThemeStyles = {
+  ...baseStyles,
+  ...blockElements.reduce(
+    (style, tag) => ({
+      ...style,
+      [tag]: {
         padding: 0,
         margin: 0,
         marginBottom: 3,
+        ...baseStyles[tag],
       },
-      styles[tag]
-    ),
-  })
-})
+    }),
+    {}
+  ),
+}
 
 export default styles