new(stylis-plugin-mso): Stylis plugin that adds support for the mso- css vendor prefix

.eslintrc.js

@@ -17,8 +17,17 @@ module.exports = {
 
     // prettier
     'prettier/prettier': 2,
+
+    // typescript
+    '@typescript-eslint/explicit-function-return-type': 0,
   },
   overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        '@typescript-eslint/explicit-function-return-type': 2,
+      },
+    },
     {
       files: ['*.test.ts'],
       plugins: ['jest'],

README.md

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

babel.config.js

@@ -0,0 +1,40 @@
+const isEsm = process.env.TARGET === 'esm';
+
+module.exports = (api) => {
+  const isDev = api.env('development');
+  const isTest = api.env('test');
+
+  const plugins = [
+    '@babel/plugin-syntax-dynamic-import',
+    isTest && ['babel-plugin-dynamic-import-node'],
+    isEsm && [
+      '@babel/plugin-transform-runtime',
+      {
+        corejs: 3,
+        helpers: true,
+        regenerator: true,
+        useESModules: api.caller(
+          (caller) => !!(caller && caller.supportsStaticESM),
+        ),
+      },
+    ],
+  ].filter(Boolean);
+
+  return {
+    plugins,
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          loose: true,
+          modules: isEsm ? false : 'commonjs',
+          targets: isEsm ? { esmodules: true } : { node: 'current' },
+          shippedProposals: true,
+          exclude: ['transform-typeof-symbol'],
+        },
+      ],
+      ['@babel/preset-react', { development: isDev || isTest }],
+      '@babel/preset-typescript',
+    ],
+  };
+};

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  collectCoverageFrom: ['**/src/**/*.ts', '**/test/**/*.ts'],
+  collectCoverageFrom: ['**/src/**/*.ts'],
   coverageDirectory: 'coverage',
   coveragePathIgnorePatterns: [
     '/node_modules/',
@@ -22,7 +22,5 @@ module.exports = {
     '@email-types/(.+)$': '<rootDir>/packages/$1',
   },
   roots: ['<rootDir>/packages'],
-  transform: {
-    '^.+\\.ts?$': 'ts-jest',
-  },
+  snapshotSerializers: ['jest-emotion'],
 };

package.json

@@ -6,17 +6,21 @@
   ],
   "scripts": {
     "postinstall": "lerna bootstrap",
-    "clean": "rm -rf ./packages/*/dist && rm -rf ./{,*/,**/*/}*.tsbuildinfo",
-    "clean:prune": "yarn run clean && rm -rf ./{,*/,**/*/}{node_modules,coverage,*.lock,*.log}",
-    "build": "yarn run clean && lerna run build --stream --ignore=@email-types/scripts && yarn run types",
-    "test": "yarn run build && yarn run lint && yarn run jest:coverage",
+    "prepare": "yarn build",
+    "clean": "lerna exec -- rm -rf ./{dist,*.tsbuildinfo}",
+    "clean:prune": "yarn clean && lerna exec -- rm -rf ./node_modules  && rm -rf ./{node_modules,coverage,*.lock,*.log}",
+    "build": "yarn clean && lerna run build --ignore=@email-types/scripts && yarn types",
+    "dev": "run-p dev:* ",
+    "dev:all": "lerna run dev --parallel",
+    "dev:types": "run-p \"types:* --watch\"",
+    "test": "yarn build && yarn lint && yarn jest:coverage",
     "jest": "jest --colors --logHeapUsage",
     "jest:coverage": "yarn run jest --coverage",
     "lint": "yarn run eslint .",
     "eslint": "eslint --color --ext .ts,.js --report-unused-disable-directives",
-    "pretty": "prettier --write ./{,*/,**/}*.{js,ts,md,json}",
+    "pretty": "prettier ./{,*/,**/}*.{js,ts,md,json} --write",
     "types": "tsc --build packages/*/tsconfig.json",
-    "release": "yarn run build && lerna publish",
+    "release": "yarn build && lerna publish",
     "release:publish": "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",
@@ -38,14 +42,23 @@
       "pre-commit": "lint-staged"
     }
   },
