--- a/toolkit/content/widgets.css
+++ b/toolkit/content/widgets.css
@@ -5,16 +5,19 @@
 /* ===== widgets.css =====================================================
    == Styles ported from XBL <resources>, loaded by "global.css".
    ======================================================================= */
 
 @import url("chrome://global/content/autocomplete.css");
 @import url("chrome://global/skin/autocomplete.css");
 @import url("chrome://formautofill-shared/skin/autocomplete-item.css");
 @import url("chrome://formautofill/skin/autocomplete-item.css");
+@import url("chrome://global/skin/colorpicker.css");
+@import url("chrome://global/skin/datetimebox.css");
+@import url("chrome://global/skin/datetimepopup.css");
 @import url("chrome://global/skin/dialog.css");
 @import url("chrome://global/skin/dropmarker.css");
 @import url("chrome://global/skin/findBar.css");
 @import url("chrome://global/skin/groupbox.css");
 @import url("chrome://global/skin/menu.css");
 @import url("chrome://global/skin/menulist.css");
 @import url("chrome://global/skin/notification.css");
 @import url("chrome://global/skin/popup.css");

--- a/toolkit/content/widgets/colorpicker.xml
+++ b/toolkit/content/widgets/colorpicker.xml
@@ -5,20 +5,16 @@
 
 
 <bindings id="colorpickerBindings"
    xmlns="http://www.mozilla.org/xbl"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:xbl="http://www.mozilla.org/xbl">
 
   <binding id="colorpicker" extends="chrome://global/content/bindings/general.xml#basecontrol">
-    <resources>
-      <stylesheet src="chrome://global/skin/colorpicker.css"/>
-    </resources>
-
     <content>
       <xul:vbox flex="1">
 
         <xul:hbox>
           <xul:image class="colorpickertile cp-light" color="#FFFFFF"/>
           <xul:image class="colorpickertile cp-light" color="#FFCCCC"/>
           <xul:image class="colorpickertile cp-light" color="#FFCC99"/>
           <xul:image class="colorpickertile cp-light" color="#FFFF99"/>
@@ -420,20 +416,16 @@
         }
       ]]>
       </handler>
     </handlers>
   </binding>
 
   <binding id="colorpicker-button" display="xul:menu"
            extends="chrome://global/content/bindings/general.xml#basecontrol">
-    <resources>
-      <stylesheet src="chrome://global/skin/colorpicker.css"/>
-    </resources>
-
     <content>
       <xul:image class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
 
       <xul:panel class="colorpicker-button-menupopup"
                  anonid="colorpopup" noautofocus="true" level="top"
                  onmousedown="event.stopPropagation()"
                  onpopupshowing="this._colorPicker.onPopupShowing()"
                  onpopuphiding="this._colorPicker.onPopupHiding()"

--- a/toolkit/content/widgets/datetimebox.xml
+++ b/toolkit/content/widgets/datetimebox.xml
@@ -16,17 +16,16 @@
    xmlns:xbl="http://www.mozilla.org/xbl">
 
   <binding id="date-input"
            simpleScopeChain="true"
            extends="chrome://global/content/bindings/datetimebox.xml#datetime-input-base">
     <resources>
       <stylesheet src="chrome://global/content/textbox.css"/>
       <stylesheet src="chrome://global/skin/textbox.css"/>
-      <stylesheet src="chrome://global/content/bindings/datetimebox.css"/>
     </resources>
 
     <implementation>
       <constructor>
       <![CDATA[
         /* eslint-disable no-multi-spaces */
         this.mYearPlaceHolder = ]]>"&date.year.placeholder;"<![CDATA[;
         this.mMonthPlaceHolder = ]]>"&date.month.placeholder;"<![CDATA[;
@@ -430,17 +429,16 @@
   </binding>
 
   <binding id="time-input"
            simpleScopeChain="true"
            extends="chrome://global/content/bindings/datetimebox.xml#datetime-input-base">
     <resources>
       <stylesheet src="chrome://global/content/textbox.css"/>
       <stylesheet src="chrome://global/skin/textbox.css"/>
-      <stylesheet src="chrome://global/content/bindings/datetimebox.css"/>
     </resources>
 
     <implementation>
       <property name="kMsPerSecond" readonly="true" onget="return 1000;" />
       <property name="kMsPerMinute" readonly="true" onget="return (60 * 1000);" />
 
       <constructor>
       <![CDATA[
@@ -1197,17 +1195,16 @@
     </implementation>
   </binding>
 
   <binding id="datetime-input-base"
            simpleScopeChain="true">
     <resources>
       <stylesheet src="chrome://global/content/textbox.css"/>
       <stylesheet src="chrome://global/skin/textbox.css"/>
-      <stylesheet src="chrome://global/content/bindings/datetimebox.css"/>
     </resources>
 
     <content>
       <html:div class="datetime-input-box-wrapper" anonid="input-box-wrapper"
                 xbl:inherits="context,disabled,readonly" role="presentation">
         <html:span class="datetime-input-edit-wrapper"
                    anonid="edit-wrapper">
           <!-- Each of the date/time input types will append their input child

--- a/toolkit/content/widgets/datetimepopup.xml
+++ b/toolkit/content/widgets/datetimepopup.xml
@@ -6,19 +6,16 @@
 
 <bindings id="dateTimePopupBindings"
    xmlns="http://www.mozilla.org/xbl"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:xbl="http://www.mozilla.org/xbl">
   <binding id="datetime-popup"
            extends="chrome://global/content/bindings/popup.xml#arrowpanel">
-    <resources>
-      <stylesheet src="chrome://global/skin/datetimepopup.css"/>
-    </resources>
     <implementation>
       <property name="dateTimePopupFrame">
         <getter>
           let frame = this.querySelector("#dateTimePopupFrame");
           if (!frame) {
             frame = this.ownerDocument.createElement("iframe");
             frame.id = "dateTimePopupFrame";
             this.appendChild(frame);