Skip to content

Make an electron variant that only applies when the app is running in electron #3517

Answered by yayvery
yayvery asked this question in Help
Make an `electron` variant that only applies when the app is running in electron #3517
@yayvery yayvery
Feb 3, 2021 · 1 comment
Answered by yayvery Return to top
Discussion options

yayvery
Feb 3, 2021

You must be logged in to vote
Answered by yayvery Feb 3, 2021

Solution: added electron class to <html> when the app starts, and added the following plugin:

plugin(function ({ addVariant, e }) {
      addVariant('electron', ({ modifySelectors, separator }) => {
        const modified = modifySelectors(({ className }) => {
          return `.${e(`electron${separator}${className}`)}`
        })

        modified.walkRules(rule => {
          rule.selectors = rule.selectors.map(selector => {
            return `.electron ${selector}`
          })
        })

        return modified
      })
    })

Enable the plugin like so:

variants: {
    extend: {
      inset: ['electron']
    }
}
View full answer

Replies: 1 comment

Comment options

yayvery
Feb 3, 2021
Author

You must be logged in to vote
0 replies
Answer selected by yayvery
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
1 participant
@yayvery