CSS and HTML distribution

[StrahilKazlachev]

I'm submitting a feature request

• Library Version:
  1.0.0-rc.1.0.3

Please tell us about your environment:

• Operating System:
  all

• Node Version:
  6.2.0

• NPM Version:
  3.8.9

• JSPM OR Webpack AND Version
  all

• Browser:
  all

• Language:
  all

Current behavior:
The styles are inlined in src/dialog-configuration.ts.
The views are also inlined using the @inlineView.

Expected/desired behavior:

• What is the expected behavior?
  We should get them out in a separate file/s. At least the styles.

• What is the motivation / use case for changing the behavior?
  Currently the styles - that one-liner, are nightmare to maintain. Also the html can not be minified.

[StrahilKazlachev]

@EisenbergEffect @ZHollingshead can you give some input based on the ux repos experience?
The dialog current approach, of inlining the styles, does not require any additional configuring of the loader/bundler. But maintainability/readability/build integration is 😱

[serifine]

Is there a reason we can not set the individual pieces up as regular custom component modules like so?

ux-dialog.ts

import { customElement } from 'aurelia-templating';

@customElement('ux-dialog')
export class UxDialog {

}

ux-dialog.html

<template>
  <require from="./ux-dialog.css"></require>
  
  <slot></slot>
</template>

ux-dialog.css

ux-dialog {
  display: table;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 5px;
  padding: 3px;
  min-width: 300px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background: #fff
}

[StrahilKazlachev]

@ZHollingshead the current approach is towards zero-configuration(minimum) for loader/bundler. That's the only reason for the current setup.
I saw that ux-components has it all in separate files/folders/...(neatly organized), and was wondering if that's the setup we are in favour of.

[mroeling]

Please reconsider.
Another reason to have this changed is the use of the Content-Security-Policy header. To be able to use the plugin, style-src has to be set to 'unsafe-inine'. It would be nice to have this set as strict as possible, so only 'self'.