+
   "devDependencies": {
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-typescript": "^7.7.2",
     "@postmates/eslint-config": "^5.1.1",
     "@types/eslint": "^6.1.1",
     "@types/jest": "^24.0.22",
     "@types/node": "^12.11.1",
     "@types/prettier": "^1.18.3",
     "@typescript-eslint/eslint-plugin": "^2.6.0",
     "@typescript-eslint/parser": "^2.6.0",
+    "babel-plugin-dynamic-import-node": "^2.3.0",
     "conventional-changelog-beemo": "^1.5.1",
     "eslint": "^6.6.0",
     "eslint-config-prettier": "^6.5.0",
@@ -57,13 +70,27 @@
     "eslint-plugin-react-hooks": "^1.7.0",
     "husky": "^3.0.9",
     "jest": "^24.9.0",
+    "jest-emotion": "^10.0.17",
     "lerna": "^3.18.3",
     "lint-staged": "^9.4.2",
+    "npm-run-all": "^4.1.5",
     "prettier": "^1.18.2",
-    "ts-jest": "^24.1.0",
     "typescript": "^3.6.4"
   },
+  "keywords": [
+    "css-in-js",
+    "css",
+    "definitions",
+    "email",
+    "html",
+    "react",
+    "typescript",
+    "types"
+  ],
   "author": "buames",
-  "repository": "https://github.com/email-types/email-types",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/email-types/email-types.git"
+  },
   "license": "MIT"
 }

packages/data/README.md

@@ -1,5 +1,52 @@
+[msotype]:
+  https://github.com/email-types/email-types/tree/master/packages/msotype
+[stylis-mso]:
+  https://github.com/email-types/email-types/tree/master/packages/stylis-plugin-mso
+
 # Email Types Data
 
+General TypeScript definitions and compatibility data that can be used when
+building emails. Checkout [msotype] and [stylis-mso] for examples.
+
 ```sh
 yarn add --dev @email-types/data
 ```
+
+## Data
+
+|                 | Description                                            | Exports                                         |
+| :-------------- | :----------------------------------------------------- | :---------------------------------------------- |
+| [**mso**](#mso) | Data about the different features of the MSO language. | • `properties` <br> • `syntaxes` <br> • `types` | `AlternativePropertiesHyphen` |
+| **features**    | _todo_                                                 | _todo_                                          |
+| **providers**   | _todo_                                                 | _todo_                                          |
+
+### MSO
+
+#### Properties
+
+Data for MSO (Microsoft Office), including data for the `mso-` CSS vendor
+prefix. There are 3 categories of data.
+
+- **`alternatives`** - Properties that end with an `-alt` postfix that are
+  direct alternatives to a standard CSS property.
+- **`fonts`** - Properties for the different MSO font features.
+- **`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
+
+#### Syntaxes
+
+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`.
+
+```ts
+color: {
+  syntax: '<named-color>';
+}
+```
+
+#### Types
+
+CSS basic data types, such as `<sting>` and `<length>`, that are acceptable
+values that can be used by MSO properties.

packages/data/package.json

@@ -2,8 +2,8 @@
   "name": "@email-types/data",
   "version": "1.0.0-canary.0",
   "description": "@email-types/data",
-  "main": "index.js",
-  "types": "index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist",
     "index.d.ts",
@@ -12,9 +12,18 @@
     "mso.js"
   ],
   "scripts": {
-    "build": "tsc --build"
+    "build": "TARGET=cjs babel --root-mode upward -x .ts,.tsx src -d dist",
+    "dev": "TARGET=cjs babel --root-mode upward -x .ts,.tsx src -d dist -w"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "data",
+    "emails",
+    "css"
+  ],
   "author": "buames",
-  "repository": "https://github.com/email-types/email-types",
+  "repository": "https://github.com/email-types/email-types/tree/master/packages/data",
   "license": "MIT"
 }

packages/data/src/mso/data/types.ts

