Stencil version:

 @stencil/core@0.3.0

I'm submitting a:

• bug report
• feature request
• support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
A components currently rely on inline <style> tags. When Content-Security-Policy headers forbid unsafe-inline the styling breaks.

Expected behavior:
Any solution that allows strict CSP policies and well styled Stencil components to coexist.

One approach could be for Stencil to generate CSS files at compilation time to which <style> tags would refer.

Steps to reproduce:

1. Take any Stencil component with a styleUrl specifying some styles
2. Compile it and serve it with the following response header added: Content-Security-Policy = "style-src 'self' ;"
3. Notice that styles are broken due to the browser refusing to interpret them

Related code:

The following snippet spins up a proxy from port 5000 to 3333 banning inline style tags. (Assuming express and express-http-proxy are installed.)

const express = require('express');
const proxy = require('express-http-proxy');

const app = express();
app.use((req, res, next) => { res.set('Content-Security-Policy', "style-src 'self' ;"); next(); });
app.use('/', proxy('http://localhost:3333'));
app.listen(5000);