Issue 6514 - IOToggle Custom Element

css/desktop-options.scss

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+@import "io-toggle.scss";

[Thomas Greiner, 2018/04/25 17:29:13]

You're not using this component in the desktop options page yet so I'd recommend
making this change together with the one where we do that.

[a.giammarchi, 2018/04/26 10:44:50]

Fair point, but that is why I was using `require` to include CSS too, if you
remember.
I otherwise have no easy way to test components within the desktop style.

I'll think about a solution, if you have any suggestion, that'd be welcome.

[Thomas Greiner, 2018/04/26 17:00:51]

I see. What about generating CSS files for each component before running the
tests? That way we wouldn't need to include unrelated styles such as the ones in
desktop-options.css in tests/io-toggle.html.

+
 html
 {
   font-size: 16px;
 }
 
 body
 {
   background-color: #F3F3F3;
   display: flex;
   justify-content: center;
@@ skipping 1548 matching lines @@
   font-size: 1rem;
   color: #077CA6;
   background-color: #E1F2FA;
 }
 
 #notification strong
 {
   flex: 1;
   text-align: center;
 }