workflow: added TailwindCSS; workflow: removed watch:style script from dev script

This commit is contained in:
Roberto Tonino 2020-10-09 20:53:24 +02:00
parent 8b8b5ac934
commit f5cb7de55e
12 changed files with 46111 additions and 20 deletions

1
.gitignore vendored
View File

@ -30,3 +30,4 @@ yarn-error.log*
# Private configs
/config.py
tailwind.config.full.js

2922
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -14,9 +14,9 @@
"watch:js": "rollup -c -w",
"serve": "python ../server.py",
"serve:gui": "python ../deemix-pyweb.py --dev",
"dev": "npm-run-all --parallel serve watch:js watch:styles",
"dev:gui": "npm-run-all --parallel serve:gui watch:js watch:styles",
"build": "npm-run-all --sequential clean build:js build:styles"
"dev": "npm-run-all --parallel serve watch:js",
"dev:gui": "npm-run-all --parallel serve:gui watch:js",
"build": "npm-run-all --sequential clean build:js"
},
"dependencies": {
"flag-icon-css": "^3.5.0",
@ -35,13 +35,16 @@
"@rollup/plugin-replace": "^2.3.2",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.1",
"rimraf": "^3.0.2",
"rollup": "^2.14.0",
"rollup-plugin-analyzer": "^3.2.3",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-vue": "^4.2.0",
"sass": "^1.26.8",
"tailwindcss": "^1.8.12",
"vue-template-compiler": "^2.6.12"
}
}

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}

File diff suppressed because one or more lines are too long

View File

@ -8,7 +8,7 @@
<link rel="stylesheet" type="text/css" href="/css/vendor/material-icons.css">
<link rel="stylesheet" type="text/css" href="/css/vendor/OpenSans.css">
<link rel="stylesheet" type="text/css" href="/css/vendor/toastify.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
@ -24,7 +24,6 @@
</body>
<script type="text/javascript" src="/js/vendor/socket.io.js"></script>
<script src="/js/bundle.js"></script>
</html>

File diff suppressed because one or more lines are too long

1
public/js/bundle.js.map Normal file

File diff suppressed because one or more lines are too long

View File

@ -6,10 +6,12 @@ import alias from '@rollup/plugin-alias'
import analyze from 'rollup-plugin-analyzer'
import vue from 'rollup-plugin-vue'
import svg from 'rollup-plugin-svg'
import postcss from 'rollup-plugin-postcss'
// 'rollup -c' -> 'production' is false
// 'rollup -c' -> 'production' is false
// 'rollup -c -w' -> 'production' is true
const production = !process.env.ROLLUP_WATCH
process.env.NODE_ENV = production ? 'production' : 'development'
export default {
input: 'src/app.js',
@ -39,11 +41,12 @@ export default {
}),
// Needed for Vue imports
replace({
'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development')
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
resolve(), // Tells Rollup how to find imported modules in node_modules
commonjs(), // Converts imported modules to ES modules, if necessary
svg(),
postcss(),
vue(),
production && terser(), // Minify, but only in production
production && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production

View File

@ -5,6 +5,7 @@ window.vol = {
preview_max_volume: 100
}
import '@/styles/scss/style.scss'
import App from '@/App.vue'
import i18n from '@/plugins/i18n'
import router from '@/router'

View File

@ -1,3 +1,7 @@
@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';
// SASS only
@import './base/variables';

15
tailwind.config.js Normal file
View File

@ -0,0 +1,15 @@
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true
},
purge: ['./src/**/*.html', './src/**/*.vue'],
theme: {
extend: {}
},
variants: {},
corePlugins: {
preflight: false
},
plugins: []
}