Skip to content

Commit

Permalink
Fix broken modals in production build
Browse files Browse the repository at this point in the history
We need to overwrite postcss.config.js in vue-modal until
kouts/vue-modal#48 is merged and released.
Current crazy workaround is probably only working on Unix-like machines.
  • Loading branch information
mirekdlugosz committed Apr 3, 2022
1 parent 20e51d5 commit 51faf40
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 29 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 19 additions & 27 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
"description": "Focus on the worthwhile content with Kustosz, open source self-hosted web application. This package contains frontend code.",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build": "cp ./vue-modal-postcss.config.js ./node_modules/@kouts/vue-modal/postcss.config.js && vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@kouts/vue-modal": "^3.0.2",
"@fullhuman/postcss-purgecss": "^3.0.0",
"@kouts/vue-modal": "^3.0.2",
"@vueform/multiselect": "^2.2.0",
"axios": "^0.24.0",
"bootstrap-icons-vue": "^0.8.0",
Expand Down Expand Up @@ -48,35 +48,27 @@
"ecmaVersion": 2020
},
"rules": {
"vue/multi-word-component-names": ["error", {
"ignores": [
"Collapse",
"Entries",
"Entry",
"Filters",
"Login",
"Maintenance",
"Settings",
"Sidebar",
"Spinner"
]
}]
"vue/multi-word-component-names": [
"error",
{
"ignores": [
"Collapse",
"Entries",
"Entry",
"Filters",
"Login",
"Maintenance",
"Settings",
"Sidebar",
"Spinner"
]
}
]
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"vue": {
"publicPath": "./",
"filenameHashing": false,
"css": {
"loaderOptions": {
"scss": {
"additionalData": "@import '~@/scss/variables.scss';"
}
}
}
}
]
}
29 changes: 29 additions & 0 deletions vue-modal-postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
const IN_PRODUCTION = process.env.NODE_ENV === 'production'

module.exports = {
plugins: [
require('autoprefixer'),
IN_PRODUCTION &&
require('@fullhuman/postcss-purgecss')({
content: ['./**/*.html', './src/**/*.vue'],
defaultExtractor(content) {
const contentWithoutStyleBlocks = content.replace(
/<style[^]+?<\/style>/gi,
""
);
return (
contentWithoutStyleBlocks.match(
/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
) || []
);
},
safelist: [
/-(leave|enter|appear)(|-(to|from|active))$/,
/^(?!(|.*?:)cursor-move).+-move$/,
/^router-link(|-exact)-active$/,
/data-v-.*/,
/^vm(-.*)?$/
]
})
]
}
11 changes: 11 additions & 0 deletions vue.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = {
publicPath: "./",
filenameHashing: false,
css: {
loaderOptions: {
scss: {
additionalData: "@import '~@/scss/variables.scss';"
}
}
}
}

0 comments on commit 51faf40

Please sign in to comment.