misc: Adds initial css data & scripts pkg, updates deps & readme, and cleanup (#14)

* update: Split types out to their own files

* new: Adds initial CSS data types

* update: Export html and cleanup files for consistency

* new: Scripts pkg to manage the repo

* docs: Update readme(s)

* deps: Update all deps to latest

Author: buames

.eslintrc.js

@@ -37,5 +37,11 @@ module.exports = {
         '@typescript-eslint/no-empty-function': 'off',
       },
     },
+    {
+      files: ['packages/scripts/**/*.ts'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
   ],
 };

README.md

@@ -2,8 +2,8 @@
 
 # Email Types
 
-TypeScript definitions, compatibility data, and utils that makes building emails
-easier.
+TypeScript definitions, general data, and compatibility data that makes building
+emails easier.
 
 _This is very much a work in progress_
 

package.json

@@ -8,25 +8,28 @@
     "postinstall": "lerna bootstrap",
     "clean": "rm -rf ./packages/*/{*.tsbuildinfo,dist}",
     "clean:prune": "rm -rf ./{,*/,**/*/}{node_modules,coverage,*.lock,*.log,*.tsbuildinfo,dist}",
-    "build": "yarn clean && lerna run build --stream && yarn types",
+    "build": "yarn clean && yarn build:data && yarn scripts:build && yarn types",
+    "build:data": "yarn workspace @email-types/data build",
+    "scripts:build": "yarn workspace @email-types/scripts build",
+    "scripts:prerelease": "yarn workspace @email-types/scripts prerelease",
     "test": "yarn build && yarn lint && yarn jest:coverage",
     "jest": "jest --colors --logHeapUsage",
-    "jest:coverage": "yarn run jest --coverage",
+    "jest:coverage": "yarn jest --coverage",
     "lint": "eslint . --ext js,jsx,ts,tsx --max-warnings=0 --report-unused-disable-directives",
     "prettier": "prettier \"**/*.{js,jsx,ts,tsx,md,mdx,json}\" --write",
     "types": "tsc --build packages/*/tsconfig.json",
-    "prepublishOnly": "NODE_ENV=production yarn run build",
-    "release": "lerna publish",
-    "release:publish": "lerna publish from-git",
+    "prerelease": "yarn build && yarn scripts:prerelease",
+    "release": "yarn prerelease && lerna publish",
+    "release:publish": "yarn prerelease && lerna publish from-git",
     "release:version": "lerna version --conventional-commits --changelog-preset conventional-changelog-beemo --create-release github --push",
     "canary:version": "lerna version prerelease --preid canary --conventional-commits --changelog-preset conventional-changelog-beemo --create-release github --push"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,md,mdx,json}": [
-      "yarn run prettier"
+      "yarn prettier"
     ],
     "**/*.{js,jsx,ts,tsx}": [
-      "yarn run lint --fix"
+      "yarn lint --fix"
     ]
   },
   "husky": {
@@ -35,36 +38,33 @@
     }
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.0",
-    "@babel/core": "^7.7.2",
-    "@babel/preset-env": "^7.7.1",
-    "@babel/preset-typescript": "^7.7.2",
+    "@babel/cli": "^7.7.7",
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "@babel/preset-typescript": "^7.7.7",
     "@postmates/eslint-config": "^5.1.1",
     "@types/eslint": "^6.1.3",
-    "@types/fs-extra": "^8.0.1",
-    "@types/jest": "^24.0.23",
-    "@types/mri": "^1.1.0",
-    "@types/node": "^12.12.14",
+    "@types/jest": "^24.0.24",
+    "@types/node": "^12.12.21",
     "@types/prettier": "^1.19.0",
     "@typescript-eslint/eslint-plugin": "^2.7.0",
     "@typescript-eslint/parser": "^2.7.0",
-    "conventional-changelog-beemo": "^1.5.3",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.6.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^23.0.4",
+    "conventional-changelog-beemo": "^1.6.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-jest": "^23.1.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "fs-extra": "^8.1.0",
     "husky": "^3.0.9",
     "jest": "^24.9.0",
