Closed fwextensions closed 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?
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?
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:
But the socket doesn't work in FF, then. It keeps getting closed and then reopened. UI just shows the spinner.
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
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.
@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...
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.
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?
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.
postcss
npm script and run it aftersass
in the build script to auto-prefix the CSS output.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.