Fix "sl-button" CSS class name conflicting with certain websites

[D-Bao]

The CSS used by the SimpleLogin button in email input fields could create a conflict with the CSS on certain websites using the same CSS class names. I gave unique class names for the SimpleLogin button.

[edvincandon]

maybe you could define a constant somewhere and expose that ?

const CSS_CLASS_PREFIX = "simplelogin-extension"
const slButton = InputTools.newDiv(`${CSS_CLASS_PREFIX}--button`);

/* or even a classname creator ? */
const prefixClassName = (classname) => `${CSS_CLASS_PREFIX}--${classname}`;
const slButton = InputTools.newDiv(prefixClassName("button"));

You can then maybe add a build-step to the css webpack pipeline to prefix classes automatically using that constant ? A combination of postcss-loader & postcss-prefixer could do the trick, it could be nice to setup maybe :

{
    loader: 'postcss-loader',
    options: {
        plugins: [
        require('postcss-prefixer')({
            prefix: 'simplelogin-extension--'
          })
        ]
    }
}

Just a suggestion - I don't know the full-scope of the problem ;)

[acasajus]

@edvincandon's suggestion is really good if we can make it work. This way we can have a really hard prefix to avoid colliions in the web pages but keep a readable code in the extension.

[D-Bao]

Thanks for the suggestion Edvin! However after trying to include postcss into the webpack build step, I decided to not use it for the following reason:

• (short version) it negatively impacted the size of the output files after a build because the current webpack build config is not optimized for it.
• (long version) postfix plugin could not automatically detect the css because it is not injected in a standard way but through the tabs.insertCSS method (used by manifest v2 extensions) https://github.com/simple-login/browser-extension/blob/57181d2f8304467a3243d42e51f5bef0ba58bca0/src/background/content-script.js#L22-L24 So I had to add its directory as an entry point in webpack.config.js and webpack automatically processed the whole directory and made the files heavier. Optimizing the webpack config file for the postcss plugin would require another work of its own and may introduce breaking changes. If you're curious you can see the difference for example in this output file after a webpack build with the plugin (61 KB, built from my testing branch: https://github.com/D-Bao/browser-extension/tree/postcss-prefixer, webpack added a lot of unnecessary code but it still works): and without the plugin (9 KB):

My suggestion would be to use the simple but not so elegant solution of hard coding the css prefix class name for now.

[D-Bao]

(I reverted my previous commit because I think it could be confusing to define a constant in the JS but not the CSS, if we can't automatically have a constant in both the JS and CSS then it's better to have no constant in either file.)