-    "lerna": "^3.18.4",
+    "lerna": "^3.19.0",
     "lint-staged": "^10.0.0-1",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.4"
   },
   "keywords": [
     "css-in-js",

packages/data/README.md

@@ -1,60 +1,143 @@
-[msotype]: https://github.com/email-types/email-types/msotype
-[stylis-plugin-mso]:
-  https://github.com/email-types/email-types/stylis-plugin-mso
+[wiki-dtd]: https://en.wikipedia.org/wiki/Document_type_definition
+[dep-mdn-data]: https://github.com/mdn/data
+
+<div align="center">
 
 # Email Types Data
 
-General TypeScript definitions and compatibility data that can be used when
-building emails. Checkout [msotype] and [stylis-plugin-mso] for examples.
+General TypeScript definitions and data that can be used when building emails.
 
 ```sh
-yarn add --dev @email-types/data
+yarn add @email-types/data
+```
+
+</div>
+
+---
+
+| Category          | Description                                                            | Exports                                                               |
+| :---------------- | :--------------------------------------------------------------------- | :-------------------------------------------------------------------- |
+| [**css**](#css)   | Email specific data about the different features of the CSS language.  | • `data-types`                                                        |
+| [**html**](#html) | Email specific data about the different features of the HTML language. | • `doctypes`                                                          |
+| [**mso**](#mso)   | Data about the different features of the MSO language.                 | • `properties` <br> • `syntaxes` <br> • `operators` <br> • `versions` |
+
+## CSS
+
+<details>
+  <summary><strong>Examples</strong></summary>
+  <ul>
+    <li><a href="https://github.com/email-types/msotype" target="_blank">msotype</a></li>
+  </ul>
+</details>
+
+<p></p>
+
+Email specific data about the different features of the CSS language. All CSS
+data is generated using [`mdn-data`][dep-mdn-data] during the build pipeline,
+exposing only what's relevant to reduce the overall package size.
+
+```ts
+import * as css from '@email-types/data/css';
+```
+
+### DataTypes
+
+CSS basic data types, such as `<string>`, `<number>`, and `<length>`.
+
+## HTML
+
+<details>
+  <summary><strong>Examples</strong></summary>
+  <ul>
+    <li><a href="https://github.com/email-types/doctype" target="_blank">email-doctype</a></li>
+  </ul>
+</details>
+
+<p></p>
+
+Email specific data about the different features of the HTML language.
+
+```ts
+import * as html from '@email-types/data/html';
 ```
 
-## Data
+### Doctypes
+
+HTML [Document Type Definition (DTD)][wiki-dtd] data that can be used in emails.
+It does not include unsupported or deprecated doctype versions.
+
+Checkout [email-doctype] for an example using this data.
+
+## MSO
+
+<details>
+  <summary><strong>Examples</strong></summary>
+  <ul>
+    <li><a href="https://github.com/email-types/msotype" target="_blank">msotype</a></li>
+        <li><a href="https://github.com/email-types/stylis-plugin-mso" target="_blank">stylis-plugin-mso</a></li>
+  </ul>
+</details>
 
-|                 | Description                                            | Exports                                                                              |
-| :-------------- | :----------------------------------------------------- | :----------------------------------------------------------------------------------- |
-| [**mso**](#mso) | Data about the different features of the MSO language. | • `properties` <br> • `syntaxes` <br> • `operators` <br> • `types` <br> • `versions` | `AlternativePropertiesHyphen` |
-| **features**    | _todo_                                                 | _todo_                                                                               |
-| **providers**   | _todo_                                                 | _todo_                                                                               |
+<p></p>
 
-### MSO
+Data about the different features of the Microsoft Office ("MSO") language.
 
-#### Properties
+```ts
+import * as mso from '@email-types/data/mso';
+```
+
+### Properties
+
+MSO style property data, including data for the `mso-` CSS vendor prefix. When
+using this data, you should consider the following:
 
-Property data for MSO (Microsoft Office), including data for the `mso-` CSS
-vendor prefix. There are 2 categories of property data.
+**`css alternatives`** - Properties that end with an `-alt` postfix that are
+direct alternatives to a standard CSS property.
 
-- **`alternatives`** - Properties that end with an `-alt` postfix that are
-  direct alternatives to a standard CSS property.
-- **`standard`** - Properties that correspond to a Microsoft Office feature.
-  While these do not have a CSS equivalent, they may or may not have an effect
-  on Microsoft Outlook
+**`office only`** - Properties that do not end with an `-alt` postfix and have
+no CSS equivalent. Instead, they correspond to a Microsoft Office feature.
+However, since some versions of Microsoft Outlook use Microsoft Word as it's
+rendering engine, these properties may or may not have an effect on your email.
 
-#### Syntaxes
+- **todo**: Test each of these properties to understand how they effect
+  rendering of emails. Then document it all.
 
-MSO value definition syntax is used for the formal syntax of MSO properties. For
-example, the `color` property uses the following syntax where <named-color> is
-referring to a syntax that is defined in `syntaxes.ts`.
+### Syntaxes
+
+MSO syntax is value definitions used for the formal syntax of MSO properties.
+For example, the `mso-border-alt` property allows for `<border-style>` values.
+This is referring to a syntax defined in `syntaxes.ts`.
 
 ```ts
-color: {
-  syntax: '<named-color>';
+// example properties.ts
+{
+  'mso-border-alt': {
+    syntax: '<border-style>',
+  }
+}
+
+// example syntaxes.ts
+{
+  'border-style': {
+    syntax: 'dashed | dotted | <string>';
+  }
 }
 ```
 
-#### Operators
+### Operators
 
-Operator syntax that can be used to create MSO conditional expressions,
+MSO operator syntax that can be used to create MSO conditional expressions,
 comments.
 
-#### Types
+### Versions
+
+MSO version vectors that map to specific Outlook clients. This is commonly
+used—in combination with an [`operator`](#operators)—to target specific versions
+of Outlook when creating conditional expressions, comments.
 
-CSS basic data types, such as `<sting>` and `<length>`, that are acceptable
-values that can be used by MSO properties.
+## Upcoming
 
-#### Versions
+**Clients**
 
-MSO version vectors that map to specific Outlook clients. This is commonly used
-to target specific versions of Outlook with conditional comments.
+Data about the different email clients—which will include `applications` and
+`webmail`.

packages/data/css.d.ts

@@ -0,0 +1 @@
+export * from './dist/css';

packages/data/css.js

@@ -0,0 +1 @@
+module.exports = require('./dist/css');

packages/data/doctypes.d.ts

@@ -0,0 +1 @@
+export * from './dist/html';

packages/data/doctypes.js

@@ -0,0 +1 @@
+module.exports = require('./dist/html');