atomic css

.vscode/settings.json

@@ -11,7 +11,10 @@
     "javascriptreact",
     { "language": "typescript", "autoFix": true },
     { "language": "typescriptreact", "autoFix": true }
-  ]
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
   // see https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb
   // "editor.formatOnSave": true,
   // "[javascript]": {

app/orbit-app/package.json

@@ -50,6 +50,10 @@
     "react-shadow": "^17.1.3",
     "react-use-gesture": "^5.1.2",
     "reconnecting-websocket": "4.1.10",
+    "requestidlecallback-polyfill": "1.0.2",
+    "resize-observer-polyfill": "1.5.1",
+    "intersection-observer": "0.5.1",
+    "array-flat-polyfill": "^1.0.1",
     "typeorm": "^0.3.0-alpha.23",
     "webpack-runtime-require": "0.3.0"
   },

app/orbit-app/src/main.tsx

@@ -1,4 +1,5 @@
 import '../public/styles/base.css'
+import 'requestidlecallback-polyfill'
 
 /**
  *  ⚠️    ⚠️    ⚠️    ⚠️    ⚠️    ⚠️
@@ -96,6 +97,8 @@ async function main() {
   // we've already started, ignore
   if (getGlobalConfig()) return
 
+  await initPolyfills()
+
   // if you want to show a loading screen, do it above here
   await fetchInitialConfig()
 
@@ -194,6 +197,23 @@ async function startApp(forceRefresh: boolean | 'mode' = false) {
   }
 }
 
+async function initPolyfills() {
+  let polyfills: any[] = []
+  // polyfills
+  if (!Array.prototype.flatMap) {
+    polyfills.push(import('array-flat-polyfill'))
+  }
+  if (!window['IntersectionObserver']) {
+    polyfills.push(import('intersection-observer'))
+  }
+  if (!window['ResizeObserver']) {
+    polyfills.push(async () => {
+      window['ResizeObserver'] = (await import('resize-observer-polyfill')).default
+    })
+  }
+  await Promise.all(polyfills.map(x => x()))
+}
+
 // hot reloading
 if (process.env.NODE_ENV === 'development') {
   if (typeof module['hot'] !== 'undefined') {

app/orbit-desktop/package.json

@@ -93,7 +93,7 @@
     "time-fix-plugin": "^2.0.6",
     "ts-loader": "^6.0.1",
     "typeorm": "^0.3.0-alpha.23",
-    "typescript": "3.7.1-rc",
+    "typescript": "3.7.2",
     "url-loader": "^2.1.0",
     "webpack": "4.41.2",
     "webpack-dev-middleware": "^3.7.1",

package.json

@@ -98,6 +98,8 @@
     "eslint-plugin-react": "7.12.4",
     "global": "^4.3.2",
     "jest": "24.8.0",
+    "react-test-renderer": "^16.11.0",
+    "@testing-library/react": "^9.3.2",
     "lerna": "^3.16.4",
     "lerna-changelog": "^0.8.2",
     "mobx": "^5.14.0",
@@ -107,7 +109,7 @@
     "sb-promisify": "^2.0.2",
     "sqlite": "^3.0.3",
     "ts-jest": "24.0.0",
-    "typescript": "3.7.1-rc",
+    "typescript": "3.7.2",
     "webpack-cli": "^3.3.7"
   },
   "resolutions": {

packages/color/src/color.ts

@@ -4,6 +4,8 @@ import { inputToRGB } from './format-input'
 import { HSL, HSLA, HSV, HSVA, RGB, RGBA } from './interfaces'
 import { bound01, boundAlpha, clamp01 } from './util'
 
+export * from './memoizeOne'
+
 export interface ColorOptions {
   format?: ColorFormats
   gradientType?: string

packages/crawler/src/crawler.js

@@ -8,6 +8,7 @@ import sanitizeHtml from 'sanitize-html'
 import upndown from 'upndown'
 import URI from 'urijs'
 import { parse } from 'url'
+
 import CrawlerDB from './crawlerDB'
 
 // dont use last two cores if possible

packages/css/src/constants.ts

@@ -7,11 +7,69 @@ import { CSSPropertySet } from './cssPropertySet'
 type CSSPropertyKey = keyof CSSPropertySet
 type ValidCSSPropertyMap = { [key in CSSPropertyKey]: boolean }
 
-export const validCSSAttr: Partial<ValidCSSPropertyMap> =
+export const SHORTHANDS = {
+  borderLeftRadius: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
+  borderRightRadius: ['borderTopRightRadius', 'borderBottomRightRadius'],
+  borderBottomRadius: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+  borderTopRadius: ['borderTopRightRadius', 'borderTopLeftRadius'],
+}
+
+export const validCSSAttr: ValidCSSPropertyMap =
   process.env.RENDER_TARGET === 'node'
     ? require('./validCSSAttribute.node').default
     : require('./validCSSAttribute.dom').default
 
+// conversions
+export const CAMEL_TO_SNAKE = {}
+export const SNAKE_TO_CAMEL = {}
+for (const camelKey in validCSSAttr) {
+  let snakeKey = ''
+  if (camelKey.indexOf('webkit') === 0) {
+    snakeKey += '-'
+  }
+  for (const letter of camelKey) {
+    if (letter.toUpperCase() === letter) {
+      snakeKey += `-${letter.toLowerCase()}`
+    } else {
+      snakeKey += letter
+    }
+  }
+  CAMEL_TO_SNAKE[camelKey] = snakeKey
+  SNAKE_TO_CAMEL[snakeKey] = camelKey
+}
+
+// css attribute key abbreviations
+const existing = new Set()
+export const cssAttributeAbbreviations = {}
+export const cssAbbreviationToAttribute = {} // inverse
+for (const key in validCSSAttr) {
+  let found = ''
+  if (key.length < 4) {
+    found = `${key}-`
+  } else {
+    let i = 1
+    while (true) {
+      const abbrevs = getAbbrevs(key)
+      found = abbrevs.slice(0, i).join('')
+      if (i > abbrevs.length) {
+        found += `${i}`
+      }
+      found += '-'
+      if (!existing.has(found)) break
+      i++
+    }
+  }
+  existing.add(found)
+  cssAbbreviationToAttribute[found] = key
+  cssAttributeAbbreviations[key] = found
+}
+function getAbbrevs(key: string) {
+  let options = [key[0]]
+  const uppercases = key.match(/[A-Z]/g)
+  if (uppercases) options = [...options, ...uppercases]
+  return options
+}
+
 // various helpful constants
 
 export const UNDEFINED = 'undefined'
@@ -39,13 +97,6 @@ export const TRANSFORM_KEYS_MAP = {
 
 export const COMMA_JOINED = new Set(['boxShadow', 'transition'])
 
-export const SHORTHANDS = {
-  borderLeftRadius: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
-  borderRightRadius: ['borderTopRightRadius', 'borderBottomRightRadius'],
-  borderBottomRadius: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
-  borderTopRadius: ['borderTopRightRadius', 'borderTopLeftRadius'],
-}
-
 export const FALSE_VALUES = {
   background: 'transparent',
   backgroundColor: 'transparent',

packages/css/src/css.ts

@@ -1,14 +1,13 @@
 import { Config } from './config'
-import { BORDER_KEY, COLOR_KEYS, COMMA_JOINED, FALSE_VALUES, SHORTHANDS, TRANSFORM_KEYS_MAP, unitlessNumberProperties } from './constants'
-import { CAMEL_TO_SNAKE } from './cssNameMap'
+import { BORDER_KEY, CAMEL_TO_SNAKE, COLOR_KEYS, COMMA_JOINED, FALSE_VALUES, SHORTHANDS, TRANSFORM_KEYS_MAP, unitlessNumberProperties } from './constants'
 import { boxShadowItem, boxShadowSyntax } from './cssPropertySet'
 import { px, stringHash } from './helpers'
 
 // exports
 
 export { GlossPropertySet } from './cssPropertySet'
 export { configureCSS } from './config'
-export { validCSSAttr } from './constants'
+export { SNAKE_TO_CAMEL, CAMEL_TO_SNAKE, SHORTHANDS, validCSSAttr, cssAttributeAbbreviations } from './constants'
 export {
   CSSPropertySet,
   CSSPropertySetResolved,
@@ -146,6 +145,10 @@ export function cssValue(key: string, value: any, recurse = false, options?: CSS
     if (value.getCSSValue) {
       return value.getCSSValue()
     }
+    // remove any weird looking objects (non-plain)
+    if (value.constructor.name !== 'Object') {
+      return
+    }
     const res = processObject(key, value, options)
     if (res !== undefined) {
       return res