Try template-css in DragDrop plugin

[arturi]

This PR tries to silently utilize template-css in DragDrop
plugin only. DragDrop styles are removed from uppy.css bundle and added through JS instead.

This also opens a door to themeable UI and shared (style) variables in JS, so we can use them for inline CSS or regular class-css or wherever:

style () {
  const settings = {
    fontSizes: {
      normal: '1.2em'
    },
    colors: {
      gray: '#ccc'
    }
  }

  css`
    .UppyDragDrop-container.drag {
      border-color: ${settings.colors.gray};
    }

    .UppyDragDrop-label {
      display: block;
      cursor: pointer;
      font-size: ${settings.fontSizes.normal};
    }
  `
}

Preprocessors via babel plugin and postcss are not utilized yet.

[goto-bus-stop]

Wonder why Github isn't highlighting this, I thought it also did that for css tags 😕

[arturi]

Yes, I remember that too.

[goto-bus-stop]

Some potential issues with this approach:

• Themes in JS, but with predictable classnames, means there can only be one theme active on the page at any time. So if you have multiple Uppy instances (say two instances with DragDrop and different endpoints) with different theme colours one would override the other…
• Having style() called multiple times on the same page would add the CSS twice. We could move the css`` tag outside the class so it only runs once on load but then we also don't have JS theming.

Maybe we could do something like this, splitting up the base styles and the themed styles:

// Add base CSS once on load
css`
  .UppyDragDrop {
    // default styles
  }
`

class DragDrop extends Plugin {
  constructor () {
    // …
    this.themeId = somethingUnpredictable()
  }
  style () {
    // add themed stuff here
    this.css = css`
      .UppyDragDrop-${this.themeId} {
        border-color: ${this.opts.theme.borderColor};
      }
    `
  }

  render () {
    return `<div className="UppyDragDrop UppyDragDrop-${this.themeId}"> ... </div>`
  }

  install () {
    this.style()
    // ...
  }
  uninstall () {
    this.css.removeTheThemeCssSomehow()
  }
}

Or we could keep it simpler without the JS-based theming for a start … or maybe there's a way to do it that I'm not seeing 🤷‍♀️

[arturi]

Yes, valid points. Thanks! I’ll get back to this after the release then, it seems we better hold this off for a little longer.

[goto-bus-stop]

Dropping this here so we remember: https://www.npmjs.com/package/postcss-prefix-selector

[arturi]

Closing for now, it’s been open for two long with no activity.