Skip to content

Commit

Permalink
use ESBuild for CSS bundles
Browse files Browse the repository at this point in the history
- use crashstats_base as first test case
- replace cssmin for minification
- fix hacky filenames for fonts to work with ESBuild
- remove unused "fontawesome" styles
  • Loading branch information
toufali committed Jan 24, 2025
1 parent ea62738 commit a9d4814
Show file tree
Hide file tree
Showing 12 changed files with 1,103 additions and 63 deletions.
3 changes: 1 addition & 2 deletions .devcontainer/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ RUN /tmp/set_up_stackwalker.sh && \

# Install frontend JS deps
COPY --chown=app:app ./webapp/package*.json /webapp-frontend-deps/
RUN cd /webapp-frontend-deps/ && npm install
RUN cd /webapp-frontend-deps/ && npm ci

# NOTE(relud): these dependencies are installed separately, relocated, and patched to reference the
# new location (aka shaded), so that they can be installed at the same time as newer versions
Expand All @@ -52,6 +52,5 @@ ENV PYTHONUNBUFFERED=1 \
PYTHONDONTWRITEBYTECODE=1 \
PYTHONPATH=/app \
UGLIFYJS_BINARY=/webapp-frontend-deps/node_modules/.bin/uglifyjs \
CSSMIN_BINARY=/webapp-frontend-deps/node_modules/.bin/cssmin \
NPM_ROOT_PATH=/webapp-frontend-deps/ \
NODE_PATH=/webapp-frontend-deps/node_modules/
7 changes: 2 additions & 5 deletions docker/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ RUN /tmp/set_up_stackwalker.sh && \

# Install frontend JS deps
COPY --chown=app:app ./webapp/package*.json /webapp-frontend-deps/
RUN cd /webapp-frontend-deps/ && npm install
RUN cd /webapp-frontend-deps/ && npm ci

# NOTE(relud): these dependencies are installed separately, relocated, and patched to reference the
# new location (aka shaded), so that they can be installed at the same time as newer versions
Expand All @@ -47,7 +47,6 @@ ENV PYTHONUNBUFFERED=1 \
PYTHONDONTWRITEBYTECODE=1 \
PYTHONPATH=/app \
UGLIFYJS_BINARY=/webapp-frontend-deps/node_modules/.bin/uglifyjs \
CSSMIN_BINARY=/webapp-frontend-deps/node_modules/.bin/cssmin \
NPM_ROOT_PATH=/webapp-frontend-deps/ \
NODE_PATH=/webapp-frontend-deps/node_modules/

Expand All @@ -57,9 +56,7 @@ USER app
# Copy everything over
COPY --chown=app:app . /app/

# Run collectstatic in container which puts files in the default place for
# static files
RUN cd /app/webapp/ && TOOL_ENV=True python manage.py collectstatic --noinput
RUN cd /app/webapp/ && npm run build

# Set entrypoint for this image. The entrypoint script takes a service
# to run as the first argument. See the script for available arguments.
Expand Down
5 changes: 1 addition & 4 deletions webapp/crashstats/crashstats/jinja2/crashstats_base.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,7 @@
{% endblock %}
{% endblock %}

{% block site_css %}
{% stylesheet 'crashstats_base' %}
{% stylesheet 'fontawesome' %}
{% endblock %}
<link rel="stylesheet" href="/static/css/crashstats-base.css" />
</head>

<body>
Expand Down
4 changes: 1 addition & 3 deletions webapp/crashstats/crashstats/jinja2/error_base.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>{% block page_title %}Error{% endblock %}</title>
{% block site_css %}
{% stylesheet 'crashstats_base' %}
{% endblock %}
<link rel="stylesheet" href="/static/css/crashstats-base.css" />
</head>
<body>
<div class="page-header">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

@font-face {
font-family: 'icons';
src: url('/static/crashstats/fonts/icons.eot?#iefix2013') format('embedded-opentype'), url('/static/crashstats/fonts/icons.woff?2013') format('woff'), url('/static/crashstats/fonts/icons.ttf?2013') format('truetype');
src: url('/static/crashstats/fonts/icons.eot') format('embedded-opentype'), url('/static/crashstats/fonts/icons.woff') format('woff'), url('/static/crashstats/fonts/icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Styles copied from /webapp/crashstats/status/static/status/css/status.css
* because Django Pipeline doesn't allow traversing urls outside the base dir
* TODO: decide if it's needed in both locations and DRY */

.status-message {
position: relative;
background-color: var(--light-grey);
border: none;
color: #ffffff;
font-size: 1.1em;
padding: 1em 3.5rem;
line-height: 1.5em;
}
.status-message span {
font-style: italic;
}
.status-message:before {
padding: 4px 4px 0 0;
vertical-align: middle;
position: absolute;
left: 1rem;
}
.status-message.severity-info {
background-color: #ededf0;
color: #0c0c0d;
}
.status-message.severity-info a {
color: var(--primary-medium);
}
.status-message.severity-info:before {
content: url("/static/img/3rdparty/silk/information.png");
}
.status-message.severity-warning {
background-color: #ffe900;
color: #3e2800;
}
.status-message.severity-warning a {
color: var(--primary-medium);
}
.status-message.severity-warning:before {
content: url("/static/img/3rdparty/silk/error.png");
}
.status-message.severity-critical {
background-color: var(--red);
}
.status-message.severity-critical,
.status-message.severity-critical a {
color: #ffffff;
}
.status-message.severity-critical:before {
content: url("/static/img/3rdparty/silk/exclamation.png");
}
Loading

0 comments on commit a9d4814

Please sign in to comment.