Vue conditional * css style loader - node.js

Question

My vue app is shared between web page and electron app on touch device. On this touch device I want to include extra style. So in my App.vue there is:
<script>
var is_electron = process.hasOwnProperty("versions") && process.versions.hasOwnProperty("electron")
var is_embedded = is_electron && require("electron").remote.process.argv.includes("-e")
</script>
<style>
* {
transition-property: none !important;
transform: none !important;
animation: none !important;
cursor: none !important;
}
</style>
How can I conditionally include this * style ?

Answer 1

If the platform-specific styling is minimal, I would suggest to use some helper classes. You can even style subcomponents by scoping the css within one of these selectors.
<template>
<main :class="classes">
<!-- Hello world -->
</main>
</template>
<script>
var isElectron = process.hasOwnProperty("versions") && process.versions.hasOwnProperty("electron")
var isEmbedded = isElectron && require("electron").remote.process.argv.includes("-e")
export defualt {
name: 'App',
computed: {
classes () {
return {
electron: isElectron,
embedded: isEmbedded
}
}
}
}
</script>
<style>
.electron:not(.embedded) * {
border: 1px solid blue;
}
.embedded:not(.electron) * {
/* What kind of sorcery is this? */
}
.electron.embedded * {
border: 1px dotted red;
}
main:not(.electron):not(.embedded) * {
border: 1px dashed green;
}
</style>