Docker throwing postcss error on sapper image build - css

Question

I am trying to use sapper with tailwind wrapped in a docker container. When I try to build the image, docker throws this error:
The build doesn't fail but the css doesn't load correctly when running the app in the container. Nothing is wrong in the dev build and all css loads fine.
Dockerfile:
# This stage builds the sapper application.
FROM mhart/alpine-node:12 AS build-app
WORKDIR /app
COPY . .
RUN npm install --no-audit --unsafe-perm
RUN npm run build
# This stage installs the runtime dependencies.
FROM mhart/alpine-node:12 AS build-runtime
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --production --unsafe-perm
# This stage only needs the compiled Sapper application
# and the runtime dependencies.
FROM mhart/alpine-node:slim-12
WORKDIR /app
COPY --from=build-app /app/__sapper__ ./__sapper__
COPY --from=build-app /app/static ./static
COPY --from=build-runtime /app/node_modules ./node_modules
ENV PORT 8080
ENV HOST 0.0.0.0
EXPOSE 8080
CMD ["node", "__sapper__/build"]
Package.json:
"watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
"build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/index.css",
"build": "npm run build:tailwind && sapper build --legacy",
"dev": "sapper dev",
"export": "sapper export --legacy",
"start": "node __sapper__/build",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run",
"deploy-prod": "firebase deploy --debug --token \"$FIREBASE_TOKEN\" --only hosting",
"deploy-dev": "firebase deploy --debug --only hosting --project jointcreative1-dev"
},
"dependencies": {
"#fullhuman/postcss-purgecss": "^2.1.2",
"#rollup/plugin-json": "^4.0.3",
"compression": "^1.7.4",
"connect-redis": "^4.0.4",
"cssnano": "^4.1.10",
"express": "^4.17.1",
"express-session": "^1.17.1",
"firebase": "^7.14.2",
"postcss-load-config": "^2.1.0",
"redis": "^3.0.2",
"session-file-store": "^1.4.0",
"sirv": "^0.4.2"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/preset-env": "^7.9.0",
"#babel/runtime": "^7.9.2",
"#rollup/plugin-commonjs": "^11.0.2",
"#rollup/plugin-node-resolve": "^7.1.3",
"#rollup/plugin-replace": "^2.3.1",
"#rollup/pluginutils": "^3.0.9",
"firebase-tools": "^7.16.2",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.27",
"postcss-cli": "^7.1.0",
"rollup": "^1.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^5.2.1",
"rollup-plugin-terser": "^5.3.0",
"sapper": "^0.27.12",
"svelte": "^3.21.0",
"svelte-preprocess": "^3.7.4",
"tailwindcss": "^1.3.5"
}
Postcss.config
const tailwindcss = require("tailwindcss");
const cssnano = require("cssnano")({
preset: "default"
});
const purgecss = require("#fullhuman/postcss-purgecss")({
content: ["./src/**/*.svelte", "./src/**/*.html"],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});
module.exports = {
plugins: [
tailwindcss("./tailwind.config.js"),
...(process.env.NODE_ENV === "production"
? [purgecss, cssnano]
: [])
]
};
rollup.config
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
svelte({
dev,
hydratable: true,
emitCss: true,
preprocess: sveltePreprocess({ postcss: true }),
}),
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
legacy &&
babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/#babel/**'],
presets: [
[
'#babel/preset-env',
{
targets: '> 0.25%, not dead',
},
],
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
[
'#babel/plugin-transform-runtime',
{
useESModules: true,
},
],
],
}),
!dev &&
terser({
module: true,
}),
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
svelte({
generate: 'ssr',
dev,
preprocess: sveltePreprocess({ postcss: true })
}),
resolve({
dedupe: ['svelte'],
}),
commonjs(),
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules ||
Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
commonjs(),
!dev && terser(),
],
onwarn,
},
};