@@ -1,4 +1,4 @@
-export const cssDataType = [
+export const types = [
   'integer',
   'length',
   'number',

packages/data/src/mso/index.ts

@@ -7,6 +7,8 @@ export * from './data/syntaxes';
 export * from './data/types';
 export * from './types';
 
+export { alternatives, fonts, standard };
+
 export const properties = {
   ...alternatives,
   ...fonts,

packages/data/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "declarationDir": "dist",
+    "emitDeclarationOnly": true,
     "outDir": "dist",
     "rootDir": "src",
     "tsBuildInfoFile": "tsconfig.tsbuildinfo"

packages/msotype/README.md

@@ -39,7 +39,7 @@ using libraries that accepts any numeric value as length which is common in
 CSS-in-JS libraries like [EmotionJS](https://github.com/emotion-js/emotion).
 
 |                 | Default                 | Hyphen                        |
-| --------------- | ----------------------- | ----------------------------- |
+| :-------------- | :---------------------- | :---------------------------- |
 | **All**         | `Properties`            | `PropertiesHyphen`            |
 | **Alternative** | `AlternativeProperties` | `AlternativePropertiesHyphen` |
 | **Standard**    | `StandardProperties`    | `StandardPropertiesHyphen`    |
@@ -55,11 +55,10 @@ Categories:
 
 ### Font Types
 
-Interfaces with descriptors for different MSO font types. These properties do
-not accept the generic length arugment since it's not needed.
+Interfaces with descriptors for different MSO font types.
 
 |               | Default             | Hyphen                    |
-| ------------- | ------------------- | ------------------------- |
+| :------------ | :------------------ | :------------------------ |
 | **All**       | `FontProperties`    | `FontPropertiesHyphen`    |
 | **`Ansi`**    | `AnsiProperties`    | `AnsiPropertiesHyphen`    |
 | **`Ascii`**   | `AsciiProperties`   | `AsciiropertiesHyphen`    |
@@ -76,9 +75,7 @@ Categories:
 - **`Fareast`** - Fareast specific font properties
 - **`Panose`** - Panose specific font properties
 
-## Usage
-
-### Default Variation
+## Using Default Variation
 
 JavaScript cased (camel) properties are provided in `Mso.Properties` and
 `Mso.FontProperties`.
@@ -92,7 +89,7 @@ const styles: Mso.Properties = {
 };
 ```
 
-### Hyphen Variation
+## Using Hyphen Variation
 
 Hyphen cased (kebab) properties are provided in `Mso.PropertiesHyphen`. These
 not **not** included by default in `Mso.Properties`. To allow both of them, you
@@ -123,7 +120,7 @@ const style: Style = {
 };
 ```
 
-### Overriding `<length>`
+## Overriding `<length>`
 
 Length defaults to `string | 0`. But it's possible to override it using
 generics.
@@ -137,7 +134,7 @@ const style: Mso.Properties<string | number> = {
 };
 ```
 
-### Type Check All CSS Properties
+## Type Check All CSS Properties
 
 By default, **only** `mso-` CSS vendor prefixes are provided. If you want to
 type check all CSS properties, you can use `msotype` together with [csstype]. To

packages/msotype/package.json

@@ -13,7 +13,17 @@
     "csstype": "^2.6.7",
     "typescript": "^3.6.4"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "definitions",
+    "email",
+    "mso",
+    "typescript",
+    "types"
+  ],
   "author": "buames",
-  "repository": "https://github.com/email-types/email-types",
+  "repository": "https://github.com/email-types/email-types/tree/master/packages/msotype",
   "license": "MIT"
 }

packages/scripts/package.json

@@ -21,6 +21,6 @@
     "ts-node": "^8.4.1"
   },
   "author": "buames",
-  "repository": "https://github.com/email-types/email-types",
+  "repository": "https://github.com/email-types/email-types/tree/master/packages/scripts",
   "license": "MIT"
 }

packages/scripts/src/mso/css-types.ts

@@ -1,4 +1,4 @@
-import { cssDataType } from '@email-types/data/mso';
+import { types as cssData } from '@email-types/data/mso';
 import {
   globalsString,
   globalsNumber,
@@ -7,7 +7,7 @@ import {
 } from './constants';
 
 export const getCssDataTypes = <T extends object>(): Record<string, T> => {
-  const cssDataTypes = cssDataType.reduce((results, name) => {
+  const cssDataTypes = cssData.reduce((results, name) => {
     if (name === 'number' || name === 'integer') {
       results[name] = {
         type: DataType.Number,

packages/scripts/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "noEmit": true,
+    "module": "commonjs",
     "tsBuildInfoFile": "tsconfig.tsbuildinfo"
   },
   "exclude": ["dist", "test"],