diff --git a/components/style/cbindgen.toml b/components/style/cbindgen.toml
index ff4fe642a90..86c3dddec4c 100644
--- a/components/style/cbindgen.toml
+++ b/components/style/cbindgen.toml
@@ -22,5 +22,5 @@ derive_helper_methods = true
 
 [export]
 prefix = "Style"
-include = ["StyleDisplay"]
+include = ["StyleDisplay", "StyleAppearance"]
 item_types = ["enums"]
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 62a4eb86819..312f43878ae 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -368,6 +368,34 @@ def set_gecko_property(ffi_name, expr):
     return "self.gecko.%s = %s;" % (ffi_name, expr)
 %>
 
+<%def name="impl_cbindgen_keyword(ident, gecko_ffi_name)">
+    #[allow(non_snake_case)]
+    #[inline]
+    pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
+        // unsafe: cbindgen ensures the representations match.
+        ${set_gecko_property(gecko_ffi_name, "unsafe { transmute(v) }")}
+    }
+
+    #[allow(non_snake_case)]
+    #[inline]
+    pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
+        // unsafe: cbindgen ensures the representations match.
+        unsafe { transmute(${get_gecko_property(gecko_ffi_name)}) }
+    }
+
+    #[allow(non_snake_case)]
+    #[inline]
+    pub fn copy_${ident}_from(&mut self, other: &Self) {
+        self.gecko.${gecko_ffi_name} = other.gecko.${gecko_ffi_name};
+    }
+
+    #[allow(non_snake_case)]
+    #[inline]
+    pub fn reset_${ident}(&mut self, other: &Self) {
+        self.copy_${ident}_from(other)
+    }
+</%def>
+
 <%def name="impl_keyword_setter(ident, gecko_ffi_name, keyword, cast_type='u8', on_set=None)">
     #[allow(non_snake_case)]
     pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
@@ -3015,7 +3043,7 @@ fn static_assert() {
     }
 </%def>
 
-<% skip_box_longhands= """display overflow-y vertical-align
+<% skip_box_longhands= """display -moz-appearance overflow-y vertical-align
                           animation-name animation-delay animation-duration
                           animation-direction animation-fill-mode animation-play-state
                           animation-iteration-count animation-timing-function
@@ -3065,6 +3093,8 @@ fn static_assert() {
         unsafe { transmute(self.gecko.mDisplay) }
     }
 
+    ${impl_cbindgen_keyword('_moz_appearance', 'mAppearance')}
+
     <% float_keyword = Keyword("float", "Left Right None", gecko_enum_prefix="StyleFloat") %>
     ${impl_keyword('float', 'mFloat', float_keyword)}
 
diff --git a/components/style/properties/longhands/box.mako.rs b/components/style/properties/longhands/box.mako.rs
index 627b9a8ce3a..ed08ac8504a 100644
--- a/components/style/properties/longhands/box.mako.rs
+++ b/components/style/properties/longhands/box.mako.rs
@@ -508,41 +508,16 @@ ${helpers.predefined_type("contain",
                           spec="https://drafts.csswg.org/css-contain/#contain-property")}
 
 // Non-standard
