Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Separate CSS file on build #753

Draft
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

anders-kiaer
Copy link

@anders-kiaer anders-kiaer commented Feb 7, 2020

This is a draft PR of how dash-core-components could build its static CSS into a separate .css file, which then is loaded through Dash's _css_dist.

Resolves #752, and enables e.g. running

import dash
import dash_html_components as html
import dash_core_components as dcc

from flask_talisman import Talisman

app = dash.Dash(__name__)

csp = {
    "default-src": "'self'",
    "script-src": [
        "'self'",
        # Due to https://github.com/plotly/dash/issues/630:
        "'sha256-jZlsGVOhUAIcH+4PVs7QuGZkthRMgvT2n0ilH6/zTM0='",
    ]
}

Talisman(app.server, content_security_policy=csp, force_https=False)

app.layout = html.Div(children=["Hello Dash!"])

if __name__ == "__main__":
    app.run_server()

new MiniCssExtractPlugin({
filename: `${dashLibraryName}.css`,
}),
//new WebpackDashDynamicImport(),
Copy link
Author

@anders-kiaer anders-kiaer Feb 7, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to comment this one out temporarily in order to be able to run npm run build, but I guess someone knowing the details of WebpackDashDynamicImport would be able to figure out how to include it again.

@anders-kiaer
Copy link
Author

Did another quick test, with this PR, to check if "inline style logic from Python" works with strict CSS CSP.

The result was that it works, as might be expected since Dash probably pass the style dictionaries from Python to React (which again sets the style attributes in a CSP compatible way with react >= 15).

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

from flask_talisman import Talisman

app = dash.Dash(__name__)

CSP = {
    "default-src": "'self'",
    "script-src": ["'self'", "'sha256-jZlsGVOhUAIcH+4PVs7QuGZkthRMgvT2n0ilH6/zTM0='"],
    "style-src": "'self'",
}

Talisman(app.server, content_security_policy=CSP, force_https=False)

app.layout = dcc.RadioItems(
    id="radioitems",
    options=[{"label": color, "value": color} for color in ["red", "blue", "green"]],
)

@app.callback(
    Output("radioitems", "style"), [Input("radioitems", "value")],
)
def _update_style(value):
    return {"backgroundColor": value}

if __name__ == "__main__":
    app.run_server()

Result:
image
image
image
image

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inline CSS vs. build to separate CSS file
1 participant