Convert to TypeScript

This adds TypeScript definitions to the library so it can be used in TS apps, with no change to JS apps

.babelrc

@@ -5,7 +5,8 @@
       {
         "modules": false
       }
-    ]
+    ],
+    "@babel/typescript"
   ],
   "env": {
     "commonjs": {

.eslintrc

@@ -1,6 +1,7 @@
 {
-  "extends": ["airbnb"],
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
+  "extends": ["airbnb-base"],
+  "plugins": ["@typescript-eslint"],
   "env": {
     "browser": true,
     "node": true,
@@ -11,19 +12,15 @@
     "object-curly-newline": [0],
     "object-property-newline": [0],
     "comma-dangle": [0],
-    "react/jsx-filename-extension": [
-      2,
-      {
-        "extensions": [".js", ".jsx"]
-      }
-    ],
     "prefer-template": [0],
+    "import/extensions": [0], // handled by TS
     "import/no-extraneous-dependencies": [0],
+    "import/no-unresolved": [0], // handled by TS
     "react/prop-types": [0],
     "no-confusing-arrow": [0],
     "no-underscore-dangle": [0],
+    "no-unused-vars": [0], // handled by TS
     "no-param-reassign": [0],
-    "react/forbid-prop-types": [0],
     "no-plusplus": [0],
     "guard-for-in": [0],
     "no-restricted-syntax": [0],
@@ -33,6 +30,7 @@
     "no-mixed-operators": [0],
     "no-lonely-if": [1],
     "no-bitwise": [0],
-    "arrow-parens": [0]
+    "arrow-parens": [0],
+    "operator-linebreak": [0] // handled by Prettier
   }
 }

modules/assignStyle.js → modules/assignStyle.ts

@@ -1,8 +1,19 @@
-function filterUniqueArray(arr) {
+function filterUniqueArray(arr: any[]) {
   return arr.filter((val, index) => arr.lastIndexOf(val) === index)
 }
 
-export default function assignStyle(base, ...extendingStyles) {
+type StyleObject = {
+  [key: string]:
+    | string
+    | number
+    | StyleObject
+    | (string | number | StyleObject)[]
+}
+
+export default function assignStyle(
+  base: StyleObject,
+  ...extendingStyles: StyleObject[]
+) {
   for (let i = 0, len = extendingStyles.length; i < len; ++i) {
     const style = extendingStyles[i]
 
@@ -22,7 +33,7 @@ export default function assignStyle(base, ...extendingStyles) {
         }
 
         if (typeof value === 'object') {
-          base[property] = assignStyle({}, baseValue, value)
+          base[property] = assignStyle({}, baseValue as StyleObject, value)
           continue
         }
       }

modules/camelCaseProperty.js → modules/camelCaseProperty.ts

@@ -1,10 +1,10 @@
 const DASH = /-([a-z])/g
 const MS = /^Ms/g
 
-function toUpper(match) {
+function toUpper(match: string) {
   return match[1].toUpperCase()
 }
 
-export default function camelCaseProperty(property) {
+export default function camelCaseProperty(property: string) {
   return property.replace(DASH, toUpper).replace(MS, 'ms')
 }

modules/cssifyDeclaration.js → modules/cssifyDeclaration.ts

@@ -1,5 +1,8 @@
 import hyphenateProperty from './hyphenateProperty'
 
-export default function cssifyDeclaration(property, value) {
+export default function cssifyDeclaration(
+  property: string,
+  value: string | number
+) {
   return hyphenateProperty(property) + ':' + value
 }

modules/cssifyObject.js → modules/cssifyObject.ts

@@ -1,6 +1,14 @@
 import cssifyDeclaration from './cssifyDeclaration'
 
-export default function cssifyObject(style) {
+export type StyleObject = {
+  [key: string]:
+    | string
+    | number
+    | StyleObject
+    | (string | number | StyleObject)[]
+}
+
+export default function cssifyObject(style: StyleObject) {
   let css = ''
 
   for (const property in style) {

modules/hyphenate-style-name.d.ts

@@ -0,0 +1,3 @@
+declare module 'hyphenate-style-name' {
+  export default function hyphenateStyleName(property: string | number): string
+}

modules/hyphenateProperty.js → modules/hyphenateProperty.ts

@@ -1,5 +1,5 @@
 import hyphenateStyleName from 'hyphenate-style-name'
 
-export default function hyphenateProperty(property) {
+export default function hyphenateProperty(property: string | number) {
   return hyphenateStyleName(property)
 }

modules/index.js → modules/index.ts

@@ -23,5 +23,5 @@ export {
   normalizeProperty,
   resolveArrayValue,
   unprefixProperty,
-  unprefixValue
+  unprefixValue,
 }

modules/isPrefixedProperty.ts

@@ -0,0 +1,5 @@
+const RE = /^(Webkit|Moz|O|ms)/
+
+export default function isPrefixedProperty(property: string) {
+  return RE.test(property)
+}

modules/isPrefixedValue.js → modules/isPrefixedValue.ts

@@ -1,5 +1,5 @@
 const RE = /-webkit-|-moz-|-ms-/
 
-export default function isPrefixedValue(value) {
+export default function isPrefixedValue(value: string) {
   return typeof value === 'string' && RE.test(value)
 }

modules/isUnitlessProperty.js → modules/isUnitlessProperty.ts

@@ -1,6 +1,6 @@
 import hyphenateProperty from './hyphenateProperty'
 
-const unitlessProperties = {
+const unitlessProperties: { [key: string]: boolean } = {
   borderImageOutset: true,
   borderImageSlice: true,
   borderImageWidth: true,
@@ -20,7 +20,7 @@ const unitlessProperties = {
   strokeDashoffset: true,
   strokeMiterlimit: true,
   strokeOpacity: true,
-  strokeWidth: true
+  strokeWidth: true,
 }
 
 const prefixedUnitlessProperties = [
@@ -42,12 +42,12 @@ const prefixedUnitlessProperties = [
   'gridRowEnd',
   'gridRowStart',
   'lineClamp',
-  'order'
+  'order',
 ]
 
 const prefixes = ['Webkit', 'ms', 'Moz', 'O']
 
-function getPrefixedProperty(prefix, property) {
+function getPrefixedProperty(prefix: string, property: string) {
   return prefix + property.charAt(0).toUpperCase() + property.slice(1)
 }
 
@@ -66,6 +66,6 @@ for (const property in unitlessProperties) {
   unitlessProperties[hyphenateProperty(property)] = true
 }
 
-export default function isUnitlessProperty(property) {
+export default function isUnitlessProperty(property: string) {
   return unitlessProperties.hasOwnProperty(property)
 }

modules/normalizeProperty.js → modules/normalizeProperty.ts

@@ -1,6 +1,6 @@
 import camelCaseProperty from './camelCaseProperty'
 import unprefixProperty from './unprefixProperty'
 
-export default function normalizeProperty(property) {
+export default function normalizeProperty(property: string) {
   return unprefixProperty(camelCaseProperty(property))
 }

modules/resolveArrayValue.js → modules/resolveArrayValue.ts

@@ -1,5 +1,5 @@
 import hyphenateProperty from './hyphenateProperty'
 
-export default function resolveArrayValue(property, value) {
+export default function resolveArrayValue(property: string, value: string[]) {
   return value.join(';' + hyphenateProperty(property) + ':')
 }

modules/unprefixProperty.js → modules/unprefixProperty.ts

@@ -1,6 +1,6 @@
 const RE = /^(ms|Webkit|Moz|O)/
 
-export default function unprefixProperty(property) {
+export default function unprefixProperty(property: string) {
   const propertyWithoutPrefix = property.replace(RE, '')
   return (
     propertyWithoutPrefix.charAt(0).toLowerCase() +

modules/unprefixValue.js → modules/unprefixValue.ts

@@ -1,6 +1,6 @@
 const RE = /(-ms-|-webkit-|-moz-|-o-)/g
 
-export default function unprefixValue(value) {
+export default function unprefixValue(value: string | string[]) {
   if (typeof value === 'string') {
     return value.replace(RE, '')
   }

package.json

@@ -4,6 +4,7 @@
   "description": "Useful utility functions for CSS in JS solutions",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "types": "es/index.d.ts",
   "jsnext:main": "es/index.js",
   "sideEffects": false,
   "files": [
@@ -20,13 +21,13 @@
   "author": "robinweser <contact@weser.io>",
   "license": "MIT",
   "scripts": {
-    "build": "yarn run clean && yarn build:lib && yarn build:es",
-    "build:lib": "cross-env BABEL_ENV=commonjs babel modules --out-dir lib --ignore __tests__",
-    "build:es": "babel modules --out-dir es --ignore __tests__",
+    "build": "yarn run clean && yarn build:es && yarn build:lib",
+    "build:lib": "cross-env BABEL_ENV=commonjs babel modules --extensions '.ts' --ignore 'modules/__tests__','**/*.d.ts' --out-dir lib",
+    "build:es": "tsc && babel es --out-dir es",
     "clean": "rimraf es lib coverage",
     "check": "yarn lint && yarn test:coverage",
-    "format": "prettier --write \"modules/**/*.js\"",
-    "lint": "eslint modules/**/*.js",
+    "format": "prettier --write \"modules/**/*.{js,ts}\"",
+    "lint": "eslint 'modules/**/*.{js,ts}'",
     "release": "git pull --rebase && yarn run check && yarn build && npm publish",
     "test": "cross-env BABEL_ENV=commonjs jest",
     "test:coverage": "cross-env BABEL_ENV=commonjs jest --coverage",
@@ -42,22 +43,22 @@
     "hyphenate-style-name": "^1.0.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.0",
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.0",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^7.1.1",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
-    "cross-env": "^5.2.0",
-    "eslint": "^3.14.1",
-    "eslint-config-airbnb": "^14.0.0",
-    "eslint-plugin-flowtype": "^2.30.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2",
-    "eslint-plugin-react": "^6.9.0",
-    "jest": "^23.6.0",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-typescript": "^7.9.0",
+    "@types/jest": "^25.2.1",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
+    "babel-jest": "^25.2.6",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "jest": "^25.2.6",
     "prettier": "^1.7.4",
-    "rimraf": "^2.6.1"
+    "rimraf": "^2.6.1",
+    "typescript": "^3.8.3"
   }
 }

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "es",
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "types": ["jest"]
+  },
+  "exclude": ["modules/__tests__", "node_modules"],
+  "include": ["modules"]
+}