-${helpers.single_keyword("-moz-appearance",
-                         """none button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up
-                            button-bevel button-focus caret checkbox checkbox-container checkbox-label checkmenuitem
-                            dialog dualbutton groupbox inner-spin-button listbox listitem menuarrow menubar menucheckbox
-                            menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield
-                            menupopup menuradio menuseparator meterbar meterchunk number-input progressbar
-                            progressbar-vertical progresschunk progresschunk-vertical radio radio-container radio-label
-                            radiomenuitem range range-thumb resizer resizerpanel scale-horizontal scalethumbend
-                            scalethumb-horizontal scalethumbstart scalethumbtick scalethumb-vertical scale-vertical
-                            scrollbar scrollbar-horizontal scrollbar-small scrollbar-vertical scrollbarbutton-down
-                            scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbarthumb-horizontal
-                            scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical scrollcorner
-                            searchfield separator
-                            spinner spinner-downbutton spinner-textfield spinner-upbutton splitter statusbar
-                            statusbarpanel tab tabpanel tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward
-                            textfield textfield-multiline toolbar toolbarbutton toolbarbutton-dropdown toolbargripper
-                            toolbox tooltip treeheader treeheadercell treeheadersortarrow treeitem treeline treetwisty
-                            treetwistyopen treeview window
-                            -moz-gtk-info-bar -moz-mac-active-source-list-selection -moz-mac-disclosure-button-closed
-                            -moz-mac-disclosure-button-open -moz-mac-fullscreen-button -moz-mac-help-button
-                            -moz-mac-source-list -moz-mac-source-list-selection -moz-mac-vibrancy-dark
-                            -moz-mac-vibrancy-light -moz-mac-vibrant-titlebar-light -moz-mac-vibrant-titlebar-dark
-                            -moz-win-borderless-glass -moz-win-browsertabbar-toolbox
-                            -moz-win-communications-toolbox -moz-win-exclude-glass -moz-win-glass -moz-win-media-toolbox
-                            -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close
-                            -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore
-                            -moz-window-frame-bottom -moz-window-frame-left -moz-window-frame-right -moz-window-titlebar
-                            -moz-window-titlebar-maximized
-                         """,
-                         gecko_ffi_name="mAppearance",
-                         gecko_constant_prefix="ThemeWidgetType_NS_THEME",
-                         products="gecko",
-                         alias="-webkit-appearance:layout.css.webkit-appearance.enabled",
-                         spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance)",
-                         animation_value_type="discrete")}
+${helpers.predefined_type(
+    "-moz-appearance",
+    "Appearance",
+    "computed::Appearance::None",
+    products="gecko",
+    alias="-webkit-appearance:layout.css.webkit-appearance.enabled",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance)",
+    needs_context=False,
+    animation_value_type="discrete",
+)}
 
 ${helpers.predefined_type("-moz-binding", "url::UrlOrNone", "computed::url::UrlOrNone::none()",
                           products="gecko",
diff --git a/components/style/values/computed/box.rs b/components/style/values/computed/box.rs
index f5c101cbc38..b0db8337608 100644
--- a/components/style/values/computed/box.rs
+++ b/components/style/values/computed/box.rs
@@ -10,7 +10,7 @@ use values::generics::box_::AnimationIterationCount as GenericAnimationIteration
 use values::generics::box_::Perspective as GenericPerspective;
 use values::generics::box_::VerticalAlign as GenericVerticalAlign;
 
-pub use values::specified::box_::{AnimationName, Contain, Display, OverflowClipBox};
+pub use values::specified::box_::{AnimationName, Appearance, Contain, Display, OverflowClipBox};
 pub use values::specified::box_::{Clear as SpecifiedClear, Float as SpecifiedFloat};
 pub use values::specified::box_::{OverscrollBehavior, ScrollSnapType, TouchAction, TransitionProperty, WillChange};
 
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index 14a74a4ed53..fa2a9cdcf0d 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -43,7 +43,7 @@ pub use self::font::{FontFamily, FontLanguageOverride, FontStyle, FontVariantEas
 pub use self::font::{FontFeatureSettings, FontVariantLigatures, FontVariantNumeric};
 pub use self::font::{MozScriptLevel, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
 pub use self::box_::{AnimationIterationCount, AnimationName, Contain, Display, TransitionProperty};
-pub use self::box_::{Clear, Float};
+pub use self::box_::{Appearance, Clear, Float};
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective};
 pub use self::box_::{ScrollSnapType, TouchAction, VerticalAlign, WillChange};
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};
diff --git a/components/style/values/specified/box.rs b/components/style/values/specified/box.rs
index de53bb20262..5f34ef91884 100644
--- a/components/style/values/specified/box.rs
+++ b/components/style/values/specified/box.rs
@@ -881,3 +881,249 @@ pub enum Clear {
     InlineStart,
     InlineEnd
 }
+
+/// The value for the `appearance` property.
+///
+/// https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
+///
+/// NOTE(emilio): When changing this you may want to regenerate the C++ bindings
+/// (see components/style/cbindgen.toml)
+#[allow(missing_docs)]
+#[derive(Clone, Copy, Debug, Eq, Hash, MallocSizeOf, Parse, PartialEq,
+         SpecifiedValueInfo, ToCss, ToComputedValue)]
+#[repr(u8)]
+pub enum Appearance {
+    /// No appearance at all.
+    None,
+    /// A typical dialog button.
+    Button,
+    /// Various arrows that go in buttons
+    ButtonArrowDown,
+    ButtonArrowNext,
+    ButtonArrowPrevious,
+    ButtonArrowUp,
+    /// A rectangular button that contains complex content
+    /// like images (e.g. HTML <button> elements)
+    ButtonBevel,
+    /// The focus outline box inside of a button.
+    ButtonFocus,
+    /// The caret of a text area
+    Caret,
+    /// A dual toolbar button (e.g., a Back button with a dropdown)
+    Dualbutton,
+    /// A groupbox.
+    Groupbox,
+    /// A inner-spin button.
+    InnerSpinButton,
+    /// List boxes.
+    Listbox,
+    /// A listbox item.
+    Listitem,
+    /// Menu Bar background
+    Menubar,
+    /// <menu> and <menuitem> appearances
+    Menuitem,
+    Checkmenuitem,
+    Radiomenuitem,
+    /// For text on non-iconic menuitems only
+    Menuitemtext,
+    /// A dropdown list.
+    Menulist,
+    /// The dropdown button(s) that open up a dropdown list.
+    MenulistButton,
+    /// The text part of a dropdown list, to left of button.
+    MenulistText,
+    /// An editable textfield with a dropdown list (a combobox).
+    MenulistTextfield,
+    /// Menu Popup background.
+    Menupopup,
+    /// menu checkbox/radio appearances
+    Menucheckbox,
+    Menuradio,
+    Menuseparator,
+    Menuarrow,
+    /// An image in the menu gutter, like in bookmarks or history.
+    Menuimage,
+    /// A horizontal meter bar.
+    Meterbar,
+    /// The meter bar's meter indicator.
+    Meterchunk,
+    /// For HTML's <input type=number>
+    NumberInput,
+    /// A horizontal progress bar.
+    Progressbar,
+    /// The progress bar's progress indicator
+    Progresschunk,
+    /// A vertical progress bar.
+    ProgressbarVertical,
+    /// A vertical progress chunk.
+    ProgresschunkVertical,
+    /// A checkbox element.
+    Checkbox,
+    /// A radio element within a radio group.
+    Radio,
+    /// A generic container that always repaints on state changes. This is a
+    /// hack to make XUL checkboxes and radio buttons work.
+    CheckboxContainer,
+    RadioContainer,
+    /// The label part of a checkbox or radio button, used for painting a focus
+    /// outline.
+    CheckboxLabel,
+    RadioLabel,
+    /// nsRangeFrame and its subparts
+    Range,
+    RangeThumb,
+    /// The resizer background area in a status bar for the resizer widget in
+    /// the corner of a window.
+    Resizerpanel,
+    /// The resizer itself.
+    Resizer,
+    /// A slider.
+    ScaleHorizontal,
+    ScaleVertical,
+    /// A slider's thumb.
+    ScalethumbHorizontal,
+    ScalethumbVertical,
+    /// If the platform supports it, the left/right chunks of the slider thumb.
+    Scalethumbstart,
+    Scalethumbend,
+    /// The ticks for a slider.
+    Scalethumbtick,
+    /// A scrollbar.
+    Scrollbar,
+    /// A small scrollbar.
+    ScrollbarSmall,
+    /// The scrollbar slider
+    ScrollbarHorizontal,
+    ScrollbarVertical,
+    /// A scrollbar button (up/down/left/right).
+    /// Keep these in order (some code casts these values to `int` in order to
+    /// compare them against each other).
+    ScrollbarbuttonDown,
+    ScrollbarbuttonLeft,
+    ScrollbarbuttonRight,
+    ScrollbarbuttonUp,
+    /// The scrollbar thumb.
+    ScrollbarthumbHorizontal,
+    ScrollbarthumbVertical,
+    /// The scrollbar track.
+    ScrollbartrackHorizontal,
+    ScrollbartrackVertical,
+    /// The scroll corner
+    Scrollcorner,
+    /// A searchfield.
+    Searchfield,
+    /// A separator.  Can be horizontal or vertical.
+    Separator,
+    /// A spin control (up/down control for time/date pickers).
+    Spinner,
+    /// The up button of a spin control.
+    SpinnerUpbutton,
+    /// The down button of a spin control.
+    SpinnerDownbutton,
+    /// The textfield of a spin control
+    SpinnerTextfield,
+    /// A splitter.  Can be horizontal or vertical.
+    Splitter,
+    /// A status bar in a main application window.
+    Statusbar,
+    /// A single pane of a status bar.
+    Statusbarpanel,
+    /// A single tab in a tab widget.
+    Tab,
+    /// A single pane (inside the tabpanels container).
+    Tabpanel,
+    /// The tab panels container.
+    Tabpanels,
+    /// The tabs scroll arrows (left/right).
+    TabScrollArrowBack,
+    TabScrollArrowForward,
+    /// A textfield or text area.
+    Textfield,
+    /// A multiline text field.
+    TextfieldMultiline,
+    /// A toolbar in an application window.
+    Toolbar,
+    /// A single toolbar button (with no associated dropdown).
+    Toolbarbutton,
+    /// The dropdown portion of a toolbar button
+    ToolbarbuttonDropdown,
+    /// The gripper for a toolbar.
+    Toolbargripper,
+    /// The toolbox that contains the toolbars.
+    Toolbox,
+    /// A tooltip.
+    Tooltip,
+    /// A listbox or tree widget header
+    Treeheader,
+    /// An individual header cell
+    Treeheadercell,
+    /// The sort arrow for a header.
+    Treeheadersortarrow,
+    /// A tree item.
+    Treeitem,
+    /// A tree widget branch line
+    Treeline,
+    /// A tree widget twisty.
+    Treetwisty,
+    /// Open tree widget twisty.
+    Treetwistyopen,
+    /// A tree widget.
+    Treeview,
+    /// Window and dialog backgrounds.
+    Window,
+    Dialog,
+
+    /// Vista Rebars.
+    MozWinCommunicationsToolbox,
+    MozWinMediaToolbox,
+    MozWinBrowsertabbarToolbox,
+    /// Vista glass.
+    MozWinGlass,
+    MozWinBorderlessGlass,
+    /// -moz-apperance style used in setting proper glass margins.
+    MozWinExcludeGlass,
+
+    /// Titlebar elements on the Mac.
+    MozMacFullscreenButton,
+    /// Mac help button.
+    MozMacHelpButton,
+
+    /// Windows themed window frame elements.
+    MozWindowButtonBox,
+    MozWindowButtonBoxMaximized,
+    MozWindowButtonClose,
+    MozWindowButtonMaximize,
+    MozWindowButtonMinimize,
+    MozWindowButtonRestore,
+    MozWindowFrameBottom,
+    MozWindowFrameLeft,
+    MozWindowFrameRight,
+    MozWindowTitlebar,
+    MozWindowTitlebarMaximized,
+
+    MozGtkInfoBar,
+    MozMacActiveSourceListSelection,
+    MozMacDisclosureButtonClosed,
+    MozMacDisclosureButtonOpen,
+    MozMacSourceList,
+    MozMacSourceListSelection,
+    MozMacVibrancyDark,
+    MozMacVibrancyLight,
+    MozMacVibrantTitlebarDark,
+    MozMacVibrantTitlebarLight,
+
+    /// A non-disappearing scrollbar.
+    #[css(skip)]
+    ScrollbarNonDisappearing,
+
+    /// A themed focus outline (for outline:auto).
+    ///
+    /// This isn't exposed to CSS at all, just here for convenience.
+    #[css(skip)]
+    FocusOutline,
+
+    /// A dummy variant that should be last to let the GTK widget do hackery.
+    #[css(skip)]
+    Count,
+}
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index d33872f1bab..1eb59617008 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -38,7 +38,7 @@ pub use self::font::{FontFamily, FontLanguageOverride, FontStyle, FontVariantEas
 pub use self::font::{FontFeatureSettings, FontVariantLigatures, FontVariantNumeric};
 pub use self::font::{MozScriptLevel, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
 pub use self::box_::{AnimationIterationCount, AnimationName, Contain, Display};
-pub use self::box_::{Clear, Float};
+pub use self::box_::{Appearance, Clear, Float};
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective};
 pub use self::box_::{ScrollSnapType, TouchAction, TransitionProperty, VerticalAlign, WillChange};
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};