search

sfbrigade / bats-server

Routed is an app to help ambulances direct non-critical patients to hospital emergency rooms with the most availability.
https://routedapp.org/
GNU Affero General Public License v3.0
18 stars 12 forks source link

Auto-prefix `mask` CSS with `-webkit` to fix icons in Chrome #199

Closed fwextensions closed 2 years ago

fwextensions commented 2 years ago

Since the dev environment doesn't work in Chrome, it's hard to tell if this fully fixes things, but it does include -webkit-mask in the output, so presumably it will.

It also triples the size of the CSS, unfortunately. Not sure if the gulp script would also cause that.

francisli commented 2 years ago

I think I've found a fix for the broken websocket connection to localhost on Chrome and pushed it up to the branch.

I see the black boxes in development still, because the fix currently is on the build process for generating static assets for production.

If there's a way to integrate postcss into the webpack config, then that would fix it for both development and production?

francisli commented 2 years ago

Changing the webpack config would require ejecting the react app, I assume...

Doing a bit of a doc search, it seems that it's already configured to prefix css? But it's missing things required for Chrome?

https://create-react-app.dev/docs/post-processing-css/

fwextensions commented 2 years ago

I don't think the CRA postcss gets applied to the full USWDS package, because it's built with that npm run sass command.

If I do a build manually on this branch, with that ws tweak, the icons and the server seem to work in Chrome:

image

But the socket doesn't work in FF, then. It keeps getting closed and then reopened. UI just shows the spinner.

fwextensions commented 2 years ago

If ws: true is added to setupProxy.js and the proxy field in package.json is also used, then the server seems to work in Chrome but not in FF. Using just the proxy field and removing setupProxy.js works in FF but not Chrome. Removing the proxy field and using just the setupProxy.js file seems to work in both. ffs

fwextensions commented 2 years ago

However, the live reload from webpack doesn't seem to work in Chrome with any combination of proxy settings. The sockjs-node call shows an Invalid frame header error.

A proxy on both their houses.

francisli commented 2 years ago

@fwextensions ok, not really related to the topic of this PR, but I think I've gotten it so that both the webpack-dev-server websocket AND our websockets work properly, on both FF and Chrome...

fwextensions commented 2 years ago

Good news is the proxy changes seem to be working in both FF and Chrome now. Bad news is postcss doesn't seem to be doing anything. styles_pre.css and styles.css are exactly the same. It isn't adding the -webkit prefix to any mask CSS.

fwextensions commented 2 years ago

Not sure why, but running this does correctly prefix the mask styles: ./node_modules/.bin/postcss build/libraries/uswds/theme/styles_pre.css --use autoprefixer -o build/ libraries/uswds/theme/test.css. Maybe the watch flag is causing it to act weird?

fwextensions commented 2 years ago

postcss seems to be prefixing the styles correctly now, though it wasn't working in docker until I ran yarn on the server. Looks like postcss hadn't been installed in the docker environment. Should yarn install be added to the docker command so it always makes sure the local packages are up to date?

Adding --no-map prevented the huge inline source map from being added, so the output is only ~1KB larger than before.