diff --git a/components/script/dom/cssstyledeclaration.rs b/components/script/dom/cssstyledeclaration.rs
index b9bf61c192434..cfe1e73ddcbd5 100644
--- a/components/script/dom/cssstyledeclaration.rs
+++ b/components/script/dom/cssstyledeclaration.rs
@@ -21,7 +21,7 @@ use style::properties::{DeclarationSource, Importance, PropertyDeclarationBlock,
 use style::properties::{parse_one_declaration_into, parse_style_attribute, SourcePropertyDeclaration};
 use style::selector_parser::PseudoElement;
 use style::shared_lock::Locked;
-use style_traits::{ParsingMode, ToCss};
+use style_traits::{CssWriter, ParsingMode, ToCss};
 
 // http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface
 #[dom_struct]
@@ -225,7 +225,7 @@ impl CSSStyleDeclaration {
         let mut string = String::new();
 
         self.owner.with_block(|pdb| {
-            pdb.property_value_to_css(&id, &mut string).unwrap();
+            pdb.property_value_to_css(&id, &mut CssWriter::new(&mut string)).unwrap();
         });
 
         DOMString::from(string)
@@ -392,7 +392,7 @@ impl CSSStyleDeclarationMethods for CSSStyleDeclaration {
 
         let mut string = String::new();
         self.owner.mutate_associated_block(|pdb, changed| {
-            pdb.property_value_to_css(&id, &mut string).unwrap();
+            pdb.property_value_to_css(&id, &mut CssWriter::new(&mut string)).unwrap();
             *changed = pdb.remove_property(&id);
         });
 
diff --git a/components/script/dom/medialist.rs b/components/script/dom/medialist.rs
index 6ae318da58234..449c3c19ea60e 100644
--- a/components/script/dom/medialist.rs
+++ b/components/script/dom/medialist.rs
@@ -93,12 +93,11 @@ impl MediaListMethods for MediaList {
     // https://drafts.csswg.org/cssom/#dom-medialist-item
     fn Item(&self, index: u32) -> Option<DOMString> {
         let guard = self.shared_lock().read();
-        self.media_queries.read_with(&guard).media_queries
-        .get(index as usize).and_then(|query| {
-            let mut s = String::new();
-            query.to_css(&mut s).unwrap();
-            Some(DOMString::from_string(s))
-        })
+        self.media_queries
+            .read_with(&guard)
+            .media_queries
+            .get(index as usize)
+            .map(|query| query.to_css_string().into())
     }
 
     // https://drafts.csswg.org/cssom/#dom-medialist-item
diff --git a/components/script/dom/mediaquerylist.rs b/components/script/dom/mediaquerylist.rs
index e89e7d4d744ad..4c6be0091b136 100644
--- a/components/script/dom/mediaquerylist.rs
+++ b/components/script/dom/mediaquerylist.rs
@@ -83,9 +83,7 @@ impl MediaQueryList {
 impl MediaQueryListMethods for MediaQueryList {
     // https://drafts.csswg.org/cssom-view/#dom-mediaquerylist-media
     fn Media(&self) -> DOMString {
-        let mut s = String::new();
-        self.media_query_list.to_css(&mut s).unwrap();
-        DOMString::from_string(s)
+        self.media_query_list.to_css_string().into()
     }
 
     // https://drafts.csswg.org/cssom-view/#dom-mediaquerylist-matches
diff --git a/components/style/counter_style/mod.rs b/components/style/counter_style/mod.rs
index f0fa18fda920a..72a1f266e6bec 100644
--- a/components/style/counter_style/mod.rs
+++ b/components/style/counter_style/mod.rs
@@ -17,9 +17,10 @@ use selectors::parser::SelectorParseErrorKind;
 use shared_lock::{SharedRwLockReadGuard, ToCssWithGuard};
 #[allow(unused_imports)] use std::ascii::AsciiExt;
 use std::borrow::Cow;
-use std::fmt;
+use std::fmt::{self, Write};
 use std::ops::Range;
-use style_traits::{Comma, OneOrMoreSeparated, ParseError, StyleParseErrorKind, ToCss};
+use style_traits::{Comma, CssWriter, OneOrMoreSeparated, ParseError};
+use style_traits::{StyleParseErrorKind, ToCss};
 use values::CustomIdent;
 
 /// Parse a counter style name reference.
@@ -228,8 +229,14 @@ macro_rules! counter_style_descriptors {
         }
 
         impl ToCssWithGuard for CounterStyleRuleData {
-            fn to_css<W>(&self, _guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-            where W: fmt::Write {
+            fn to_css<W>(
+                &self,
+                _guard: &SharedRwLockReadGuard,
+                dest: &mut CssWriter<W>,
+            ) -> fmt::Result
+            where
+                W: Write,
+            {
                 dest.write_str("@counter-style ")?;
                 self.name.to_css(dest)?;
                 dest.write_str(" {\n")?;
@@ -362,7 +369,10 @@ impl Parse for System {
 }
 
 impl ToCss for System {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             System::Cyclic => dest.write_str("cyclic"),
             System::Numeric => dest.write_str("numeric"),
@@ -410,7 +420,10 @@ impl Parse for Symbol {
 }
 
 impl ToCss for Symbol {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             Symbol::String(ref s) => s.to_css(dest),
             Symbol::Ident(ref s) => serialize_identifier(s, dest),
@@ -477,7 +490,10 @@ fn parse_bound<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Option<i32>, ParseE
 }
 
 impl ToCss for Ranges {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut iter = self.0.iter();
         if let Some(first) = iter.next() {
             range_to_css(first, dest)?;
@@ -492,14 +508,19 @@ impl ToCss for Ranges {
     }
 }
 
-fn range_to_css<W>(range: &Range<Option<i32>>, dest: &mut W) -> fmt::Result
-where W: fmt::Write {
+fn range_to_css<W>(range: &Range<Option<i32>>, dest: &mut CssWriter<W>) -> fmt::Result
+where
+    W: Write,
+{
     bound_to_css(range.start, dest)?;
     dest.write_char(' ')?;
     bound_to_css(range.end, dest)
 }
 
-fn bound_to_css<W>(range: Option<i32>, dest: &mut W) -> fmt::Result where W: fmt::Write {
+fn bound_to_css<W>(range: Option<i32>, dest: &mut CssWriter<W>) -> fmt::Result
+where
+    W: Write,
+{
     if let Some(finite) = range {
         finite.to_css(dest)
     } else {
@@ -556,7 +577,10 @@ impl Parse for Symbols {
 }
 
 impl ToCss for Symbols {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut iter = self.0.iter();
         let first = iter.next().expect("expected at least one symbol");
         first.to_css(dest)?;
diff --git a/components/style/custom_properties.rs b/components/style/custom_properties.rs
index 86aa135a0b8d6..0aa43109a1856 100644
--- a/components/style/custom_properties.rs
+++ b/components/style/custom_properties.rs
@@ -17,9 +17,9 @@ use smallvec::SmallVec;
 #[allow(unused_imports)] use std::ascii::AsciiExt;
 use std::borrow::{Borrow, Cow};
 use std::cmp;
-use std::fmt;
+use std::fmt::{self, Write};
 use std::hash::Hash;
-use style_traits::{ToCss, StyleParseErrorKind, ParseError};
+use style_traits::{CssWriter, ToCss, StyleParseErrorKind, ParseError};
 
 /// A custom property name is just an `Atom`.
 ///
@@ -53,8 +53,9 @@ pub struct VariableValue {
 }
 
 impl ToCss for SpecifiedValue {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         dest.write_str(&self.css)
     }
diff --git a/components/style/font_face.rs b/components/style/font_face.rs
index 80c32a552e748..6915df2c8b87e 100644
--- a/components/style/font_face.rs
+++ b/components/style/font_face.rs
@@ -20,8 +20,9 @@ use parser::{ParserContext, ParserErrorContext, Parse};
 use properties::longhands::font_language_override;
 use selectors::parser::SelectorParseErrorKind;
 use shared_lock::{SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
-use style_traits::{Comma, OneOrMoreSeparated, ParseError, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{Comma, CssWriter, OneOrMoreSeparated, ParseError};
+use style_traits::{StyleParseErrorKind, ToCss};
 use values::computed::font::FamilyName;
 use values::specified::url::SpecifiedUrl;
 
@@ -54,8 +55,9 @@ pub struct UrlSource {
 }
 
 impl ToCss for UrlSource {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         self.url.to_css(dest)
     }
@@ -272,8 +274,14 @@ macro_rules! font_face_descriptors_common {
 
         impl ToCssWithGuard for FontFaceRuleData {
             // Serialization of FontFaceRule is not specced.
-            fn to_css<W>(&self, _guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-            where W: fmt::Write {
+            fn to_css<W>(
+                &self,
+                _guard: &SharedRwLockReadGuard,
+                dest: &mut CssWriter<W>,
+            ) -> fmt::Result
+            where
+                W: Write,
+            {
                 dest.write_str("@font-face {\n")?;
                 $(
                     if let Some(ref value) = self.$ident {
diff --git a/components/style/gecko/media_queries.rs b/components/style/gecko/media_queries.rs
index bbecaff790557..69ad65ac70c9b 100644
--- a/components/style/gecko/media_queries.rs
+++ b/components/style/gecko/media_queries.rs
@@ -24,7 +24,7 @@ use std::fmt::{self, Write};
 use std::sync::atomic::{AtomicBool, AtomicIsize, AtomicUsize, Ordering};
 use str::starts_with_ignore_ascii_case;
 use string_cache::Atom;
-use style_traits::{CSSPixel, DevicePixel};
+use style_traits::{CSSPixel, CssWriter, DevicePixel};
 use style_traits::{ToCss, ParseError, StyleParseErrorKind};
 use style_traits::viewport::ViewportConstraints;
 use stylesheets::Origin;
@@ -236,7 +236,7 @@ pub struct Expression {
 }
 
 impl ToCss for Expression {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
         where W: fmt::Write,
     {
         dest.write_str("(")?;
@@ -408,7 +408,7 @@ impl MediaExpressionValue {
 }
 
 impl MediaExpressionValue {
-    fn to_css<W>(&self, dest: &mut W, for_expr: &Expression) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>, for_expr: &Expression) -> fmt::Result
         where W: fmt::Write,
     {
         match *self {
diff --git a/components/style/gecko/rules.rs b/components/style/gecko/rules.rs
index 64d30b4488369..6ebe2bf51ed34 100644
--- a/components/style/gecko/rules.rs
+++ b/components/style/gecko/rules.rs
@@ -17,7 +17,9 @@ use gecko_bindings::sugar::refptr::{RefPtr, UniqueRefPtr};
 use nsstring::nsString;
 use properties::longhands::font_language_override;
 use shared_lock::{ToCssWithGuard, SharedRwLockReadGuard};
-use std::{fmt, str};
+use std::fmt::{self, Write};
+use std::str;
+use style_traits::CssWriter;
 use values::computed::font::FamilyName;
 use values::generics::FontSettings;
 
@@ -200,8 +202,14 @@ impl From<FontFaceRuleData> for FontFaceRule {
 }
 
 impl ToCssWithGuard for FontFaceRule {
-    fn to_css<W>(&self, _guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write {
+    fn to_css<W>(
+        &self,
+        _guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut css_text = nsString::new();
         unsafe {
             bindings::Gecko_CSSFontFaceRule_GetCssText(self.get(), &mut *css_text);
@@ -237,8 +245,14 @@ impl From<counter_style::CounterStyleRuleData> for CounterStyleRule {
 }
 
 impl ToCssWithGuard for CounterStyleRule {
-    fn to_css<W>(&self, _guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write {
+    fn to_css<W>(
+        &self,
+        _guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut css_text = nsString::new();
         unsafe {
             bindings::Gecko_CSSCounterStyle_GetCssText(self.get(), &mut *css_text);
diff --git a/components/style/gecko/selector_parser.rs b/components/style/gecko/selector_parser.rs
index cb57d9b21fbcf..985bd453b4c5e 100644
--- a/components/style/gecko/selector_parser.rs
+++ b/components/style/gecko/selector_parser.rs
@@ -16,7 +16,7 @@ use selectors::parser::{self as selector_parser, Selector, Visit, SelectorParseE
 use selectors::visitor::SelectorVisitor;
 use std::fmt;
 use string_cache::{Atom, Namespace, WeakAtom, WeakNamespace};
-use style_traits::{ParseError, StyleParseErrorKind, ToCss as ToCss_};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss as ToCss_};
 
 pub use gecko::pseudo_element::{PseudoElement, EAGER_PSEUDOS, EAGER_PSEUDO_COUNT, PSEUDO_COUNT};
 pub use gecko::snapshot::SnapshotMap;
@@ -86,12 +86,12 @@ impl ToCss for NonTSPseudoClass {
                     }, )*
                     NonTSPseudoClass::MozLocaleDir(ref dir) => {
                         dest.write_str(":-moz-locale-dir(")?;
-                        dir.to_css(dest)?;
+                        dir.to_css(&mut CssWriter::new(dest))?;
                         return dest.write_char(')')
                     },
                     NonTSPseudoClass::Dir(ref dir) => {
                         dest.write_str(":dir(")?;
-                        dir.to_css(dest)?;
+                        dir.to_css(&mut CssWriter::new(dest))?;
                         return dest.write_char(')')
                     },
                     NonTSPseudoClass::MozAny(ref selectors) => {
diff --git a/components/style/gecko/url.rs b/components/style/gecko/url.rs
index 64eda812f45b7..b18d00a559c47 100644
--- a/components/style/gecko/url.rs
+++ b/components/style/gecko/url.rs
@@ -12,9 +12,9 @@ use gecko_bindings::sugar::refptr::RefPtr;
 use malloc_size_of::{MallocSizeOf, MallocSizeOfOps};
 use parser::ParserContext;
 use servo_arc::{Arc, RawOffsetArc};
-use std::fmt;
+use std::fmt::{self, Write};
 use std::mem;
-use style_traits::{ToCss, ParseError};
+use style_traits::{CssWriter, ToCss, ParseError};
 
 /// A specified url() value for gecko. Gecko does not eagerly resolve SpecifiedUrls.
 #[derive(Clone, Debug, PartialEq)]
@@ -136,7 +136,10 @@ impl SpecifiedUrl {
 }
 
 impl ToCss for SpecifiedUrl {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("url(")?;
         self.serialization.to_css(dest)?;
         dest.write_str(")")
diff --git a/components/style/lib.rs b/components/style/lib.rs
index d4d3855a481ec..d789c1d3305da 100644
--- a/components/style/lib.rs
+++ b/components/style/lib.rs
@@ -134,8 +134,8 @@ pub mod traversal_flags;
 #[allow(non_camel_case_types)]
 pub mod values;
 
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 
 #[cfg(feature = "gecko")] pub use gecko_string_cache as string_cache;
 #[cfg(feature = "gecko")] pub use gecko_string_cache::Atom;
@@ -181,11 +181,13 @@ longhand_properties_idents!(reexport_computed_values);
 
 /// Serializes as CSS a comma-separated list of any `T` that supports being
 /// serialized as CSS.
-pub fn serialize_comma_separated_list<W, T>(dest: &mut W,
-                                            list: &[T])
-                                            -> fmt::Result
-    where W: fmt::Write,
-          T: ToCss,
+pub fn serialize_comma_separated_list<W, T>(
+    dest: &mut CssWriter<W>,
+    list: &[T],
+) -> fmt::Result
+where
+    W: Write,
+    T: ToCss,
 {
     if list.is_empty() {
         return Ok(());
diff --git a/components/style/macros.rs b/components/style/macros.rs
index aa505498d3be7..ac795bdb09f66 100644
--- a/components/style/macros.rs
+++ b/components/style/macros.rs
@@ -91,8 +91,11 @@ macro_rules! define_numbered_css_keyword_enum {
             }
         }
 
-        impl ::style_traits::values::ToCss for $name {
-            fn to_css<W>(&self, dest: &mut W) -> ::std::fmt::Result
+        impl ::style_traits::ToCss for $name {
+            fn to_css<W>(
+                &self,
+                dest: &mut ::style_traits::CssWriter<W>,
+            ) -> ::std::fmt::Result
             where
                 W: ::std::fmt::Write,
             {
diff --git a/components/style/media_queries.rs b/components/style/media_queries.rs
index 42a72ba2d583e..8941b21a30a27 100644
--- a/components/style/media_queries.rs
+++ b/components/style/media_queries.rs
@@ -14,9 +14,9 @@ use error_reporting::{ContextualParseError, ParseErrorReporter};
 use parser::{ParserContext, ParserErrorContext};
 use selectors::parser::SelectorParseErrorKind;
 use serialize_comma_separated_list;
-use std::fmt;
+use std::fmt::{self, Write};
 use str::string_as_ascii_lowercase;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use style_traits::{CssWriter, ToCss, ParseError, StyleParseErrorKind};
 use values::CustomIdent;
 
 #[cfg(feature = "servo")]
@@ -33,8 +33,9 @@ pub struct MediaList {
 }
 
 impl ToCss for MediaList {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         serialize_comma_separated_list(dest, &self.media_queries)
     }
@@ -86,8 +87,9 @@ impl MediaQuery {
 }
 
 impl ToCss for MediaQuery {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         if let Some(qual) = self.qualifier {
             qual.to_css(dest)?;
diff --git a/components/style/properties/declaration_block.rs b/components/style/properties/declaration_block.rs
index c28ed5555f75c..403e3865d22ef 100644
--- a/components/style/properties/declaration_block.rs
+++ b/components/style/properties/declaration_block.rs
@@ -16,10 +16,10 @@ use properties::animated_properties::AnimationValue;
 use shared_lock::Locked;
 use smallbitvec::{self, SmallBitVec};
 use smallvec::SmallVec;
-use std::fmt;
+use std::fmt::{self, Write};
 use std::iter::{DoubleEndedIterator, Zip};
 use std::slice::Iter;
-use style_traits::{ToCss, ParseError, ParsingMode, StyleParseErrorKind};
+use style_traits::{CssWriter, ParseError, ParsingMode, StyleParseErrorKind, ToCss};
 use stylesheets::{CssRuleType, Origin, UrlExtraData};
 use super::*;
 use values::computed::Context;
@@ -306,8 +306,13 @@ impl PropertyDeclarationBlock {
     /// Find the value of the given property in this block and serialize it
     ///
     /// <https://dev.w3.org/csswg/cssom/#dom-cssstyledeclaration-getpropertyvalue>
-    pub fn property_value_to_css<W>(&self, property: &PropertyId, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    pub fn property_value_to_css<W>(
+        &self,
+        property: &PropertyId,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
     {
         // Step 1.1: done when parsing a string to PropertyId
 
@@ -611,12 +616,12 @@ impl PropertyDeclarationBlock {
     pub fn single_value_to_css<W>(
         &self,
         property: &PropertyId,
-        dest: &mut W,
+        dest: &mut CssWriter<W>,
         computed_values: Option<&ComputedValues>,
         custom_properties_block: Option<&PropertyDeclarationBlock>,
     ) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         match property.as_shorthand() {
             Err(_longhand_or_custom) => {
@@ -740,8 +745,9 @@ impl PropertyDeclarationBlock {
 
 impl ToCss for PropertyDeclarationBlock {
     // https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         let mut is_first_serialization = true; // trailing serializations should have a prepended space
 
@@ -846,14 +852,14 @@ impl ToCss for PropertyDeclarationBlock {
                         }
                         #[cfg(feature = "gecko")]
                         (_, Some(sys)) => {
-                            sys.to_css(&mut v)?;
+                            sys.to_css(&mut CssWriter::new(&mut v))?;
                             AppendableValue::Css {
                                 css: &v,
                                 with_variables: false,
                             }
                         }
                         (other, _) => {
-                            append_declaration_value(&mut v, other)?;
+                            append_declaration_value(&mut CssWriter::new(&mut v), other)?;
 
                             // Substep 6
                             if v.is_empty() {
@@ -952,10 +958,12 @@ pub enum AppendableValue<'a, I>
 }
 
 /// Potentially appends whitespace after the first (property: value;) pair.
-fn handle_first_serialization<W>(dest: &mut W,
-                                 is_first_serialization: &mut bool)
-                                 -> fmt::Result
-    where W: fmt::Write,
+fn handle_first_serialization<W>(
+    dest: &mut CssWriter<W>,
+    is_first_serialization: &mut bool,
+) -> fmt::Result
+where
+    W: Write,
 {
     if !*is_first_serialization {
         dest.write_str(" ")
@@ -966,11 +974,13 @@ fn handle_first_serialization<W>(dest: &mut W,
 }
 
 /// Append a given kind of appendable value to a serialization.
-pub fn append_declaration_value<'a, W, I>(dest: &mut W,
-                                          appendable_value: AppendableValue<'a, I>)
-                                          -> fmt::Result
-    where W: fmt::Write,
-          I: Iterator<Item=&'a PropertyDeclaration>,
+pub fn append_declaration_value<'a, W, I>(
+    dest: &mut CssWriter<W>,
+    appendable_value: AppendableValue<'a, I>,
+) -> fmt::Result
+where
+    W: Write,
+    I: Iterator<Item=&'a PropertyDeclaration>,
 {
     match appendable_value {
         AppendableValue::Css { css, .. } => {
@@ -986,15 +996,17 @@ pub fn append_declaration_value<'a, W, I>(dest: &mut W,
 }
 
 /// Append a given property and value pair to a serialization.
-pub fn append_serialization<'a, W, I, N>(dest: &mut W,
-                                         property_name: &N,
-                                         appendable_value: AppendableValue<'a, I>,
-                                         importance: Importance,
-                                         is_first_serialization: &mut bool)
-                                         -> fmt::Result
-    where W: fmt::Write,
-          I: Iterator<Item=&'a PropertyDeclaration>,
-          N: ToCss,
+pub fn append_serialization<'a, W, I, N>(
+    dest: &mut CssWriter<W>,
+    property_name: &N,
+    appendable_value: AppendableValue<'a, I>,
+    importance: Importance,
+    is_first_serialization: &mut bool,
+) -> fmt::Result
+where
+    W: Write,
+    I: Iterator<Item=&'a PropertyDeclaration>,
+    N: ToCss,
 {
     handle_first_serialization(dest, is_first_serialization)?;
 
diff --git a/components/style/properties/helpers.mako.rs b/components/style/properties/helpers.mako.rs
index becef7246570b..4d7c1ff19add7 100644
--- a/components/style/properties/helpers.mako.rs
+++ b/components/style/properties/helpers.mako.rs
@@ -82,8 +82,8 @@
                           need_animatable=need_animatable, **kwargs)">
         #[allow(unused_imports)]
         use smallvec::SmallVec;
-        use std::fmt;
-        use style_traits::{Separator, ToCss};
+        use std::fmt::{self, Write};
+        use style_traits::{CssWriter, Separator, ToCss};
 
         pub mod single_value {
             #[allow(unused_imports)]
@@ -154,8 +154,9 @@
         }
 
         impl ToCss for computed_value::T {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-                where W: fmt::Write,
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
             {
                 let mut iter = self.0.iter();
                 if let Some(val) = iter.next() {
@@ -180,8 +181,9 @@
         pub struct SpecifiedValue(pub Vec<single_value::SpecifiedValue>);
 
         impl ToCss for SpecifiedValue {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-                where W: fmt::Write,
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
             {
                 let mut iter = self.0.iter();
                 if let Some(val) = iter.next() {
@@ -682,11 +684,11 @@
         #[allow(unused_imports)]
         use selectors::parser::SelectorParseErrorKind;
         #[allow(unused_imports)]
-        use std::fmt;
+        use std::fmt::{self, Write};
         #[allow(unused_imports)]
         use style_traits::{ParseError, StyleParseErrorKind};
         #[allow(unused_imports)]
-        use style_traits::ToCss;
+        use style_traits::{CssWriter, ToCss};
 
         pub struct Longhands {
             % for sub_property in shorthand.sub_properties:
@@ -806,7 +808,10 @@
         }
 
         impl<'a> ToCss for LonghandsToSerialize<'a> {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
+            {
                 let rect = Rect::new(
                     % for side in ["top", "right", "bottom", "left"]:
                     &self.${to_rust_ident(sub_property_pattern % side)},
diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index a4581f1c31e90..6a76f0a84e177 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -27,9 +27,9 @@ use selectors::parser::SelectorParseErrorKind;
 use servo_arc::Arc;
 use smallvec::SmallVec;
 use std::cmp;
-use std::fmt;
+use std::fmt::{self, Write};
 #[cfg(feature = "gecko")] use hash::FnvHashMap;
-use style_traits::{ParseError, ToCss};
+use style_traits::{CssWriter, ParseError, ToCss};
 use super::ComputedValues;
 use values::{CSSFloat, CustomIdent, Either};
 use values::animated::{Animate, Procedure, ToAnimatedValue, ToAnimatedZero};
@@ -94,7 +94,10 @@ pub enum TransitionProperty {
 }
 
 impl ToCss for TransitionProperty {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             TransitionProperty::All => dest.write_str("all"),
             TransitionProperty::Shorthand(ref id) => dest.write_str(id.name()),
diff --git a/components/style/properties/longhand/color.mako.rs b/components/style/properties/longhand/color.mako.rs
index 459352fd59c49..3dfc685f082ab 100644
--- a/components/style/properties/longhand/color.mako.rs
+++ b/components/style/properties/longhand/color.mako.rs
@@ -66,8 +66,8 @@ pub mod system_colors {
     use cssparser::Parser;
     use gecko_bindings::bindings::Gecko_GetLookAndFeelSystemColor;
     use gecko_bindings::structs::root::mozilla::LookAndFeel_ColorID;
-    use std::fmt;
-    use style_traits::ToCss;
+    use std::fmt::{self, Write};
+    use style_traits::{CssWriter, ToCss};
     use values::computed::{Context, ToComputedValue};
 
     pub type SystemColor = LookAndFeel_ColorID;
@@ -77,7 +77,10 @@ pub mod system_colors {
     malloc_size_of_is_0!(SystemColor);
 
     impl ToCss for SystemColor {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+        where
+            W: Write,
+        {
             let s = match *self {
                 % for color in system_colors + extra_colors:
                     LookAndFeel_ColorID::eColorID_${to_rust_ident(color)} => "${color}",
diff --git a/components/style/properties/longhand/counters.mako.rs b/components/style/properties/longhand/counters.mako.rs
index c65a5ba323965..d55e880dcc9ac 100644
--- a/components/style/properties/longhand/counters.mako.rs
+++ b/components/style/properties/longhand/counters.mako.rs
@@ -23,8 +23,8 @@
 
     pub mod computed_value {
         use cssparser;
-        use std::fmt;
-        use style_traits::ToCss;
+        use std::fmt::{self, Write};
+        use style_traits::{CssWriter, ToCss};
         #[cfg(feature = "gecko")]
         use values::specified::url::SpecifiedUrl;
 
@@ -62,7 +62,10 @@
         }
 
         impl ToCss for ContentItem {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
+            {
                 match *self {
                     ContentItem::String(ref s) => s.to_css(dest),
                     ContentItem::Counter(ref s, ref counter_style) => {
@@ -106,7 +109,10 @@
         }
 
         impl ToCss for T {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
+            {
                 match *self {
                     T::Normal => dest.write_str("normal"),
                     T::None => dest.write_str("none"),
@@ -232,8 +238,8 @@
 
 <%helpers:longhand name="counter-increment" animation_value_type="discrete"
                    spec="https://drafts.csswg.org/css-lists/#propdef-counter-increment">
-    use std::fmt;
-    use style_traits::ToCss;
+    use std::fmt::{self, Write};
+    use style_traits::{CssWriter, ToCss};
     use values::CustomIdent;
 
     #[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
@@ -241,16 +247,17 @@
     pub struct SpecifiedValue(pub Vec<(CustomIdent, specified::Integer)>);
 
     pub mod computed_value {
-        use std::fmt;
-        use style_traits::ToCss;
+        use std::fmt::{self, Write};
+        use style_traits::{CssWriter, ToCss};
         use values::CustomIdent;
 
         #[derive(Clone, Debug, MallocSizeOf, PartialEq)]
         pub struct T(pub Vec<(CustomIdent, i32)>);
 
         impl ToCss for T {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-                where W: fmt::Write,
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
             {
                 if self.0.is_empty() {
                     return dest.write_str("none")
@@ -292,10 +299,10 @@
         computed_value::T(Vec::new())
     }
 
-
     impl ToCss for SpecifiedValue {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-            where W: fmt::Write,
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+        where
+            W: Write,
         {
             if self.0.is_empty() {
                 return dest.write_str("none");
diff --git a/components/style/properties/longhand/inherited_text.mako.rs b/components/style/properties/longhand/inherited_text.mako.rs
index a9ae76fe9a34c..c7ad330a274e6 100644
--- a/components/style/properties/longhand/inherited_text.mako.rs
+++ b/components/style/properties/longhand/inherited_text.mako.rs
@@ -193,8 +193,8 @@ ${helpers.predefined_type(
                    animation_value_type="discrete"
                    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-style">
     use computed_values::writing_mode::T as WritingMode;
-    use std::fmt;
-    use style_traits::ToCss;
+    use std::fmt::{self, Write};
+    use style_traits::{CssWriter, ToCss};
     use unicode_segmentation::UnicodeSegmentation;
 
 
@@ -229,7 +229,7 @@ ${helpers.predefined_type(
     }
 
     impl ToCss for KeywordValue {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             if let Some(fill) = self.fill() {
                 if fill {
                     dest.write_str("filled")?;
@@ -246,8 +246,12 @@ ${helpers.predefined_type(
             Ok(())
         }
     }
+
     impl ToCss for computed_value::KeywordValue {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+        where
+            W: Write,
+        {
             if self.fill {
                 dest.write_str("filled")?;
             } else {
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 738a07bedd069..51d7077a1d9d6 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -16,8 +16,9 @@ use custom_properties::CustomPropertiesBuilder;
 use servo_arc::{Arc, UniqueArc};
 use smallbitvec::SmallBitVec;
 use std::borrow::Cow;
-use std::{fmt, mem, ops};
+use std::{mem, ops};
 use std::cell::RefCell;
+use std::fmt::{self, Write};
 
 #[cfg(feature = "servo")] use cssparser::RGBA;
 use cssparser::{CowRcStr, Parser, TokenSerializationType, serialize_identifier};
@@ -38,7 +39,7 @@ use selector_parser::PseudoElement;
 use selectors::parser::SelectorParseErrorKind;
 #[cfg(feature = "servo")] use servo_config::prefs::PREFS;
 use shared_lock::StylesheetGuards;
-use style_traits::{ParsingMode, ToCss, ParseError, StyleParseErrorKind};
+use style_traits::{CssWriter, ParseError, ParsingMode, StyleParseErrorKind, ToCss};
 use stylesheets::{CssRuleType, Origin, UrlExtraData};
 #[cfg(feature = "servo")] use values::Either;
 use values::generics::text::LineHeight;
@@ -852,9 +853,14 @@ impl ShorthandId {
     ///
     /// Returns an error if writing to the stream fails, or if the declarations
     /// do not map to a shorthand.
-    pub fn longhands_to_css<'a, W, I>(&self, declarations: I, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
-              I: Iterator<Item=&'a PropertyDeclaration>,
+    pub fn longhands_to_css<'a, W, I>(
+        &self,
+        declarations: I,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
+        I: Iterator<Item=&'a PropertyDeclaration>,
     {
         match *self {
             ShorthandId::All => {
@@ -1072,8 +1078,9 @@ impl UnparsedValue {
 }
 
 impl<'a, T: ToCss> ToCss for DeclaredValue<'a, T> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         match *self {
             DeclaredValue::Value(ref inner) => inner.to_css(dest),
@@ -1101,8 +1108,9 @@ pub enum PropertyDeclarationId<'a> {
 }
 
 impl<'a> ToCss for PropertyDeclarationId<'a> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         match *self {
             PropertyDeclarationId::Longhand(id) => dest.write_str(id.name()),
@@ -1147,7 +1155,6 @@ impl<'a> PropertyDeclarationId<'a> {
         match *self {
             PropertyDeclarationId::Longhand(id) => id.name().into(),
             PropertyDeclarationId::Custom(name) => {
-                use std::fmt::Write;
                 let mut s = String::new();
                 write!(&mut s, "--{}", name).unwrap();
                 s.into()
@@ -1174,13 +1181,14 @@ pub enum PropertyId {
 
 impl fmt::Debug for PropertyId {
     fn fmt(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
-        self.to_css(formatter)
+        self.to_css(&mut CssWriter::new(formatter))
     }
 }
 
 impl ToCss for PropertyId {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         match *self {
             PropertyId::Longhand(id) => dest.write_str(id.name()),
@@ -1328,7 +1336,6 @@ impl PropertyId {
             PropertyId::LonghandAlias(id, _) |
             PropertyId::Longhand(id) => id.name().into(),
             PropertyId::Custom(ref name) => {
-                use std::fmt::Write;
                 let mut s = String::new();
                 write!(&mut s, "--{}", name).unwrap();
                 s.into()
@@ -1461,15 +1468,17 @@ pub enum PropertyDeclaration {
 
 impl fmt::Debug for PropertyDeclaration {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
-        self.id().to_css(f)?;
-        f.write_str(": ")?;
-        self.to_css(f)
+        let mut dest = CssWriter::new(f);
+        self.id().to_css(&mut dest)?;
+        dest.write_str(": ")?;
+        self.to_css(&mut dest)
     }
 }
 
 impl ToCss for PropertyDeclaration {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         match *self {
             % for property in data.longhands:
diff --git a/components/style/properties/shorthand/background.mako.rs b/components/style/properties/shorthand/background.mako.rs
index 4fb5f2c10f43b..8fd2101ecec2b 100644
--- a/components/style/properties/shorthand/background.mako.rs
+++ b/components/style/properties/shorthand/background.mako.rs
@@ -131,7 +131,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             let len = self.background_image.0.len();
             // There should be at least one declared value
             if len == 0 {
@@ -228,7 +228,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             let len = self.background_position_x.0.len();
             if len == 0 || len != self.background_position_y.0.len() {
                 return Ok(());
diff --git a/components/style/properties/shorthand/border.mako.rs b/components/style/properties/shorthand/border.mako.rs
index 3d175350a90ed..0209ebb23766c 100644
--- a/components/style/properties/shorthand/border.mako.rs
+++ b/components/style/properties/shorthand/border.mako.rs
@@ -34,7 +34,7 @@ ${helpers.four_sides_shorthand("border-style", "border-%s-style",
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             % for side in PHYSICAL_SIDES:
             let ${side} = &self.border_${side}_width;
             % endfor
@@ -113,7 +113,7 @@ pub fn parse_border<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             super::serialize_directional_border(
                 dest,
                 self.border_${to_rust_ident(side)}_width,
@@ -156,7 +156,7 @@ pub fn parse_border<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             let all_equal = {
                 % for side in PHYSICAL_SIDES:
                   let border_${side}_width = self.border_${side}_width;
@@ -215,7 +215,7 @@ pub fn parse_border<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             let LonghandsToSerialize {
                 border_top_left_radius: &BorderCornerRadius(ref tl),
                 border_top_right_radius: &BorderCornerRadius(ref tr),
@@ -315,7 +315,7 @@ pub fn parse_border<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.border_image_source.to_css(dest)?;
             dest.write_str(" ")?;
             self.border_image_slice.to_css(dest)?;
diff --git a/components/style/properties/shorthand/box.mako.rs b/components/style/properties/shorthand/box.mako.rs
index ca8523173f8a8..137599078ad2c 100644
--- a/components/style/properties/shorthand/box.mako.rs
+++ b/components/style/properties/shorthand/box.mako.rs
@@ -48,7 +48,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             if self.overflow_x == self.overflow_y {
                 self.overflow_x.to_css(dest)
             } else {
@@ -83,7 +83,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.overflow_clip_box_block.to_css(dest)?;
 
             if self.overflow_clip_box_block != self.overflow_clip_box_inline {
@@ -203,7 +203,7 @@ macro_rules! try_parse_one {
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             let property_len = self.transition_property.0.len();
 
             // There are two cases that we can do shorthand serialization:
@@ -327,7 +327,7 @@ macro_rules! try_parse_one {
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             let len = self.animation_name.0.len();
             // There should be at least one declared value
             if len == 0 {
@@ -376,7 +376,7 @@ macro_rules! try_parse_one {
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
         // Serializes into the single keyword value if both scroll-snap-type-x and scroll-snap-type-y are same.
         // Otherwise into an empty string. This is done to match Gecko's behaviour.
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             if self.scroll_snap_type_x == self.scroll_snap_type_y {
                 self.scroll_snap_type_x.to_css(dest)
             } else {
@@ -406,7 +406,7 @@ macro_rules! try_parse_one {
     impl<'a> ToCss for LonghandsToSerialize<'a> {
         // Serializes into the single keyword value if both overscroll-behavior-x and overscroll-behavior-y are same.
         // Otherwise into two values separated by a space.
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.overscroll_behavior_x.to_css(dest)?;
             if self.overscroll_behavior_y != self.overscroll_behavior_x {
                 dest.write_str(" ")?;
diff --git a/components/style/properties/shorthand/font.mako.rs b/components/style/properties/shorthand/font.mako.rs
index b40505e3c8602..22bbe7d71ff42 100644
--- a/components/style/properties/shorthand/font.mako.rs
+++ b/components/style/properties/shorthand/font.mako.rs
@@ -151,9 +151,14 @@
     }
 
     impl<'a> LonghandsToSerialize<'a> {
-        fn to_css_for<W>(&self,
-                         serialize_for: SerializeFor,
-                         dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css_for<W>(
+            &self,
+            serialize_for: SerializeFor,
+            dest: &mut CssWriter<W>,
+        ) -> fmt::Result
+        where
+            W: Write,
+        {
             % if product == "gecko":
                 match self.check_system() {
                     CheckSystemResult::AllSystem(sys) => return sys.to_css(dest),
@@ -226,7 +231,7 @@
             }
 
             /// Serialize the shorthand value for canvas font attribute.
-            pub fn to_css_for_canvas<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            pub fn to_css_for_canvas<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
                 self.to_css_for(SerializeFor::Canvas, dest)
             }
         % endif
@@ -234,7 +239,7 @@
 
     // This may be a bit off, unsure, possibly needs changes
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.to_css_for(SerializeFor::Normal, dest)
         }
     }
@@ -309,7 +314,7 @@
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
         #[allow(unused_assignments)]
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
 
             let has_none_ligatures =
             % if product == "gecko":
diff --git a/components/style/properties/shorthand/inherited_svg.mako.rs b/components/style/properties/shorthand/inherited_svg.mako.rs
index 76f1c840f0e8f..1742ef28ed744 100644
--- a/components/style/properties/shorthand/inherited_svg.mako.rs
+++ b/components/style/properties/shorthand/inherited_svg.mako.rs
@@ -22,7 +22,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             if self.marker_start == self.marker_mid && self.marker_mid == self.marker_end {
                 self.marker_start.to_css(dest)
             } else {
diff --git a/components/style/properties/shorthand/mask.mako.rs b/components/style/properties/shorthand/mask.mako.rs
index 87feba23d1624..483ce9b50f870 100644
--- a/components/style/properties/shorthand/mask.mako.rs
+++ b/components/style/properties/shorthand/mask.mako.rs
@@ -121,7 +121,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             use properties::longhands::mask_origin::single_value::computed_value::T as Origin;
             use properties::longhands::mask_clip::single_value::computed_value::T as Clip;
 
@@ -214,7 +214,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             let len = self.mask_position_x.0.len();
             if len == 0 || self.mask_position_y.0.len() != len {
                 return Ok(());
diff --git a/components/style/properties/shorthand/outline.mako.rs b/components/style/properties/shorthand/outline.mako.rs
index 0fe8a11118be1..95d6b0be28ae2 100644
--- a/components/style/properties/shorthand/outline.mako.rs
+++ b/components/style/properties/shorthand/outline.mako.rs
@@ -76,7 +76,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             use values::generics::border::BorderCornerRadius;
 
             let LonghandsToSerialize {
diff --git a/components/style/properties/shorthand/position.mako.rs b/components/style/properties/shorthand/position.mako.rs
index 1bddeeb8b335b..95a4c183e2057 100644
--- a/components/style/properties/shorthand/position.mako.rs
+++ b/components/style/properties/shorthand/position.mako.rs
@@ -119,7 +119,7 @@
   }
 
   impl<'a> ToCss for LonghandsToSerialize<'a>  {
-      fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+      fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
           if self.grid_row_gap == self.grid_column_gap {
             self.grid_row_gap.to_css(dest)
           } else {
@@ -163,7 +163,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a> {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.grid_${kind}_start.to_css(dest)?;
             dest.write_str(" / ")?;
             self.grid_${kind}_end.to_css(dest)
@@ -224,7 +224,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a> {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.grid_row_start.to_css(dest)?;
             let values = [&self.grid_column_start, &self.grid_row_end, &self.grid_column_end];
             for value in &values {
@@ -362,10 +362,14 @@
     }
 
     /// Serialization for `<grid-template>` shorthand (also used by `grid` shorthand).
-    pub fn serialize_grid_template<W>(template_rows: &GridTemplateComponent,
-                                      template_columns: &GridTemplateComponent,
-                                      template_areas: &Either<TemplateAreas, None_>,
-                                      dest: &mut W) -> fmt::Result where W: fmt::Write {
+    pub fn serialize_grid_template<W>(
+        template_rows: &GridTemplateComponent,
+        template_columns: &GridTemplateComponent,
+        template_areas: &Either<TemplateAreas, None_>,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write {
         match *template_areas {
             Either::Second(_none) => {
                 template_rows.to_css(dest)?;
@@ -451,7 +455,7 @@
 
     impl<'a> ToCss for LonghandsToSerialize<'a> {
         #[inline]
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             serialize_grid_template(self.grid_template_rows, self.grid_template_columns,
                                     self.grid_template_areas, dest)
         }
@@ -542,7 +546,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a> {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             if *self.grid_template_areas != Either::Second(None_) ||
                (*self.grid_template_rows != GridTemplateComponent::None &&
                    *self.grid_template_columns != GridTemplateComponent::None) ||
@@ -635,7 +639,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a> {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.align_content.to_css(dest)?;
             if self.align_content != self.justify_content {
                 dest.write_str(" ")?;
@@ -670,7 +674,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a> {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             if self.align_self == self.justify_self {
                 self.align_self.to_css(dest)
             } else {
@@ -713,7 +717,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a> {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             if self.align_items.0 == self.justify_items.0 {
                 self.align_items.to_css(dest)
             } else {
diff --git a/components/style/properties/shorthand/serialize.mako.rs b/components/style/properties/shorthand/serialize.mako.rs
index a86704a5488db..afcbe3c488bb9 100644
--- a/components/style/properties/shorthand/serialize.mako.rs
+++ b/components/style/properties/shorthand/serialize.mako.rs
@@ -2,15 +2,20 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-use style_traits::ToCss;
+use style_traits::{CssWriter, ToCss};
 use values::specified::{BorderStyle, Color};
-use std::fmt;
+use std::fmt::{self, Write};
 
-fn serialize_directional_border<W, I,>(dest: &mut W,
-                                       width: &I,
-                                       style: &BorderStyle,
-                                       color: &Color)
-    -> fmt::Result where W: fmt::Write, I: ToCss {
+fn serialize_directional_border<W, I,>(
+    dest: &mut CssWriter<W>,
+    width: &I,
+    style: &BorderStyle,
+    color: &Color,
+) -> fmt::Result
+where
+    W: Write,
+    I: ToCss,
+{
     width.to_css(dest)?;
     dest.write_str(" ")?;
     style.to_css(dest)?;
diff --git a/components/style/properties/shorthand/text.mako.rs b/components/style/properties/shorthand/text.mako.rs
index 2c21d1971bf9b..c53f1b8b27e4c 100644
--- a/components/style/properties/shorthand/text.mako.rs
+++ b/components/style/properties/shorthand/text.mako.rs
@@ -62,7 +62,7 @@
     }
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.text_decoration_line.to_css(dest)?;
 
             % if product == "gecko":
diff --git a/components/style/selector_parser.rs b/components/style/selector_parser.rs
index 54978d284b721..e68aded1c9a7f 100644
--- a/components/style/selector_parser.rs
+++ b/components/style/selector_parser.rs
@@ -9,7 +9,7 @@
 use cssparser::{Parser as CssParser, ParserInput};
 use selectors::parser::SelectorList;
 use std::fmt::{self, Debug, Write};
-use style_traits::{ParseError, ToCss};
+use style_traits::{CssWriter, ParseError, ToCss};
 use stylesheets::{Origin, Namespaces, UrlExtraData};
 
 /// A convenient alias for the type that represents an attribute value used for
@@ -201,7 +201,7 @@ impl Direction {
 }
 
 impl ToCss for Direction {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write {
         let dir_str = match *self {
             Direction::Rtl => "rtl",
             Direction::Ltr => "ltr",
diff --git a/components/style/servo/media_queries.rs b/components/style/servo/media_queries.rs
index ea71ee84ab0da..79bc288b775a1 100644
--- a/components/style/servo/media_queries.rs
+++ b/components/style/servo/media_queries.rs
@@ -12,9 +12,9 @@ use media_queries::MediaType;
 use parser::ParserContext;
 use properties::ComputedValues;
 use selectors::parser::SelectorParseErrorKind;
-use std::fmt;
+use std::fmt::{self, Write};
 use std::sync::atomic::{AtomicBool, AtomicIsize, Ordering};
-use style_traits::{CSSPixel, DevicePixel, ToCss, ParseError};
+use style_traits::{CSSPixel, CssWriter, DevicePixel, ToCss, ParseError};
 use style_traits::viewport::ViewportConstraints;
 use values::computed::{self, ToComputedValue};
 use values::computed::font::FontSize;
@@ -218,8 +218,9 @@ impl Expression {
 }
 
 impl ToCss for Expression {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         let (s, l) = match self.0 {
             ExpressionKind::Width(Range::Min(ref l)) => ("(min-width: ", l),
diff --git a/components/style/servo/url.rs b/components/style/servo/url.rs
index 6dc1d46d2aa04..25a4aa5297d45 100644
--- a/components/style/servo/url.rs
+++ b/components/style/servo/url.rs
@@ -6,12 +6,12 @@
 
 use parser::ParserContext;
 use servo_url::ServoUrl;
-use std::fmt;
+use std::fmt::{self, Write};
 // Note: We use std::sync::Arc rather than servo_arc::Arc here because the
 // nonzero optimization is important in keeping the size of SpecifiedUrl below
 // the threshold.
 use std::sync::Arc;
-use style_traits::{ToCss, ParseError};
+use style_traits::{CssWriter, ParseError, ToCss};
 use values::computed::{Context, ToComputedValue, ComputedUrl};
 
 /// A specified url() value for servo.
@@ -111,7 +111,10 @@ impl PartialEq for SpecifiedUrl {
 }
 
 impl ToCss for SpecifiedUrl {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let string = match self.original {
             Some(ref original) => &**original,
             None => match self.resolved {
diff --git a/components/style/shared_lock.rs b/components/style/shared_lock.rs
index 29b92b29d36c2..3e922b31f54bf 100644
--- a/components/style/shared_lock.rs
+++ b/components/style/shared_lock.rs
@@ -10,9 +10,10 @@ use atomic_refcell::{AtomicRefCell, AtomicRef, AtomicRefMut};
 use parking_lot::RwLock;
 use servo_arc::Arc;
 use std::cell::UnsafeCell;
-use std::fmt;
+use std::fmt::{self, Write};
 #[cfg(feature = "gecko")]
 use std::ptr;
+use style_traits::CssWriter;
 use stylesheets::Origin;
 
 /// A shared read/write lock that can protect multiple objects.
@@ -222,8 +223,13 @@ mod compile_time_assert {
 /// Like ToCss, but with a lock guard given by the caller.
 pub trait ToCssWithGuard {
     /// Serialize `self` in CSS syntax, writing to `dest`, using the given lock guard.
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write;
+    fn to_css<W>(
+        &self,
+        guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write;
 
     /// Serialize `self` in CSS syntax using the given lock guard and return a string.
     ///
@@ -231,7 +237,7 @@ pub trait ToCssWithGuard {
     #[inline]
     fn to_css_string(&self, guard: &SharedRwLockReadGuard) -> String {
         let mut s = String::new();
-        self.to_css(guard, &mut s).unwrap();
+        self.to_css(guard, &mut CssWriter::new(&mut s)).unwrap();
         s
     }
 }
diff --git a/components/style/stylesheets/document_rule.rs b/components/style/stylesheets/document_rule.rs
index 61c8f2762ef8d..236dd48bb4347 100644
--- a/components/style/stylesheets/document_rule.rs
+++ b/components/style/stylesheets/document_rule.rs
@@ -13,8 +13,8 @@ use media_queries::Device;
 use parser::{Parse, ParserContext};
 use servo_arc::Arc;
 use shared_lock::{DeepCloneParams, DeepCloneWithLock, Locked, SharedRwLock, SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use stylesheets::CssRules;
 use values::specified::url::SpecifiedUrl;
 
@@ -40,8 +40,14 @@ impl DocumentRule {
 }
 
 impl ToCssWithGuard for DocumentRule {
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write {
+    fn to_css<W>(
+        &self,
+        guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("@-moz-document ")?;
         self.condition.to_css(dest)?;
         dest.write_str(" {")?;
@@ -167,8 +173,10 @@ impl UrlMatchingFunction {
 }
 
 impl ToCss for UrlMatchingFunction {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             UrlMatchingFunction::Url(ref url) => {
                 url.to_css(dest)
@@ -219,8 +227,10 @@ impl DocumentCondition {
 }
 
 impl ToCss for DocumentCondition {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut iter = self.0.iter();
         let first = iter.next()
             .expect("Empty DocumentCondition, should contain at least one URL matching function");
diff --git a/components/style/stylesheets/font_feature_values_rule.rs b/components/style/stylesheets/font_feature_values_rule.rs
index a880d402b45c6..b07a84374240b 100644
--- a/components/style/stylesheets/font_feature_values_rule.rs
+++ b/components/style/stylesheets/font_feature_values_rule.rs
@@ -16,8 +16,8 @@ use gecko_bindings::bindings::Gecko_AppendFeatureValueHashEntry;
 use gecko_bindings::structs::{self, gfxFontFeatureValueSet, nsTArray};
 use parser::{ParserContext, ParserErrorContext, Parse};
 use shared_lock::{SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
-use style_traits::{ParseError, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use stylesheets::CssRuleType;
 use values::computed::font::FamilyName;
 
@@ -36,7 +36,10 @@ pub struct FFVDeclaration<T> {
 }
 
 impl<T: ToCss> ToCss for FFVDeclaration<T> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         serialize_identifier(&self.name.to_string(), dest)?;
         dest.write_str(": ")?;
         self.value.to_css(dest)?;
@@ -100,7 +103,10 @@ impl Parse for PairValues {
 }
 
 impl ToCss for PairValues {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         self.0.to_css(dest)?;
         if let Some(second) = self.1 {
             dest.write_char(' ')?;
@@ -152,7 +158,10 @@ impl Parse for VectorValues {
 }
 
 impl ToCss for VectorValues {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut iter = self.0.iter();
         let first = iter.next();
         if let Some(first) = first {
@@ -279,7 +288,13 @@ macro_rules! font_feature_values_blocks {
             }
 
             /// Prints font family names.
-            pub fn font_family_to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            pub fn font_family_to_css<W>(
+                &self,
+                dest: &mut CssWriter<W>,
+            ) -> fmt::Result
+            where
+                W: Write,
+            {
                 let mut iter = self.family_names.iter();
                 iter.next().unwrap().to_css(dest)?;
                 for val in iter {
@@ -290,7 +305,10 @@ macro_rules! font_feature_values_blocks {
             }
 
             /// Prints inside of `@font-feature-values` block.
-            pub fn value_to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            pub fn value_to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
+            {
                 $(
                     if self.$ident.len() > 0 {
                         dest.write_str(concat!("@", $name, " {\n"))?;
@@ -341,8 +359,13 @@ macro_rules! font_feature_values_blocks {
         }
 
         impl ToCssWithGuard for FontFeatureValuesRule {
-            fn to_css<W>(&self, _guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-                where W: fmt::Write
+            fn to_css<W>(
+                &self,
+                _guard: &SharedRwLockReadGuard,
+                dest: &mut CssWriter<W>,
+            ) -> fmt::Result
+            where
+                W: Write,
             {
                 dest.write_str("@font-feature-values ")?;
                 self.font_family_to_css(dest)?;
diff --git a/components/style/stylesheets/import_rule.rs b/components/style/stylesheets/import_rule.rs
index 8568012099a40..3d8f8d14f9f29 100644
--- a/components/style/stylesheets/import_rule.rs
+++ b/components/style/stylesheets/import_rule.rs
@@ -9,8 +9,8 @@
 use cssparser::SourceLocation;
 use media_queries::MediaList;
 use shared_lock::{DeepCloneWithLock, DeepCloneParams, SharedRwLock, SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use stylesheets::{StylesheetContents, StylesheetInDocument};
 use values::specified::url::SpecifiedUrl;
 
@@ -107,8 +107,13 @@ impl DeepCloneWithLock for ImportRule {
 }
 
 impl ToCssWithGuard for ImportRule {
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(
+        &self,
+        guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
     {
         dest.write_str("@import ")?;
         self.url.to_css(dest)?;
diff --git a/components/style/stylesheets/keyframes_rule.rs b/components/style/stylesheets/keyframes_rule.rs
index 60d7ee3f17522..98fd108235233 100644
--- a/components/style/stylesheets/keyframes_rule.rs
+++ b/components/style/stylesheets/keyframes_rule.rs
@@ -14,8 +14,8 @@ use properties::LonghandIdSet;
 use properties::longhands::transition_timing_function::single_value::SpecifiedValue as SpecifiedTimingFunction;
 use servo_arc::Arc;
 use shared_lock::{DeepCloneParams, DeepCloneWithLock, SharedRwLock, SharedRwLockReadGuard, Locked, ToCssWithGuard};
-use std::fmt;
-use style_traits::{ParsingMode, ToCss, ParseError, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, ParsingMode, StyleParseErrorKind, ToCss};
 use stylesheets::{CssRuleType, StylesheetContents};
 use stylesheets::rule_parser::VendorPrefix;
 use values::{KeyframesName, serialize_percentage};
@@ -37,8 +37,9 @@ pub struct KeyframesRule {
 
 impl ToCssWithGuard for KeyframesRule {
     // Serialization of KeyframesRule is not specced.
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         dest.write_str("@keyframes ")?;
         self.name.to_css(dest)?;
@@ -110,7 +111,10 @@ impl ::std::cmp::Ord for KeyframePercentage {
 impl ::std::cmp::Eq for KeyframePercentage { }
 
 impl ToCss for KeyframePercentage {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         serialize_percentage(self.0, dest)
     }
 }
@@ -147,7 +151,10 @@ impl KeyframePercentage {
 pub struct KeyframeSelector(Vec<KeyframePercentage>);
 
 impl ToCss for KeyframeSelector {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut iter = self.0.iter();
         iter.next().unwrap().to_css(dest)?;
         for percentage in iter {
@@ -194,8 +201,14 @@ pub struct Keyframe {
 }
 
 impl ToCssWithGuard for Keyframe {
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write {
+    fn to_css<W>(
+        &self,
+        guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
+    {
         self.selector.to_css(dest)?;
         dest.write_str(" { ")?;
         self.block.read_with(guard).to_css(dest)?;
diff --git a/components/style/stylesheets/media_rule.rs b/components/style/stylesheets/media_rule.rs
index 4c468b44cf6c2..b4fbdf3f8b506 100644
--- a/components/style/stylesheets/media_rule.rs
+++ b/components/style/stylesheets/media_rule.rs
@@ -12,8 +12,8 @@ use malloc_size_of::{MallocSizeOfOps, MallocUnconditionalShallowSizeOf};
 use media_queries::MediaList;
 use servo_arc::Arc;
 use shared_lock::{DeepCloneParams, DeepCloneWithLock, Locked, SharedRwLock, SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use stylesheets::CssRules;
 
 /// An [`@media`][media] urle.
@@ -42,8 +42,14 @@ impl MediaRule {
 impl ToCssWithGuard for MediaRule {
     // Serialization of MediaRule is not specced.
     // https://drafts.csswg.org/cssom/#serialize-a-css-rule CSSMediaRule
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write {
+    fn to_css<W>(
+        &self,
+        guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("@media ")?;
         self.media_queries.read_with(guard).to_css(dest)?;
         self.rules.read_with(guard).to_css_block(guard, dest)
diff --git a/components/style/stylesheets/mod.rs b/components/style/stylesheets/mod.rs
index f419b9602ed9d..b9adf34e31b56 100644
--- a/components/style/stylesheets/mod.rs
+++ b/components/style/stylesheets/mod.rs
@@ -31,7 +31,7 @@ use parser::{ParserContext, ParserErrorContext};
 use servo_arc::Arc;
 use shared_lock::{DeepCloneParams, DeepCloneWithLock, Locked, SharedRwLock, SharedRwLockReadGuard, ToCssWithGuard};
 use std::fmt;
-use style_traits::ParsingMode;
+use style_traits::{CssWriter, ParsingMode};
 
 pub use self::counter_style_rule::CounterStyleRule;
 pub use self::document_rule::DocumentRule;
@@ -347,7 +347,7 @@ impl DeepCloneWithLock for CssRule {
 
 impl ToCssWithGuard for CssRule {
     // https://drafts.csswg.org/cssom/#serialize-a-css-rule
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut CssWriter<W>) -> fmt::Result
     where W: fmt::Write {
         match *self {
             CssRule::Namespace(ref lock) => lock.read_with(guard).to_css(guard, dest),
diff --git a/components/style/stylesheets/namespace_rule.rs b/components/style/stylesheets/namespace_rule.rs
index 6cfba1d7234c5..8f3ed1c2ab5c6 100644
--- a/components/style/stylesheets/namespace_rule.rs
+++ b/components/style/stylesheets/namespace_rule.rs
@@ -7,7 +7,8 @@
 use {Namespace, Prefix};
 use cssparser::SourceLocation;
 use shared_lock::{SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
+use std::fmt::{self, Write};
+use style_traits::CssWriter;
 
 /// A `@namespace` rule.
 #[derive(Clone, Debug, PartialEq)]
@@ -23,8 +24,14 @@ pub struct NamespaceRule {
 
 impl ToCssWithGuard for NamespaceRule {
     // https://drafts.csswg.org/cssom/#serialize-a-css-rule CSSNamespaceRule
-    fn to_css<W>(&self, _guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write {
+    fn to_css<W>(
+        &self,
+        _guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("@namespace ")?;
         if let Some(ref prefix) = self.prefix {
             dest.write_str(&*prefix.to_string())?;
diff --git a/components/style/stylesheets/page_rule.rs b/components/style/stylesheets/page_rule.rs
index ea8b93b1b8b36..57843af9caa74 100644
--- a/components/style/stylesheets/page_rule.rs
+++ b/components/style/stylesheets/page_rule.rs
@@ -12,8 +12,8 @@ use malloc_size_of::{MallocSizeOf, MallocSizeOfOps, MallocUnconditionalShallowSi
 use properties::PropertyDeclarationBlock;
 use servo_arc::Arc;
 use shared_lock::{DeepCloneParams, DeepCloneWithLock, Locked, SharedRwLock, SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 
 /// A [`@page`][page] rule.
 ///
@@ -44,8 +44,13 @@ impl PageRule {
 impl ToCssWithGuard for PageRule {
     /// Serialization of PageRule is not specced, adapted from steps for
     /// StyleRule.
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(
+        &self,
+        guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
     {
         dest.write_str("@page { ")?;
         let declaration_block = self.block.read_with(guard);
diff --git a/components/style/stylesheets/rule_list.rs b/components/style/stylesheets/rule_list.rs
index fbceb6c1a0b02..f25cbb17a235b 100644
--- a/components/style/stylesheets/rule_list.rs
+++ b/components/style/stylesheets/rule_list.rs
@@ -9,7 +9,8 @@ use malloc_size_of::{MallocShallowSizeOf, MallocSizeOfOps};
 use servo_arc::{Arc, RawOffsetArc};
 use shared_lock::{DeepCloneParams, DeepCloneWithLock, Locked};
 use shared_lock::{SharedRwLock, SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
+use std::fmt::{self, Write};
+use style_traits::CssWriter;
 use stylesheets::{CssRule, RulesMutateError};
 use stylesheets::loader::StylesheetLoader;
 use stylesheets::rule_parser::State;
@@ -95,8 +96,13 @@ impl CssRules {
     ///
     /// This should be speced into CSSOM spec at some point. See
     /// <https://github.com/w3c/csswg-drafts/issues/1985>
-    pub fn to_css_block<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W)
-        -> fmt::Result where W: fmt::Write
+    pub fn to_css_block<W>(
+        &self,
+        guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
     {
         dest.write_str(" {")?;
         for rule in self.0.iter() {
diff --git a/components/style/stylesheets/style_rule.rs b/components/style/stylesheets/style_rule.rs
index fbc391f6d2ba2..c8e5dc4df8a7d 100644
--- a/components/style/stylesheets/style_rule.rs
+++ b/components/style/stylesheets/style_rule.rs
@@ -12,8 +12,8 @@ use selector_parser::SelectorImpl;
 use selectors::SelectorList;
 use servo_arc::Arc;
 use shared_lock::{DeepCloneParams, DeepCloneWithLock, Locked, SharedRwLock, SharedRwLockReadGuard, ToCssWithGuard};
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 
 /// A style rule, with selectors and declarations.
 #[derive(Debug)]
@@ -67,8 +67,9 @@ impl StyleRule {
 
 impl ToCssWithGuard for StyleRule {
     /// https://drafts.csswg.org/cssom/#serialize-a-css-rule CSSStyleRule
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         use cssparser::ToCss;
 
diff --git a/components/style/stylesheets/supports_rule.rs b/components/style/stylesheets/supports_rule.rs
index d9870641e431a..9ea0916f1348e 100644
--- a/components/style/stylesheets/supports_rule.rs
+++ b/components/style/stylesheets/supports_rule.rs
@@ -15,9 +15,9 @@ use servo_arc::Arc;
 use shared_lock::{DeepCloneParams, DeepCloneWithLock, Locked, SharedRwLock, SharedRwLockReadGuard, ToCssWithGuard};
 #[allow(unused_imports)] use std::ascii::AsciiExt;
 use std::ffi::{CStr, CString};
-use std::fmt;
+use std::fmt::{self, Write};
 use std::str;
-use style_traits::{ToCss, ParseError};
+use style_traits::{CssWriter, ToCss, ParseError};
 use stylesheets::{CssRuleType, CssRules};
 
 /// An [`@supports`][supports] rule.
@@ -46,8 +46,10 @@ impl SupportsRule {
 }
 
 impl ToCssWithGuard for SupportsRule {
-    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write {
+    fn to_css<W>(&self, guard: &SharedRwLockReadGuard, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("@supports ")?;
         self.condition.to_css(dest)?;
         self.rules.read_with(guard).to_css_block(guard, dest)
@@ -219,8 +221,9 @@ pub fn parse_condition_or_declaration<'i, 't>(input: &mut Parser<'i, 't>)
 }
 
 impl ToCss for SupportsCondition {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         match *self {
             SupportsCondition::Not(ref cond) => {
@@ -276,7 +279,10 @@ impl ToCss for SupportsCondition {
 pub struct Declaration(pub String);
 
 impl ToCss for Declaration {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str(&self.0)
     }
 }
diff --git a/components/style/stylesheets/viewport_rule.rs b/components/style/stylesheets/viewport_rule.rs
index 6220d85874561..008ddb25b5de2 100644
--- a/components/style/stylesheets/viewport_rule.rs
+++ b/components/style/stylesheets/viewport_rule.rs
@@ -23,10 +23,10 @@ use shared_lock::{SharedRwLockReadGuard, StylesheetGuards, ToCssWithGuard};
 #[allow(unused_imports)] use std::ascii::AsciiExt;
 use std::borrow::Cow;
 use std::cell::RefCell;
-use std::fmt;
+use std::fmt::{self, Write};
 use std::iter::Enumerate;
 use std::str::Chars;
-use style_traits::{PinchZoomFactor, ToCss, ParseError, StyleParseErrorKind};
+use style_traits::{CssWriter, ParseError, PinchZoomFactor, StyleParseErrorKind, ToCss};
 use style_traits::viewport::{Orientation, UserZoom, ViewportConstraints, Zoom};
 use stylesheets::{StylesheetInDocument, Origin};
 use values::computed::{Context, ToComputedValue};
@@ -100,7 +100,10 @@ macro_rules! declare_viewport_descriptor_inner {
         }
 
         impl ToCss for ViewportDescriptor {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
+            {
                 match *self {
                     $(
                         ViewportDescriptor::$assigned_variant(ref val) => {
@@ -148,8 +151,9 @@ pub enum ViewportLength {
 }
 
 impl ToCss for ViewportLength {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         match *self {
             ViewportLength::Specified(ref length) => length.to_css(dest),
@@ -254,7 +258,10 @@ impl ViewportDescriptorDeclaration {
 }
 
 impl ToCss for ViewportDescriptorDeclaration {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         self.descriptor.to_css(dest)?;
         if self.important {
             dest.write_str(" !important")?;
@@ -520,8 +527,14 @@ impl ViewportRule {
 
 impl ToCssWithGuard for ViewportRule {
     // Serialization of ViewportRule is not specced.
-    fn to_css<W>(&self, _guard: &SharedRwLockReadGuard, dest: &mut W) -> fmt::Result
-    where W: fmt::Write {
+    fn to_css<W>(
+        &self,
+        _guard: &SharedRwLockReadGuard,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("@viewport { ")?;
         let mut iter = self.declarations.iter();
         iter.next().unwrap().to_css(dest)?;
diff --git a/components/style/values/computed/align.rs b/components/style/values/computed/align.rs
index f3caade67a5be..85f8f70cb25d5 100644
--- a/components/style/values/computed/align.rs
+++ b/components/style/values/computed/align.rs
@@ -7,7 +7,7 @@
 //! https://drafts.csswg.org/css-align/
 
 use std::fmt;
-use style_traits::ToCss;
+use style_traits::{CssWriter, ToCss};
 use values::computed::{Context, ToComputedValue};
 use values::specified;
 
@@ -26,7 +26,7 @@ pub struct JustifyItems {
 }
 
 impl ToCss for JustifyItems {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
         where W: fmt::Write,
     {
         self.computed.to_css(dest)
diff --git a/components/style/values/computed/background.rs b/components/style/values/computed/background.rs
index e71f208c98414..7b7f7c4991bd1 100644
--- a/components/style/values/computed/background.rs
+++ b/components/style/values/computed/background.rs
@@ -6,8 +6,8 @@
 
 use properties::animated_properties::RepeatableListAnimatable;
 use properties::longhands::background_size::computed_value::T as BackgroundSizeList;
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::animated::{ToAnimatedValue, ToAnimatedZero};
 use values::computed::{Context, ToComputedValue};
 use values::computed::length::LengthOrPercentageOrAuto;
@@ -96,9 +96,9 @@ impl BackgroundRepeat {
 }
 
 impl ToCss for BackgroundRepeat {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         match (self.0, self.1) {
             (RepeatKeyword::Repeat, RepeatKeyword::NoRepeat) => dest.write_str("repeat-x"),
diff --git a/components/style/values/computed/basic_shape.rs b/components/style/values/computed/basic_shape.rs
index 20dcffec9c6db..17c39741c81ca 100644
--- a/components/style/values/computed/basic_shape.rs
+++ b/components/style/values/computed/basic_shape.rs
@@ -7,8 +7,8 @@
 //!
 //! [basic-shape]: https://drafts.csswg.org/css-shapes/#typedef-basic-shape
 
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::computed::{LengthOrPercentage, ComputedUrl, Image};
 use values::generics::basic_shape::{BasicShape as GenericBasicShape};
 use values::generics::basic_shape::{Circle as GenericCircle, ClippingShape as GenericClippingShape};
@@ -37,7 +37,10 @@ pub type Ellipse = GenericEllipse<LengthOrPercentage, LengthOrPercentage, Length
 pub type ShapeRadius = GenericShapeRadius<LengthOrPercentage>;
 
 impl ToCss for Circle {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("circle(")?;
         self.radius.to_css(dest)?;
         dest.write_str(" at ")?;
@@ -47,7 +50,10 @@ impl ToCss for Circle {
 }
 
 impl ToCss for Ellipse {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("ellipse(")?;
         if (self.semiaxis_x, self.semiaxis_y) != Default::default() {
             self.semiaxis_x.to_css(dest)?;
diff --git a/components/style/values/computed/color.rs b/components/style/values/computed/color.rs
index 6327e73462636..314c4bed26602 100644
--- a/components/style/values/computed/color.rs
+++ b/components/style/values/computed/color.rs
@@ -6,7 +6,7 @@
 
 use cssparser::{Color as CSSParserColor, RGBA};
 use std::fmt;
-use style_traits::ToCss;
+use style_traits::{CssWriter, ToCss};
 use values::animated::ToAnimatedValue;
 use values::animated::color::{Color as AnimatedColor, RGBA as AnimatedRGBA};
 
@@ -138,7 +138,7 @@ impl From<RGBA> for Color {
 }
 
 impl ToCss for Color {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
         if self.is_numeric() {
             self.color.to_css(dest)
         } else if self.is_currentcolor() {
diff --git a/components/style/values/computed/font.rs b/components/style/values/computed/font.rs
index 407be16c203c1..20a41154ec9f5 100644
--- a/components/style/values/computed/font.rs
+++ b/components/style/values/computed/font.rs
@@ -19,7 +19,7 @@ use std::fmt::{self, Write};
 use std::hash::{Hash, Hasher};
 #[cfg(feature = "servo")]
 use std::slice;
-use style_traits::{ToCss, ParseError};
+use style_traits::{CssWriter, ParseError, ToCss};
 use values::CSSFloat;
 use values::animated::{ToAnimatedValue, ToAnimatedZero};
 use values::computed::{Context, NonNegativeLength, ToComputedValue};
@@ -201,7 +201,7 @@ impl FontSize {
 }
 
 impl ToCss for FontSize {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
         self.size.to_css(dest)
     }
 }
@@ -257,7 +257,7 @@ impl MallocSizeOf for FontFamily {
 }
 
 impl ToCss for FontFamily {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
         let mut iter = self.0.iter();
         iter.next().unwrap().to_css(dest)?;
         for family in iter {
@@ -279,7 +279,7 @@ pub struct FamilyName {
 }
 
 impl ToCss for FamilyName {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
         match self.syntax {
             FamilyNameSyntax::Quoted => {
                 dest.write_char('"')?;
@@ -488,7 +488,7 @@ impl SingleFontFamily {
 }
 
 impl ToCss for SingleFontFamily {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
         match *self {
             SingleFontFamily::FamilyName(ref name) => name.to_css(dest),
 
@@ -731,7 +731,7 @@ impl FontLanguageOverride {
 }
 
 impl ToCss for FontLanguageOverride {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
         use std::str;
 
         if self.0 == 0 {
diff --git a/components/style/values/computed/image.rs b/components/style/values/computed/image.rs
index 8972774aa77f5..93fa627a41d0b 100644
--- a/components/style/values/computed/image.rs
+++ b/components/style/values/computed/image.rs
@@ -9,8 +9,8 @@
 
 use cssparser::RGBA;
 use std::f32::consts::PI;
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::{Either, None_};
 use values::computed::{Angle, ComputedUrl, Context, Length, LengthOrPercentage, NumberOrPercentage, ToComputedValue};
 #[cfg(feature = "gecko")]
@@ -99,8 +99,13 @@ impl GenericLineDirection for LineDirection {
         }
     }
 
-    fn to_css<W>(&self, dest: &mut W, compat_mode: CompatMode) -> fmt::Result
-        where W: fmt::Write
+    fn to_css<W>(
+        &self,
+        dest: &mut CssWriter<W>,
+        compat_mode: CompatMode,
+    ) -> fmt::Result
+    where
+        W: Write,
     {
         match *self {
             LineDirection::Angle(ref angle) => angle.to_css(dest),
diff --git a/components/style/values/computed/inherited_box.rs b/components/style/values/computed/inherited_box.rs
index 2fa4dd819a56b..f6fe6ad7bf960 100644
--- a/components/style/values/computed/inherited_box.rs
+++ b/components/style/values/computed/inherited_box.rs
@@ -4,8 +4,8 @@
 
 //! Computed values for inherited box
 
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::specified::Angle;
 
 /// An angle rounded and normalized per https://drafts.csswg.org/css-images/#propdef-image-orientation
@@ -31,7 +31,10 @@ impl Orientation {
 }
 
 impl ToCss for Orientation {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         // Should agree with Angle::to_css.
         match *self {
             Orientation::Angle0 => dest.write_str("0deg"),
@@ -60,7 +63,10 @@ impl ImageOrientation {
 }
 
 impl ToCss for ImageOrientation {
-    fn to_css<W: fmt::Write>(&self, dest: &mut W) -> fmt::Result {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             ImageOrientation::FromImage => dest.write_str("from-image"),
             ImageOrientation::AngleWithFlipped(angle, flipped) => {
diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index a0a92c713c2c4..49db7201a39ac 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -6,9 +6,9 @@
 
 use app_units::Au;
 use ordered_float::NotNaN;
-use std::fmt;
+use std::fmt::{self, Write};
 use std::ops::{Add, Neg};
-use style_traits::ToCss;
+use style_traits::{CssWriter, ToCss};
 use style_traits::values::specified::AllowedNumericType;
 use super::{Number, ToComputedValue, Context, Percentage};
 use values::{Auto, CSSFloat, Either, ExtremumLength, None_, Normal, specified};
@@ -203,7 +203,10 @@ impl From<LengthOrPercentageOrNone> for Option<CalcLengthOrPercentage> {
 }
 
 impl ToCss for CalcLengthOrPercentage {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         use num_traits::Zero;
 
         let (length, percentage) = match (self.length, self.percentage) {
@@ -738,7 +741,10 @@ impl CSSPixelLength {
 
 impl ToCss for CSSPixelLength {
     #[inline]
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         self.0.to_css(dest)?;
         dest.write_str("px")
     }
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index 20bcefc655bb6..a559f4fbe8772 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -15,11 +15,12 @@ use properties::{ComputedValues, LonghandId, StyleBuilder};
 use rule_cache::RuleCacheConditions;
 #[cfg(feature = "servo")]
 use servo_url::ServoUrl;
-use std::{f32, fmt};
 use std::cell::RefCell;
+use std::f32;
+use std::fmt::{self, Write};
 #[cfg(feature = "servo")]
 use std::sync::Arc;
-use style_traits::ToCss;
+use style_traits::{CssWriter, ToCss};
 use style_traits::cursor::CursorKind;
 use super::{CSSFloat, CSSInteger};
 use super::generics::{GreaterThanOrEqualToOne, NonNegative};
@@ -531,7 +532,10 @@ pub struct ClipRect {
 }
 
 impl ToCss for ClipRect {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("rect(")?;
         if let Some(top) = self.top {
             top.to_css(dest)?;
@@ -627,7 +631,10 @@ impl ComputedUrl {
 
 #[cfg(feature = "servo")]
 impl ToCss for ComputedUrl {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let string = match *self {
             ComputedUrl::Valid(ref url) => url.as_str(),
             ComputedUrl::Invalid(ref invalid_string) => invalid_string,
diff --git a/components/style/values/computed/percentage.rs b/components/style/values/computed/percentage.rs
index 1bc28a13488ec..842019f03c8b1 100644
--- a/components/style/values/computed/percentage.rs
+++ b/components/style/values/computed/percentage.rs
@@ -5,7 +5,7 @@
 //! Computed percentages.
 
 use std::fmt;
-use style_traits::ToCss;
+use style_traits::{CssWriter, ToCss};
 use values::{CSSFloat, serialize_percentage};
 
 /// A computed percentage.
@@ -35,7 +35,7 @@ impl Percentage {
 }
 
 impl ToCss for Percentage {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
         W: fmt::Write,
     {
diff --git a/components/style/values/computed/pointing.rs b/components/style/values/computed/pointing.rs
index 9b108dbcfc2c4..b14f22dec9c81 100644
--- a/components/style/values/computed/pointing.rs
+++ b/components/style/values/computed/pointing.rs
@@ -10,10 +10,10 @@ use cssparser::Parser;
 use parser::{Parse, ParserContext};
 use selectors::parser::SelectorParseErrorKind;
 #[cfg(feature = "gecko")]
-use std::fmt;
-use style_traits::ParseError;
+use std::fmt::{self, Write};
 #[cfg(feature = "gecko")]
-use style_traits::ToCss;
+use style_traits::{CssWriter, ToCss};
+use style_traits::ParseError;
 use style_traits::cursor::CursorKind;
 
 /// The computed value for the `cursor` property.
@@ -80,8 +80,9 @@ impl Parse for Cursor {
 
 #[cfg(feature = "gecko")]
 impl ToCss for Cursor {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         for url in &*self.images {
             url.to_css(dest)?;
@@ -123,8 +124,9 @@ impl CursorImage {
 
 #[cfg(feature = "gecko")]
 impl ToCss for CursorImage {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         self.url.to_css(dest)?;
         if let Some((x, y)) = self.hotspot {
diff --git a/components/style/values/computed/position.rs b/components/style/values/computed/position.rs
index ed6a308151f8b..abd3522382d8b 100644
--- a/components/style/values/computed/position.rs
+++ b/components/style/values/computed/position.rs
@@ -7,8 +7,8 @@
 //!
 //! [position]: https://drafts.csswg.org/css-backgrounds-3/#position
 
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::computed::{LengthOrPercentage, Percentage};
 use values::generics::position::Position as GenericPosition;
 pub use values::specified::position::{GridAutoFlow, GridTemplateAreas};
@@ -40,7 +40,10 @@ impl Position {
 }
 
 impl ToCss for Position {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         self.horizontal.to_css(dest)?;
         dest.write_str(" ")?;
         self.vertical.to_css(dest)
diff --git a/components/style/values/computed/text.rs b/components/style/values/computed/text.rs
index 27c198a46a53e..123f735d5130c 100644
--- a/components/style/values/computed/text.rs
+++ b/components/style/values/computed/text.rs
@@ -6,8 +6,8 @@
 
 #[cfg(feature = "servo")]
 use properties::StyleBuilder;
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::{CSSInteger, CSSFloat};
 use values::animated::ToAnimatedZero;
 use values::computed::{NonNegativeLength, NonNegativeNumber};
@@ -66,7 +66,10 @@ impl TextOverflow {
 }
 
 impl ToCss for TextOverflow {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.sides_are_logical {
             debug_assert!(self.first == TextOverflowSide::Clip);
             self.second.to_css(dest)?;
@@ -80,7 +83,10 @@ impl ToCss for TextOverflow {
 }
 
 impl ToCss for TextDecorationLine {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut has_any = false;
 
         macro_rules! write_value {
diff --git a/components/style/values/computed/time.rs b/components/style/values/computed/time.rs
index a90a0935a8e83..cef128af4a8f7 100644
--- a/components/style/values/computed/time.rs
+++ b/components/style/values/computed/time.rs
@@ -4,8 +4,8 @@
 
 //! Computed time values.
 
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::CSSFloat;
 
 /// A computed `<time>` value.
@@ -36,9 +36,9 @@ impl Time {
 }
 
 impl ToCss for Time {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         self.seconds().to_css(dest)?;
         dest.write_str("s")
diff --git a/components/style/values/generics/basic_shape.rs b/components/style/values/generics/basic_shape.rs
index a2f0eb0897194..07881a3a10389 100644
--- a/components/style/values/generics/basic_shape.rs
+++ b/components/style/values/generics/basic_shape.rs
@@ -5,8 +5,8 @@
 //! CSS handling for the [`basic-shape`](https://drafts.csswg.org/css-shapes/#typedef-basic-shape)
 //! types that are generic over their `ToCss` implementations.
 
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::animated::{Animate, Procedure, ToAnimatedZero};
 use values::distance::{ComputeSquaredDistance, SquaredDistance};
 use values::generics::border::BorderRadius;
@@ -152,7 +152,10 @@ impl<B, T, U> ToAnimatedZero for ShapeSource<B, T, U> {
 impl<L> ToCss for InsetRect<L>
     where L: ToCss + PartialEq
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("inset(")?;
         self.rect.to_css(dest)?;
         if let Some(ref radius) = self.round {
@@ -210,7 +213,10 @@ where
 }
 
 impl<L: ToCss> ToCss for Polygon<L> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("polygon(")?;
         if self.fill != FillRule::default() {
             self.fill.to_css(dest)?;
diff --git a/components/style/values/generics/border.rs b/components/style/values/generics/border.rs
index 9237d060ef025..00cfe33ab620b 100644
--- a/components/style/values/generics/border.rs
+++ b/components/style/values/generics/border.rs
@@ -4,8 +4,8 @@
 
 //! Generic types for CSS values related to borders.
 
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::generics::rect::Rect;
 use values::generics::size::Size;
 
@@ -84,8 +84,9 @@ impl<N> From<N> for BorderImageSlice<N>
 impl<N> ToCss for BorderImageSlice<N>
     where N: PartialEq + ToCss,
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         self.offsets.to_css(dest)?;
         if self.fill {
@@ -118,8 +119,13 @@ impl<L> BorderRadius<L>
 {
     /// Serialises two given rects following the syntax of the `border-radius``
     /// property.
-    pub fn serialize_rects<W>(widths: Rect<&L>, heights: Rect<&L>, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    pub fn serialize_rects<W>(
+        widths: Rect<&L>,
+        heights: Rect<&L>,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write,
     {
         widths.to_css(dest)?;
         if widths.0 != heights.0 || widths.1 != heights.1 || widths.2 != heights.2 || widths.3 != heights.3 {
@@ -133,7 +139,10 @@ impl<L> BorderRadius<L>
 impl<L> ToCss for BorderRadius<L>
     where L: PartialEq + ToCss
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let BorderRadius {
             top_left: BorderCornerRadius(ref tl),
             top_right: BorderCornerRadius(ref tr),
diff --git a/components/style/values/generics/counters.rs b/components/style/values/generics/counters.rs
index c6ea4425a39e9..127f94ac45d36 100644
--- a/components/style/values/generics/counters.rs
+++ b/components/style/values/generics/counters.rs
@@ -5,7 +5,7 @@
 //! Generic types for counters-related CSS values.
 
 use std::fmt;
-use style_traits::ToCss;
+use style_traits::{CssWriter, ToCss};
 use values::CustomIdent;
 
 /// A generic value for the `counter-increment` property.
@@ -27,7 +27,7 @@ where
     I: ToCss,
 {
     #[inline]
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
         W: fmt::Write,
     {
diff --git a/components/style/values/generics/effects.rs b/components/style/values/generics/effects.rs
index ff77556d25341..b4fcbb0c505e5 100644
--- a/components/style/values/generics/effects.rs
+++ b/components/style/values/generics/effects.rs
@@ -4,8 +4,8 @@
 
 //! Generic types for CSS values related to effects.
 
-use std::fmt;
-use style_traits::values::{SequenceWriter, ToCss};
+use std::fmt::{self, Write};
+use style_traits::values::{CssWriter, SequenceWriter, ToCss};
 #[cfg(feature = "gecko")]
 use values::specified::url::SpecifiedUrl;
 
@@ -88,9 +88,9 @@ where
     BlurShapeLength: ToCss,
     ShapeLength: ToCss,
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         {
             let mut writer = SequenceWriter::new(&mut *dest, " ");
diff --git a/components/style/values/generics/grid.rs b/components/style/values/generics/grid.rs
index 95e1f1d500e75..dab8b0f3e9da1 100644
--- a/components/style/values/generics/grid.rs
+++ b/components/style/values/generics/grid.rs
@@ -7,8 +7,9 @@
 
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
-use std::{fmt, mem, usize};
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use std::{mem, usize};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::{CSSFloat, CustomIdent};
 use values::computed::{Context, ToComputedValue};
 use values::specified;
@@ -49,7 +50,10 @@ impl<Integer> ToCss for GridLine<Integer>
 where
     Integer: ToCss,
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.is_auto() {
             return dest.write_str("auto")
         }
@@ -230,7 +234,10 @@ impl<L: PartialEq> TrackSize<L> {
 }
 
 impl<L: ToCss> ToCss for TrackSize<L> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             TrackSize::Breadth(ref breadth) => breadth.to_css(dest),
             TrackSize::Minmax(ref min, ref max) => {
@@ -315,10 +322,10 @@ pub fn concat_serialize_idents<W>(
     suffix: &str,
     slice: &[CustomIdent],
     sep: &str,
-    dest: &mut W,
+    dest: &mut CssWriter<W>,
 ) -> fmt::Result
 where
-    W: fmt::Write
+    W: Write,
 {
     if let Some((ref first, rest)) = slice.split_first() {
         dest.write_str(prefix)?;
@@ -385,7 +392,10 @@ pub struct TrackRepeat<L, I> {
 }
 
 impl<L: ToCss, I: ToCss> ToCss for TrackRepeat<L, I> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("repeat(")?;
         self.count.to_css(dest)?;
         dest.write_str(", ")?;
@@ -503,7 +513,10 @@ pub struct TrackList<LengthOrPercentage, Integer> {
 }
 
 impl<L: ToCss, I: ToCss> ToCss for TrackList<L, I> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let auto_idx = match self.list_type {
             TrackListType::Auto(i) => i as usize,
             _ => usize::MAX,
@@ -614,7 +627,10 @@ impl Parse for LineNameList {
 }
 
 impl ToCss for LineNameList {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("subgrid")?;
         let fill_idx = self.fill_idx.map(|v| v as usize).unwrap_or(usize::MAX);
         for (i, names) in self.names.iter().enumerate() {
diff --git a/components/style/values/generics/image.rs b/components/style/values/generics/image.rs
index 6d97e280a3b2c..d74c05ae81dba 100644
--- a/components/style/values/generics/image.rs
+++ b/components/style/values/generics/image.rs
@@ -10,8 +10,8 @@ use Atom;
 use cssparser::serialize_identifier;
 use custom_properties;
 use servo_arc::Arc;
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 
 /// An [image].
 ///
@@ -143,7 +143,10 @@ pub struct PaintWorklet {
 trivial_to_computed_value!(PaintWorklet);
 
 impl ToCss for PaintWorklet {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("paint(")?;
         serialize_identifier(&*self.name.to_string(), dest)?;
         for argument in &self.arguments {
@@ -169,17 +172,23 @@ pub struct MozImageRect<NumberOrPercentage, MozImageRectUrl> {
 }
 
 impl<G, R, U> fmt::Debug for Image<G, R, U>
-    where G: fmt::Debug, R: fmt::Debug, U: fmt::Debug + ToCss
+where
+    G: ToCss,
+    R: ToCss,
+    U: ToCss,
 {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
-        self.to_css(f)
+        self.to_css(&mut CssWriter::new(f))
     }
 }
 
 impl<G, R, U> ToCss for Image<G, R, U>
     where G: ToCss, R: ToCss, U: ToCss
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             Image::Url(ref url) => url.to_css(dest),
             Image::Gradient(ref gradient) => gradient.to_css(dest),
@@ -198,7 +207,10 @@ impl<G, R, U> ToCss for Image<G, R, U>
 impl<D, L, LoP, P, C, A> ToCss for Gradient<D, L, LoP, P, C, A>
     where D: LineDirection, L: ToCss, LoP: ToCss, P: ToCss, C: ToCss, A: ToCss
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match self.compat_mode {
             CompatMode::WebKit => dest.write_str("-webkit-")?,
             CompatMode::Moz => dest.write_str("-moz-")?,
@@ -272,17 +284,17 @@ pub trait LineDirection {
     fn points_downwards(&self, compat_mode: CompatMode) -> bool;
 
     /// Serialises this direction according to the compatibility mode.
-    fn to_css<W>(&self, dest: &mut W, compat_mode: CompatMode) -> fmt::Result
-        where W: fmt::Write;
+    fn to_css<W>(&self, dest: &mut CssWriter<W>, compat_mode: CompatMode) -> fmt::Result
+        where W: Write;
 }
 
 impl<L> ToCss for Circle<L>
 where
     L: ToCss,
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         match *self {
             Circle::Extent(ShapeExtent::FarthestCorner) |
diff --git a/components/style/values/generics/mod.rs b/components/style/values/generics/mod.rs
index c2a20081c9876..263db6890d22d 100644
--- a/components/style/values/generics/mod.rs
+++ b/components/style/values/generics/mod.rs
@@ -8,8 +8,9 @@
 use counter_style::{Symbols, parse_counter_style_name};
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
-use std::fmt;
-use style_traits::{Comma, OneOrMoreSeparated, ParseError, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{Comma, CssWriter, OneOrMoreSeparated, ParseError};
+use style_traits::{StyleParseErrorKind, ToCss};
 use super::CustomIdent;
 
 pub mod background;
@@ -144,7 +145,10 @@ impl<T> OneOrMoreSeparated for FontSettingTag<T> {
 }
 
 impl<T: ToCss> ToCss for FontSettingTag<T> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         use byteorder::{BigEndian, ByteOrder};
         use std::str;
 
@@ -231,7 +235,10 @@ pub struct FontSettingTagInt(pub u32);
 pub struct FontSettingTagFloat(pub f32);
 
 impl ToCss for FontSettingTagInt {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match self.0 {
             1 => Ok(()),
             0 => dest.write_str(" off"),
@@ -273,7 +280,10 @@ impl Parse for FontSettingTagFloat {
 }
 
 impl ToCss for FontSettingTagFloat {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str(" ")?;
         self.0.to_css(dest)
     }
diff --git a/components/style/values/generics/rect.rs b/components/style/values/generics/rect.rs
index fd72fa5b80573..028ca5b231e72 100644
--- a/components/style/values/generics/rect.rs
+++ b/components/style/values/generics/rect.rs
@@ -6,8 +6,8 @@
 
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
-use std::fmt;
-use style_traits::{ToCss, ParseError};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, ToCss};
 
 /// A CSS value made of four components, where its `ToCss` impl will try to
 /// serialize as few components as possible, like for example in `border-width`.
@@ -68,8 +68,9 @@ impl<T> Parse for Rect<T>
 impl<T> ToCss for Rect<T>
     where T: PartialEq + ToCss
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         self.0.to_css(dest)?;
         let same_vertical = self.0 == self.2;
diff --git a/components/style/values/generics/size.rs b/components/style/values/generics/size.rs
index ed5b7a516f79d..f8c691a9a2342 100644
--- a/components/style/values/generics/size.rs
+++ b/components/style/values/generics/size.rs
@@ -7,8 +7,8 @@
 use cssparser::Parser;
 use euclid::Size2D;
 use parser::ParserContext;
-use std::fmt;
-use style_traits::{ToCss, ParseError};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, ToCss};
 use values::animated::ToAnimatedValue;
 
 /// A generic size, for `border-*-radius` longhand properties, or
@@ -56,9 +56,9 @@ impl<L> ToCss for Size<L>
 where L:
     ToCss + PartialEq,
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-    where W:
-        fmt::Write
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         self.0.width.to_css(dest)?;
 
diff --git a/components/style/values/generics/svg.rs b/components/style/values/generics/svg.rs
index 0d0a60d61ce81..f1c8278ee6e97 100644
--- a/components/style/values/generics/svg.rs
+++ b/components/style/values/generics/svg.rs
@@ -6,8 +6,8 @@
 
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
-use std::fmt;
-use style_traits::{ParseError, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::{Either, None_};
 use values::computed::NumberOrPercentage;
 use values::computed::length::LengthOrPercentage;
@@ -209,7 +209,10 @@ pub enum SVGStrokeDashArray<LengthType> {
 }
 
 impl<LengthType> ToCss for SVGStrokeDashArray<LengthType> where LengthType: ToCss {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match self {
             &SVGStrokeDashArray::Values(ref values) => {
                 let mut iter = values.iter();
diff --git a/components/style/values/generics/transform.rs b/components/style/values/generics/transform.rs
index 06ec91c25a537..c74cbc8d45988 100644
--- a/components/style/values/generics/transform.rs
+++ b/components/style/values/generics/transform.rs
@@ -7,8 +7,8 @@
 use app_units::Au;
 use euclid::{self, Rect, Transform3D};
 use num_traits::Zero;
-use std::fmt;
-use style_traits::ToCss;
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ToCss};
 use values::{computed, CSSFloat};
 use values::computed::length::Length as ComputedLength;
 use values::computed::length::LengthOrPercentage as ComputedLengthOrPercentage;
@@ -136,9 +136,9 @@ where
     Integer: ToCss,
     Number: ToCss,
 {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         match *self {
             TimingFunction::Keyword(keyword) => keyword.to_css(dest),
@@ -546,7 +546,10 @@ impl<Angle: ToCss + Copy, Number: ToCss + Copy, Length: ToCss,
      Integer: ToCss + Copy, LengthOrNumber: ToCss, LengthOrPercentage: ToCss, LoPoNumber: ToCss>
     ToCss for
     TransformOperation<Angle, Number, Length, Integer, LengthOrNumber, LengthOrPercentage, LoPoNumber> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             TransformOperation::Matrix(ref m) => m.to_css(dest),
             TransformOperation::PrefixedMatrix(ref m) => m.to_css(dest),
@@ -653,9 +656,9 @@ impl<Angle: ToCss + Copy, Number: ToCss + Copy, Length: ToCss,
 }
 
 impl<T: ToCss> ToCss for Transform<T> {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         if self.0.is_empty() {
             return dest.write_str("none");
diff --git a/components/style/values/mod.rs b/components/style/values/mod.rs
index 1507f4fe3e1ca..601b5edc5ac65 100644
--- a/components/style/values/mod.rs
+++ b/components/style/values/mod.rs
@@ -13,9 +13,9 @@ pub use cssparser::{RGBA, Token, Parser, serialize_identifier, CowRcStr, SourceL
 use parser::{Parse, ParserContext};
 use selectors::parser::SelectorParseErrorKind;
 #[allow(unused_imports)] use std::ascii::AsciiExt;
-use std::fmt::{self, Debug};
+use std::fmt::{self, Debug, Write};
 use std::hash;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 
 pub mod animated;
 pub mod computed;
@@ -34,8 +34,9 @@ define_keyword_type!(Auto, "auto");
 define_keyword_type!(Normal, "normal");
 
 /// Serialize a normalized value into percentage.
-pub fn serialize_percentage<W>(value: CSSFloat, dest: &mut W)
-    -> fmt::Result where W: fmt::Write
+pub fn serialize_percentage<W>(value: CSSFloat, dest: &mut CssWriter<W>) -> fmt::Result
+where
+    W: Write,
 {
     (value * 100.).to_css(dest)?;
     dest.write_str("%")
@@ -109,7 +110,10 @@ impl CustomIdent {
 }
 
 impl ToCss for CustomIdent {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         serialize_identifier(&self.0.to_string(), dest)
     }
 }
@@ -180,7 +184,10 @@ impl Parse for KeyframesName {
 }
 
 impl ToCss for KeyframesName {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             KeyframesName::Ident(ref ident) => ident.to_css(dest),
             KeyframesName::QuotedString(ref atom) => atom.to_string().to_css(dest),
diff --git a/components/style/values/specified/align.rs b/components/style/values/specified/align.rs
index ac2f7719d31d9..a0900d4dc332a 100644
--- a/components/style/values/specified/align.rs
+++ b/components/style/values/specified/align.rs
@@ -11,8 +11,8 @@ use gecko_bindings::structs;
 use parser::{Parse, ParserContext};
 use selectors::parser::SelectorParseErrorKind;
 #[allow(unused_imports)] use std::ascii::AsciiExt;
-use std::fmt;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 
 bitflags! {
     /// Constants shared by multiple CSS Box Alignment properties
@@ -71,7 +71,10 @@ bitflags! {
 }
 
 impl ToCss for AlignFlags {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let s = match *self & !AlignFlags::FLAG_BITS {
             AlignFlags::AUTO => "auto",
             AlignFlags::NORMAL => "normal",
@@ -209,7 +212,10 @@ impl AlignJustifyContent {
 }
 
 impl ToCss for AlignJustifyContent {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         self.primary().to_css(dest)?;
         match self.fallback() {
             AlignFlags::AUTO => {}
diff --git a/components/style/values/specified/angle.rs b/components/style/values/specified/angle.rs
index b776a69db3c90..667f70b786994 100644
--- a/components/style/values/specified/angle.rs
+++ b/components/style/values/specified/angle.rs
@@ -7,8 +7,8 @@
 use cssparser::{Parser, Token};
 use parser::{ParserContext, Parse};
 #[allow(unused_imports)] use std::ascii::AsciiExt;
-use std::fmt;
-use style_traits::{ToCss, ParseError};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, ToCss};
 use values::CSSFloat;
 use values::computed::{Context, ToComputedValue};
 use values::computed::angle::Angle as ComputedAngle;
@@ -27,7 +27,10 @@ pub struct Angle {
 }
 
 impl ToCss for Angle {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.was_calc {
             dest.write_str("calc(")?;
         }
diff --git a/components/style/values/specified/basic_shape.rs b/components/style/values/specified/basic_shape.rs
index e6d612c7ee7a0..c0fe8a16e6d6e 100644
--- a/components/style/values/specified/basic_shape.rs
+++ b/components/style/values/specified/basic_shape.rs
@@ -10,8 +10,8 @@
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
 use std::borrow::Cow;
-use std::fmt;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::computed::Percentage;
 use values::generics::basic_shape::{Circle as GenericCircle};
 use values::generics::basic_shape::{ClippingShape as GenericClippingShape, Ellipse as GenericEllipse};
@@ -171,7 +171,10 @@ impl Circle {
 }
 
 impl ToCss for Circle {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("circle(")?;
         if GenericShapeRadius::ClosestSide != self.radius {
             self.radius.to_css(dest)?;
@@ -213,7 +216,10 @@ impl Ellipse {
 }
 
 impl ToCss for Ellipse {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("ellipse(")?;
         if self.semiaxis_x != ShapeRadius::default() || self.semiaxis_y != ShapeRadius::default() {
             self.semiaxis_x.to_css(dest)?;
@@ -248,8 +254,12 @@ impl Parse for ShapeRadius {
 /// are converted to percentages where possible. Only the two or four
 /// value forms are used. In case of two keyword-percentage pairs,
 /// the keywords are folded into the percentages
-fn serialize_basicshape_position<W>(position: &Position, dest: &mut W) -> fmt::Result
-    where W: fmt::Write
+fn serialize_basicshape_position<W>(
+    position: &Position,
+    dest: &mut CssWriter<W>,
+) -> fmt::Result
+where
+    W: Write,
 {
     fn to_keyword_and_lop<S>(component: &PositionComponent<S>) -> (S, Cow<LengthOrPercentage>)
         where S: Copy + Side
@@ -289,8 +299,11 @@ fn serialize_basicshape_position<W>(position: &Position, dest: &mut W) -> fmt::R
         }
     }
 
-    fn write_pair<A, B, W>(a: &A, b: &B, dest: &mut W) -> fmt::Result
-        where A: ToCss, B: ToCss, W: fmt::Write
+    fn write_pair<A, B, W>(a: &A, b: &B, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        A: ToCss,
+        B: ToCss,
+        W: Write,
     {
         a.to_css(dest)?;
         dest.write_str(" ")?;
diff --git a/components/style/values/specified/box.rs b/components/style/values/specified/box.rs
index 8f046887fe4ff..54bb13856954c 100644
--- a/components/style/values/specified/box.rs
+++ b/components/style/values/specified/box.rs
@@ -8,8 +8,8 @@ use Atom;
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
 use selectors::parser::SelectorParseErrorKind;
-use std::fmt;
-use style_traits::{ParseError, ToCss, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::CustomIdent;
 use values::KeyframesName;
 use values::generics::box_::AnimationIterationCount as GenericAnimationIterationCount;
@@ -289,9 +289,9 @@ impl AnimationName {
 }
 
 impl ToCss for AnimationName {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         match self.0 {
             Some(ref name) => name.to_css(dest),
@@ -407,7 +407,10 @@ impl TouchAction {
 }
 
 impl ToCss for TouchAction {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             TouchAction::TOUCH_ACTION_NONE => dest.write_str("none"),
             TouchAction::TOUCH_ACTION_AUTO => dest.write_str("auto"),
@@ -497,7 +500,10 @@ bitflags! {
 }
 
 impl ToCss for Contain {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.is_empty() {
             return dest.write_str("none")
         }
diff --git a/components/style/values/specified/calc.rs b/components/style/values/specified/calc.rs
index 4b70f80001885..afab32f50cff3 100644
--- a/components/style/values/specified/calc.rs
+++ b/components/style/values/specified/calc.rs
@@ -9,8 +9,8 @@
 use cssparser::{Parser, Token, NumberOrPercentage, AngleOrNumber};
 use parser::ParserContext;
 #[allow(unused_imports)] use std::ascii::AsciiExt;
-use std::fmt;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use style_traits::values::specified::AllowedNumericType;
 use values::{CSSInteger, CSSFloat};
 use values::computed;
@@ -89,7 +89,10 @@ impl ToCss for CalcLengthOrPercentage {
     ///
     /// FIXME(emilio): Should this simplify away zeros?
     #[allow(unused_assignments)]
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         use num_traits::Zero;
 
         let mut first_value = true;
diff --git a/components/style/values/specified/color.rs b/components/style/values/specified/color.rs
index 87ab21a3c67e5..a22a183cf49a2 100644
--- a/components/style/values/specified/color.rs
+++ b/components/style/values/specified/color.rs
@@ -12,9 +12,9 @@ use itoa;
 use parser::{ParserContext, Parse};
 #[cfg(feature = "gecko")]
 use properties::longhands::system_colors::SystemColor;
-use std::fmt;
-use std::io::Write;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind, ValueParseErrorKind};
+use std::fmt::{self, Write};
+use std::io::Write as IoWrite;
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss, ValueParseErrorKind};
 use super::AllowQuirks;
 use values::computed::{Color as ComputedColor, Context, ToComputedValue};
 use values::specified::calc::CalcNode;
@@ -187,7 +187,10 @@ impl Parse for Color {
 }
 
 impl ToCss for Color {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             Color::CurrentColor => CSSParserColor::CurrentColor.to_css(dest),
             Color::Numeric { authored: Some(ref authored), .. } => dest.write_str(authored),
diff --git a/components/style/values/specified/font.rs b/components/style/values/specified/font.rs
index 9ecd11ea5997c..4905bed33b4ce 100644
--- a/components/style/values/specified/font.rs
+++ b/components/style/values/specified/font.rs
@@ -16,8 +16,8 @@ use parser::{Parse, ParserContext};
 use properties::longhands::system_font::SystemFont;
 #[allow(unused_imports)]
 use std::ascii::AsciiExt;
-use std::fmt;
-use style_traits::{ToCss, StyleParseErrorKind, ParseError};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::CustomIdent;
 use values::computed::{font as computed, Context, Length, NonNegativeLength, ToComputedValue};
 use values::computed::font::{SingleFontFamily, FontFamilyList, FamilyName};
@@ -144,7 +144,10 @@ pub enum FontSize {
 }
 
 impl ToCss for FontSize {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             FontSize::Length(ref lop) => lop.to_css(dest),
             FontSize::Keyword(info) => info.kw.to_css(dest),
@@ -243,7 +246,10 @@ impl MallocSizeOf for FontFamily {
 }
 
 impl ToCss for FontFamily {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             FontFamily::Values(ref v) => {
                 let mut iter = v.iter();
@@ -408,7 +414,10 @@ impl Default for KeywordSize {
 }
 
 impl ToCss for KeywordSize {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str(match *self {
             KeywordSize::XXSmall => "xx-small",
             KeywordSize::XSmall => "x-small",
@@ -824,7 +833,10 @@ impl VariantAlternatesList {
 }
 
 impl ToCss for VariantAlternatesList {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.0.is_empty() {
             return dest.write_str("normal");
         }
@@ -1031,7 +1043,10 @@ impl VariantEastAsian {
 }
 
 impl ToCss for VariantEastAsian {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.is_empty() {
             return dest.write_str("normal")
         }
@@ -1265,7 +1280,10 @@ impl VariantLigatures {
 }
 
 impl ToCss for VariantLigatures {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.is_empty() {
             return dest.write_str("normal")
         }
@@ -1506,7 +1524,10 @@ impl VariantNumeric {
 }
 
 impl ToCss for VariantNumeric {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.is_empty() {
             return dest.write_str("normal")
         }
@@ -1801,7 +1822,10 @@ impl Parse for FontSynthesis {
 }
 
 impl ToCss for FontSynthesis {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.weight && self.style {
             dest.write_str("weight style")
         } else if self.style {
@@ -1953,7 +1977,10 @@ impl Parse for XTextZoom {
 }
 
 impl ToCss for XTextZoom {
-    fn to_css<W>(&self, _: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, _: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         Ok(())
     }
 }
@@ -1981,7 +2008,10 @@ impl Parse for XLang {
 }
 
 impl ToCss for XLang {
-    fn to_css<W>(&self, _: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, _: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         Ok(())
     }
 }
diff --git a/components/style/values/specified/image.rs b/components/style/values/specified/image.rs
index 188b3239a7ebb..001e8c09976d7 100644
--- a/components/style/values/specified/image.rs
+++ b/components/style/values/specified/image.rs
@@ -16,8 +16,8 @@ use selectors::parser::SelectorParseErrorKind;
 use servo_url::ServoUrl;
 use std::cmp::Ordering;
 use std::f32::consts::PI;
-use std::fmt;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::{Either, None_};
 #[cfg(feature = "gecko")]
 use values::computed::{Context, Position as ComputedPosition, ToComputedValue};
@@ -659,8 +659,13 @@ impl GenericsLineDirection for LineDirection {
         }
     }
 
-    fn to_css<W>(&self, dest: &mut W, compat_mode: CompatMode) -> fmt::Result
-        where W: fmt::Write
+    fn to_css<W>(
+        &self,
+        dest: &mut CssWriter<W>,
+        compat_mode: CompatMode,
+    ) -> fmt::Result
+    where
+        W: Write,
     {
         match *self {
             LineDirection::Angle(angle) => {
diff --git a/components/style/values/specified/inherited_box.rs b/components/style/values/specified/inherited_box.rs
index 6d483c35fb26d..85cdb8e18a255 100644
--- a/components/style/values/specified/inherited_box.rs
+++ b/components/style/values/specified/inherited_box.rs
@@ -7,8 +7,8 @@
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
 use std::f64::consts::PI;
-use std::fmt;
-use style_traits::{ParseError, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::computed;
 use values::computed::{Context, Orientation, ToComputedValue};
 use values::specified::Angle;
@@ -25,7 +25,10 @@ pub struct ImageOrientation {
 }
 
 impl ToCss for ImageOrientation {
-    fn to_css<W: fmt::Write>(&self, dest: &mut W) -> fmt::Result {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if let Some(angle) = self.angle {
             angle.to_css(dest)?;
             if self.flipped {
diff --git a/components/style/values/specified/list.rs b/components/style/values/specified/list.rs
index 0472f9a36f4de..9acba5ca1e512 100644
--- a/components/style/values/specified/list.rs
+++ b/components/style/values/specified/list.rs
@@ -6,8 +6,8 @@
 
 use cssparser::{Parser, Token};
 use parser::{Parse, ParserContext};
-use std::fmt;
-use style_traits::{ParseError, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::{Either, None_};
 #[cfg(feature = "gecko")]
 use values::CustomIdent;
@@ -114,7 +114,10 @@ impl Parse for ListStyleImage {
 pub struct Quotes(pub Box<[(Box<str>, Box<str>)]>);
 
 impl ToCss for Quotes {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         let mut iter = self.0.iter();
 
         match iter.next() {
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index c8bd26f14904f..4a0ae8f9cbf58 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -13,8 +13,8 @@ use parser::{ParserContext, Parse};
 use self::url::SpecifiedUrl;
 #[allow(unused_imports)] use std::ascii::AsciiExt;
 use std::f32;
-use std::fmt;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use style_traits::values::specified::AllowedNumericType;
 use super::{Auto, CSSFloat, CSSInteger, Either, None_};
 use super::computed::{Context, ToComputedValue};
@@ -250,8 +250,9 @@ impl ToComputedValue for Number {
 }
 
 impl ToCss for Number {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         if self.calc_clamping_mode.is_some() {
             dest.write_str("calc(")?;
@@ -476,8 +477,9 @@ impl ToComputedValue for Integer {
 }
 
 impl ToCss for Integer {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         if self.was_calc {
             dest.write_str("calc(")?;
@@ -560,7 +562,10 @@ pub struct ClipRect {
 
 
 impl ToCss for ClipRect {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("rect(")?;
 
         if let Some(ref top) = self.top {
@@ -805,7 +810,10 @@ impl Attr {
 }
 
 impl ToCss for Attr {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str("attr(")?;
         if let Some(ref ns) = self.namespace {
             serialize_identifier(&ns.0.to_string(), dest)?;
diff --git a/components/style/values/specified/percentage.rs b/components/style/values/specified/percentage.rs
index 7d06d56ab6e15..ec1e3093a8975 100644
--- a/components/style/values/specified/percentage.rs
+++ b/components/style/values/specified/percentage.rs
@@ -7,8 +7,8 @@
 use cssparser::{Parser, Token};
 use parser::{Parse, ParserContext};
 #[allow(unused_imports)] use std::ascii::AsciiExt;
-use std::fmt;
-use style_traits::{ParseError, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, ToCss};
 use style_traits::values::specified::AllowedNumericType;
 use values::{CSSFloat, serialize_percentage};
 use values::computed::{Context, ToComputedValue};
@@ -29,8 +29,9 @@ pub struct Percentage {
 
 
 impl ToCss for Percentage {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         if self.calc_clamping_mode.is_some() {
             dest.write_str("calc(")?;
diff --git a/components/style/values/specified/position.rs b/components/style/values/specified/position.rs
index 0a0a42b837f20..e20dafed0100e 100644
--- a/components/style/values/specified/position.rs
+++ b/components/style/values/specified/position.rs
@@ -11,10 +11,10 @@ use cssparser::Parser;
 use hash::FnvHashMap;
 use parser::{Parse, ParserContext};
 use selectors::parser::SelectorParseErrorKind;
-use std::fmt;
+use std::fmt::{self, Write};
 use std::ops::Range;
 use str::HTML_SPACE_CHARACTERS;
-use style_traits::{ToCss, StyleParseErrorKind, ParseError};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::{Either, None_};
 use values::computed::{CalcLengthOrPercentage, LengthOrPercentage as ComputedLengthOrPercentage};
 use values::computed::{Context, Percentage, ToComputedValue};
@@ -142,7 +142,10 @@ impl Position {
 }
 
 impl ToCss for Position {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match (&self.horizontal, &self.vertical) {
             (x_pos @ &PositionComponent::Side(_, Some(_)), &PositionComponent::Length(ref y_lop)) => {
                 x_pos.to_css(dest)?;
@@ -369,7 +372,10 @@ impl LegacyPosition {
 }
 
 impl ToCss for LegacyPosition {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         self.horizontal.to_css(dest)?;
         dest.write_str(" ")?;
         self.vertical.to_css(dest)
@@ -409,7 +415,10 @@ impl GridAutoFlow {
 }
 
 impl ToCss for GridAutoFlow {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         self.autoflow.to_css(dest)?;
 
         if self.dense { dest.write_str(" dense")?; }
@@ -584,7 +593,10 @@ impl TemplateAreas {
 }
 
 impl ToCss for TemplateAreas {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         for (i, string) in self.strings.iter().enumerate() {
             if i != 0 {
                 dest.write_str(" ")?;
diff --git a/components/style/values/specified/svg.rs b/components/style/values/specified/svg.rs
index b8fa6409a0359..f5f89cfc4d7b1 100644
--- a/components/style/values/specified/svg.rs
+++ b/components/style/values/specified/svg.rs
@@ -6,8 +6,9 @@
 
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
-use std::fmt;
-use style_traits::{CommaWithSpace, ParseError, Separator, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{CommaWithSpace, CssWriter, ParseError, Separator};
+use style_traits::{StyleParseErrorKind, ToCss};
 use values::CustomIdent;
 use values::generics::svg as generic;
 use values::specified::{LengthOrPercentage, NonNegativeLengthOrPercentage, NonNegativeNumber};
@@ -237,7 +238,10 @@ impl Parse for SVGPaintOrder {
 }
 
 impl ToCss for SVGPaintOrder {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         if self.0 == 0 {
             return dest.write_str("normal")
         }
diff --git a/components/style/values/specified/table.rs b/components/style/values/specified/table.rs
index a86fe0167fd5a..89f9941633d06 100644
--- a/components/style/values/specified/table.rs
+++ b/components/style/values/specified/table.rs
@@ -7,7 +7,7 @@
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
 use std::fmt;
-use style_traits::{ToCss, StyleParseErrorKind, ParseError};
+use style_traits::{CssWriter, ToCss, StyleParseErrorKind, ParseError};
 
 #[derive(Clone, Copy, Debug, MallocSizeOf, PartialEq, ToComputedValue)]
 /// span. for `<col span>` pres attr
@@ -21,7 +21,7 @@ impl Parse for XSpan {
 }
 
 impl ToCss for XSpan {
-    fn to_css<W>(&self, _: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, _: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
         Ok(())
     }
 }
diff --git a/components/style/values/specified/text.rs b/components/style/values/specified/text.rs
index d9e05b5005739..5db55dd7668b7 100644
--- a/components/style/values/specified/text.rs
+++ b/components/style/values/specified/text.rs
@@ -8,8 +8,8 @@ use cssparser::{Parser, Token};
 use parser::{Parse, ParserContext};
 use selectors::parser::SelectorParseErrorKind;
 #[allow(unused_imports)] use std::ascii::AsciiExt;
-use std::fmt;
-use style_traits::{ParseError, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::computed::{Context, ToComputedValue};
 use values::computed::text::LineHeight as ComputedLineHeight;
 use values::computed::text::TextOverflow as ComputedTextOverflow;
@@ -440,7 +440,10 @@ impl Parse for TextAlign {
 }
 
 impl ToCss for TextAlign {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         match *self {
             TextAlign::Keyword(key) => key.to_css(dest),
             #[cfg(feature = "gecko")]
diff --git a/components/style/values/specified/time.rs b/components/style/values/specified/time.rs
index bfc57d518dd2e..d91787b7ab268 100644
--- a/components/style/values/specified/time.rs
+++ b/components/style/values/specified/time.rs
@@ -7,8 +7,8 @@
 use cssparser::{Parser, Token};
 use parser::{ParserContext, Parse};
 #[allow(unused_imports)] use std::ascii::AsciiExt;
-use std::fmt;
-use style_traits::{ToCss, ParseError, StyleParseErrorKind};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use style_traits::values::specified::AllowedNumericType;
 use values::CSSFloat;
 use values::computed::{Context, ToComputedValue};
@@ -133,9 +133,9 @@ impl Parse for Time {
 }
 
 impl ToCss for Time {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
     where
-        W: fmt::Write,
+        W: Write,
     {
         if self.was_calc {
             dest.write_str("calc(")?;
diff --git a/components/style/values/specified/ui.rs b/components/style/values/specified/ui.rs
index 5d9321a583395..2d9d83d5cc369 100644
--- a/components/style/values/specified/ui.rs
+++ b/components/style/values/specified/ui.rs
@@ -6,8 +6,8 @@
 
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
-use std::fmt;
-use style_traits::{ParseError, StyleParseErrorKind, ToCss};
+use std::fmt::{self, Write};
+use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 
 /// Specified value of `-moz-force-broken-image-icon`
 #[derive(Clone, Copy, Debug, MallocSizeOf, PartialEq, ToComputedValue)]
@@ -36,7 +36,10 @@ impl Parse for MozForceBrokenImageIcon {
 }
 
 impl ToCss for MozForceBrokenImageIcon {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
         dest.write_str(if self.0 { "1" } else { "0" })
     }
 }
diff --git a/components/style_derive/to_css.rs b/components/style_derive/to_css.rs
index 12fad8f0d346b..db56ca3b64403 100644
--- a/components/style_derive/to_css.rs
+++ b/components/style_derive/to_css.rs
@@ -48,7 +48,7 @@ pub fn derive(input: DeriveInput) -> Tokens {
             }
 
             quote! {{
-                let mut writer = ::style_traits::values::SequenceWriter::new(&mut *dest, #separator);
+                let mut writer = ::style_traits::values::SequenceWriter::new(dest, #separator);
                 #expr
                 Ok(())
             }}
@@ -78,7 +78,10 @@ pub fn derive(input: DeriveInput) -> Tokens {
         impl #impl_generics ::style_traits::ToCss for #name #ty_generics #where_clause {
             #[allow(unused_variables)]
             #[inline]
-            fn to_css<W>(&self, dest: &mut W) -> ::std::fmt::Result
+            fn to_css<W>(
+                &self,
+                dest: &mut ::style_traits::CssWriter<W>,
+            ) -> ::std::fmt::Result
             where
                 W: ::std::fmt::Write
             {
@@ -93,7 +96,10 @@ pub fn derive(input: DeriveInput) -> Tokens {
         impls.append(quote! {
             impl #impl_generics ::std::fmt::Debug for #name #ty_generics #where_clause {
                 fn fmt(&self, f: &mut ::std::fmt::Formatter) -> ::std::fmt::Result {
-                    ::style_traits::ToCss::to_css(self, f)
+                    ::style_traits::ToCss::to_css(
+                        self,
+                        &mut ::style_traits::CssWriter::new(f),
+                    )
                 }
             }
         });
diff --git a/components/style_traits/cursor.rs b/components/style_traits/cursor.rs
index ca40c4aed79b7..3ffd2814382f4 100644
--- a/components/style_traits/cursor.rs
+++ b/components/style_traits/cursor.rs
@@ -4,7 +4,7 @@
 
 //! A list of common mouse cursors per CSS3-UI § 8.1.1.
 
-use super::ToCss;
+use super::{CssWriter, ToCss};
 
 macro_rules! define_cursor {
     (
@@ -46,10 +46,14 @@ macro_rules! define_cursor {
         }
 
         impl ToCss for CursorKind {
-            fn to_css<W>(&self, dest: &mut W) -> ::std::fmt::Result where W: ::std::fmt::Write {
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> ::std::fmt::Result where W: ::std::fmt::Write {
                 match *self {
-                    $( CursorKind::$c_variant => dest.write_str($c_css), )+
-                    $( #[cfg(feature = "gecko")] CursorKind::$g_variant => dest.write_str($g_css), )+
+                    $(CursorKind::$c_variant => {
+                        ::std::fmt::Write::write_str(dest, $c_css)
+                    })+
+                    $(#[cfg(feature = "gecko")] CursorKind::$g_variant => {
+                        ::std::fmt::Write::write_str(dest, $g_css)
+                    })+
                 }
             }
         }
diff --git a/components/style_traits/lib.rs b/components/style_traits/lib.rs
index e0f1993c5a845..3988d2fa4460f 100644
--- a/components/style_traits/lib.rs
+++ b/components/style_traits/lib.rs
@@ -78,7 +78,7 @@ pub mod values;
 #[macro_use]
 pub mod viewport;
 
-pub use values::{Comma, CommaWithSpace, OneOrMoreSeparated, Separator, Space, ToCss};
+pub use values::{Comma, CommaWithSpace, CssWriter, OneOrMoreSeparated, Separator, Space, ToCss};
 
 /// The error type for all CSS parsing routines.
 pub type ParseError<'i> = cssparser::ParseError<'i, StyleParseErrorKind<'i>>;
diff --git a/components/style_traits/values.rs b/components/style_traits/values.rs
index 3e951548e6c47..7c529eac62ccd 100644
--- a/components/style_traits/values.rs
+++ b/components/style_traits/values.rs
@@ -34,7 +34,7 @@ use std::fmt::{self, Write};
 ///   implement `Debug` by a single call to `ToCss::to_css`.
 pub trait ToCss {
     /// Serialize `self` in CSS syntax, writing to `dest`.
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write;
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write;
 
     /// Serialize `self` in CSS syntax and return a string.
     ///
@@ -42,27 +42,27 @@ pub trait ToCss {
     #[inline]
     fn to_css_string(&self) -> String {
         let mut s = String::new();
-        self.to_css(&mut s).unwrap();
+        self.to_css(&mut CssWriter::new(&mut s)).unwrap();
         s
     }
 }
 
 impl<'a, T> ToCss for &'a T where T: ToCss + ?Sized {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write {
         (*self).to_css(dest)
     }
 }
 
 impl ToCss for str {
     #[inline]
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write {
         serialize_string(self, dest)
     }
 }
 
 impl ToCss for String {
     #[inline]
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write {
         serialize_string(self, dest)
     }
 }
@@ -72,11 +72,58 @@ where
     T: ToCss,
 {
     #[inline]
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write {
         self.as_ref().map_or(Ok(()), |value| value.to_css(dest))
     }
 }
 
+/// A writer tailored for serialising CSS.
+///
+/// Coupled with SequenceWriter, this allows callers to transparently handle
+/// things like comma-separated values etc.
+pub struct CssWriter<'w, W: 'w> {
+    inner: &'w mut W,
+    prefix: Option<&'static str>,
+}
+
+impl<'w, W> CssWriter<'w, W>
+where
+    W: Write,
+{
+    /// Creates a new `CssWriter`.
+    pub fn new(inner: &'w mut W) -> Self {
+        Self { inner, prefix: Some("") }
+    }
+}
+
+impl<'w, W> Write for CssWriter<'w, W>
+where
+    W: Write,
+{
+    #[inline]
+    fn write_str(&mut self, s: &str) -> fmt::Result {
+        if s.is_empty() {
+            return Ok(());
+        }
+        if let Some(prefix) = self.prefix.take() {
+            if !prefix.is_empty() {
+                self.inner.write_str(prefix)?;
+            }
+        }
+        self.inner.write_str(s)
+    }
+
+    #[inline]
+    fn write_char(&mut self, c: char) -> fmt::Result {
+        if let Some(prefix) = self.prefix.take() {
+            if !prefix.is_empty() {
+                self.inner.write_str(prefix)?;
+            }
+        }
+        self.inner.write_char(c)
+    }
+}
+
 #[macro_export]
 macro_rules! serialize_function {
     ($dest: expr, $name: ident($( $arg: expr, )+)) => {
@@ -96,22 +143,22 @@ macro_rules! serialize_function {
 }
 
 /// Convenience wrapper to serialise CSS values separated by a given string.
-pub struct SequenceWriter<'a, W> {
-    writer: TrackedWriter<W>,
-    separator: &'a str,
+pub struct SequenceWriter<'a, 'b: 'a, W: 'b> {
+    inner: &'a mut CssWriter<'b, W>,
+    separator: &'static str,
 }
 
-impl<'a, W> SequenceWriter<'a, W>
+impl<'a, 'b, W> SequenceWriter<'a, 'b, W>
 where
-    W: Write,
+    W: Write + 'b,
 {
     /// Create a new sequence writer.
     #[inline]
-    pub fn new(writer: W, separator: &'a str) -> Self {
-        SequenceWriter {
-            writer: TrackedWriter::new(writer),
-            separator: separator,
+    pub fn new(inner: &'a mut CssWriter<'b, W>, separator: &'static str) -> Self {
+        if inner.prefix.is_none() {
+            inner.prefix = Some("");
         }
+        Self { inner, separator }
     }
 
     /// Serialises a CSS value, writing any separator as necessary.
@@ -125,89 +172,15 @@ where
     where
         T: ToCss,
     {
-        if self.writer.has_written {
-            item.to_css(&mut PrefixedWriter::new(&mut self.writer, self.separator))
-        } else {
-            item.to_css(&mut self.writer)
-        }
-    }
-}
-
-struct TrackedWriter<W> {
-    writer: W,
-    has_written: bool,
-}
-
-impl<W> TrackedWriter<W>
-where
-    W: Write,
-{
-    #[inline]
-    fn new(writer: W) -> Self {
-        TrackedWriter {
-            writer: writer,
-            has_written: false,
+        let has_prefix = self.inner.prefix.is_some();
+        if !has_prefix {
+            self.inner.prefix = Some(self.separator);
         }
-    }
-}
-
-impl<W> Write for TrackedWriter<W>
-where
-    W: Write,
-{
-    #[inline]
-    fn write_str(&mut self, s: &str) -> fmt::Result {
-        if !s.is_empty() {
-            self.has_written = true;
+        item.to_css(&mut self.inner)?;
+        if !has_prefix {
+            self.inner.prefix = None;
         }
-        self.writer.write_str(s)
-    }
-
-    #[inline]
-    fn write_char(&mut self, c: char) -> fmt::Result {
-        self.has_written = true;
-        self.writer.write_char(c)
-    }
-}
-
-struct PrefixedWriter<'a, W> {
-    writer: W,
-    prefix: Option<&'a str>,
-}
-
-impl<'a, W> PrefixedWriter<'a, W>
-where
-    W: Write,
-{
-    #[inline]
-    fn new(writer: W, prefix: &'a str) -> Self {
-        PrefixedWriter {
-            writer: writer,
-            prefix: Some(prefix),
-        }
-    }
-}
-
-impl<'a, W> Write for PrefixedWriter<'a, W>
-where
-    W: Write,
-{
-    #[inline]
-    fn write_str(&mut self, s: &str) -> fmt::Result {
-        if !s.is_empty() {
-            if let Some(prefix) = self.prefix.take() {
-                self.writer.write_str(prefix)?;
-            }
-        }
-        self.writer.write_str(s)
-    }
-
-    #[inline]
-    fn write_char(&mut self, c: char) -> fmt::Result {
-        if let Some(prefix) = self.prefix.take() {
-            self.writer.write_str(prefix)?;
-        }
-        self.writer.write_char(c)
+        Ok(())
     }
 }
 
@@ -332,7 +305,7 @@ impl OneOrMoreSeparated for UnicodeRange {
 }
 
 impl<T> ToCss for Vec<T> where T: ToCss + OneOrMoreSeparated {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write {
         let mut iter = self.iter();
         iter.next().unwrap().to_css(dest)?;
         for item in iter {
@@ -344,7 +317,7 @@ impl<T> ToCss for Vec<T> where T: ToCss + OneOrMoreSeparated {
 }
 
 impl<T> ToCss for Box<T> where T: ?Sized + ToCss {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
         where W: Write,
     {
         (**self).to_css(dest)
@@ -352,7 +325,7 @@ impl<T> ToCss for Box<T> where T: ?Sized + ToCss {
 }
 
 impl<T> ToCss for Arc<T> where T: ?Sized + ToCss {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
         where W: Write,
     {
         (**self).to_css(dest)
@@ -360,7 +333,7 @@ impl<T> ToCss for Arc<T> where T: ?Sized + ToCss {
 }
 
 impl ToCss for Au {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write {
         self.to_f64_px().to_css(dest)?;
         dest.write_str("px")
     }
@@ -369,7 +342,7 @@ impl ToCss for Au {
 macro_rules! impl_to_css_for_predefined_type {
     ($name: ty) => {
         impl<'a> ToCss for $name {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: Write {
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: Write {
                 ::cssparser::ToCss::to_css(self, dest)
             }
         }
@@ -479,11 +452,11 @@ macro_rules! __define_css_keyword_enum__actual {
         }
 
         impl $crate::ToCss for $name {
-            fn to_css<W>(&self, dest: &mut W) -> ::std::fmt::Result
+            fn to_css<W>(&self, dest: &mut $crate::CssWriter<W>) -> ::std::fmt::Result
                 where W: ::std::fmt::Write
             {
                 match *self {
-                    $( $name::$variant => dest.write_str($css) ),+
+                    $( $name::$variant => ::std::fmt::Write::write_str(dest, $css) ),+
                 }
             }
         }
diff --git a/components/style_traits/viewport.rs b/components/style_traits/viewport.rs
index c3538e4416b4a..e2f8c6baf6f9e 100644
--- a/components/style_traits/viewport.rs
+++ b/components/style_traits/viewport.rs
@@ -4,11 +4,11 @@
 
 //! Helper types for the `@viewport` rule.
 
-use {CSSPixel, PinchZoomFactor, ParseError, ToCss};
+use {CSSPixel, CssWriter, ParseError, PinchZoomFactor, ToCss};
 use cssparser::Parser;
 use euclid::TypedSize2D;
 #[allow(unused_imports)] use std::ascii::AsciiExt;
-use std::fmt;
+use std::fmt::{self, Write};
 
 define_css_keyword_enum!(UserZoom:
                          "zoom" => Zoom,
@@ -42,8 +42,9 @@ pub struct ViewportConstraints {
 }
 
 impl ToCss for ViewportConstraints {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
     {
         dest.write_str("@viewport { width: ")?;
         self.size.width.to_css(dest)?;
@@ -86,7 +87,7 @@ pub enum Zoom {
 }
 
 impl ToCss for Zoom {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
         where W: fmt::Write,
     {
         match *self {
diff --git a/ports/geckolib/glue.rs b/ports/geckolib/glue.rs
index 2ee79abc56c30..a594f9bb7b9b5 100644
--- a/ports/geckolib/glue.rs
+++ b/ports/geckolib/glue.rs
@@ -155,7 +155,7 @@ use style::values::distance::ComputeSquaredDistance;
 use style::values::specified;
 use style::values::specified::gecko::IntersectionObserverRootMargin;
 use style::values::specified::source_size_list::SourceSizeList;
-use style_traits::{ParsingMode, StyleParseErrorKind, ToCss};
+use style_traits::{CssWriter, ParsingMode, StyleParseErrorKind, ToCss};
 use super::error_reporter::ErrorReporter;
 use super::stylesheet_loader::StylesheetLoader;
 
@@ -707,8 +707,12 @@ pub extern "C" fn Servo_AnimationValue_Serialize(value: RawServoAnimationValueBo
     let uncomputed_value = AnimationValue::as_arc(&value).uncompute();
     let mut string = String::new();
     let rv = PropertyDeclarationBlock::with_one(uncomputed_value, Importance::Normal)
-        .single_value_to_css(&get_property_id_from_nscsspropertyid!(property, ()), &mut string,
-                             None, None /* No extra custom properties */);
+        .single_value_to_css(
+            &get_property_id_from_nscsspropertyid!(property, ()),
+            &mut CssWriter::new(&mut string),
+            None,
+            None /* No extra custom properties */,
+        );
     debug_assert!(rv.is_ok());
 
     let buffer = unsafe { buffer.as_mut().unwrap() };
@@ -734,7 +738,7 @@ pub extern "C" fn Servo_Shorthand_AnimationValues_Serialize(shorthand_property:
         values.iter().map(|v| AnimationValue::as_arc(unsafe { &&*v.mRawPtr }).uncompute()).collect();
 
     let mut string = String::new();
-    let rv = shorthand.longhands_to_css(declarations.iter(), &mut string);
+    let rv = shorthand.longhands_to_css(declarations.iter(), &mut CssWriter::new(&mut string));
     if rv.is_ok() {
         let buffer = unsafe { buffer.as_mut().unwrap() };
         buffer.assign_utf8(&string);
@@ -1458,7 +1462,7 @@ macro_rules! impl_basic_rule_funcs_without_getter {
             let global_style_data = &*GLOBAL_STYLE_DATA;
             let guard = global_style_data.shared_lock.read();
             let rule = Locked::<$rule_type>::as_arc(&rule);
-            rule.read_with(&guard).to_css(&guard, unsafe { result.as_mut().unwrap() }).unwrap();
+            rule.read_with(&guard).to_css(&guard, &mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap();
         }
     }
 }
@@ -1829,7 +1833,7 @@ pub extern "C" fn Servo_Keyframe_GetKeyText(
     result: *mut nsAString
 ) {
     read_locked_arc(keyframe, |keyframe: &Keyframe| {
-        keyframe.selector.to_css(unsafe { result.as_mut().unwrap() }).unwrap()
+        keyframe.selector.to_css(&mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap()
     })
 }
 
@@ -1969,7 +1973,7 @@ pub extern "C" fn Servo_PageRule_SetStyle(rule: RawServoPageRuleBorrowed,
 pub extern "C" fn Servo_SupportsRule_GetConditionText(rule: RawServoSupportsRuleBorrowed,
                                                       result: *mut nsAString) {
     read_locked_arc(rule, |rule: &SupportsRule| {
-        rule.condition.to_css(unsafe { result.as_mut().unwrap() }).unwrap();
+        rule.condition.to_css(&mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap();
     })
 }
 
@@ -1977,7 +1981,7 @@ pub extern "C" fn Servo_SupportsRule_GetConditionText(rule: RawServoSupportsRule
 pub extern "C" fn Servo_DocumentRule_GetConditionText(rule: RawServoDocumentRuleBorrowed,
                                                       result: *mut nsAString) {
     read_locked_arc(rule, |rule: &DocumentRule| {
-        rule.condition.to_css(unsafe { result.as_mut().unwrap() }).unwrap();
+        rule.condition.to_css(&mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap();
     })
 }
 
@@ -1985,7 +1989,7 @@ pub extern "C" fn Servo_DocumentRule_GetConditionText(rule: RawServoDocumentRule
 pub extern "C" fn Servo_FontFeatureValuesRule_GetFontFamily(rule: RawServoFontFeatureValuesRuleBorrowed,
                                                             result: *mut nsAString) {
     read_locked_arc(rule, |rule: &FontFeatureValuesRule| {
-        rule.font_family_to_css(unsafe { result.as_mut().unwrap() }).unwrap();
+        rule.font_family_to_css(&mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap();
     })
 }
 
@@ -1993,7 +1997,7 @@ pub extern "C" fn Servo_FontFeatureValuesRule_GetFontFamily(rule: RawServoFontFe
 pub extern "C" fn Servo_FontFeatureValuesRule_GetValueText(rule: RawServoFontFeatureValuesRuleBorrowed,
                                                            result: *mut nsAString) {
     read_locked_arc(rule, |rule: &FontFeatureValuesRule| {
-        rule.value_to_css(unsafe { result.as_mut().unwrap() }).unwrap();
+        rule.value_to_css(&mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap();
     })
 }
 
@@ -2660,7 +2664,7 @@ pub extern "C" fn Servo_DeclarationBlock_Equals(
 pub extern "C" fn Servo_DeclarationBlock_GetCssText(declarations: RawServoDeclarationBlockBorrowed,
                                                     result: *mut nsAString) {
     read_locked_arc(declarations, |decls: &PropertyDeclarationBlock| {
-        decls.to_css(unsafe { result.as_mut().unwrap() }).unwrap();
+        decls.to_css(&mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap();
     })
 }
 
@@ -2682,7 +2686,7 @@ pub extern "C" fn Servo_DeclarationBlock_SerializeOneValue(
     let custom_properties = Locked::<PropertyDeclarationBlock>::arc_from_borrowed(&custom_properties);
     let custom_properties = custom_properties.map(|block| block.read_with(&guard));
     let rv = decls.single_value_to_css(
-        &property_id, &mut string, computed_values, custom_properties);
+        &property_id, &mut CssWriter::new(&mut string), computed_values, custom_properties);
     debug_assert!(rv.is_ok());
 
     let buffer = unsafe { buffer.as_mut().unwrap() };
@@ -2706,7 +2710,7 @@ pub extern "C" fn Servo_SerializeFontValueForCanvas(
         };
 
         let mut string = String::new();
-        let rv = longhands.to_css_for_canvas(&mut string);
+        let rv = longhands.to_css_for_canvas(&mut CssWriter::new(&mut string));
         debug_assert!(rv.is_ok());
 
         let buffer = unsafe { buffer.as_mut().unwrap() };
@@ -2757,7 +2761,7 @@ unsafe fn get_property_value(
     // Using an unchecked read here improves our performance by ~10% on the
     // microbenchmark in bug 1355599.
     read_locked_arc_unchecked(declarations, |decls: &PropertyDeclarationBlock| {
-        decls.property_value_to_css(&property_id, value.as_mut().unwrap()).unwrap();
+        decls.property_value_to_css(&property_id, &mut CssWriter::new(value.as_mut().unwrap())).unwrap();
     })
 }
 
@@ -2933,7 +2937,7 @@ pub extern "C" fn Servo_DeclarationBlock_HasCSSWideKeyword(
 #[no_mangle]
 pub extern "C" fn Servo_MediaList_GetText(list: RawServoMediaListBorrowed, result: *mut nsAString) {
     read_locked_arc(list, |list: &MediaList| {
-        list.to_css(unsafe { result.as_mut().unwrap() }).unwrap();
+        list.to_css(&mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap();
     })
 }
 
@@ -2989,7 +2993,7 @@ pub extern "C" fn Servo_MediaList_GetMediumAt(
 ) -> bool {
     read_locked_arc(list, |list: &MediaList| {
         if let Some(media_query) = list.media_queries.get(index as usize) {
-            media_query.to_css(unsafe { result.as_mut().unwrap() }).unwrap();
+            media_query.to_css(&mut CssWriter::new(unsafe { result.as_mut().unwrap() })).unwrap();
             true
         } else {
             false
@@ -4402,7 +4406,7 @@ pub extern "C" fn Servo_GetCustomPropertyValue(
         None => return false,
     };
 
-    computed_value.to_css(unsafe { value.as_mut().unwrap() }).unwrap();
+    computed_value.to_css(&mut CssWriter::new(unsafe { value.as_mut().unwrap() })).unwrap();
     true
 }
 
diff --git a/tests/unit/style/media_queries.rs b/tests/unit/style/media_queries.rs
index 2cddcff5defbd..58b878bfb8d07 100644
--- a/tests/unit/style/media_queries.rs
+++ b/tests/unit/style/media_queries.rs
@@ -279,8 +279,7 @@ fn test_mq_expressions() {
 fn test_to_css() {
     test_media_rule("@media print and (width: 43px) { }", |list, _| {
         let q = &list.media_queries[0];
-        let mut dest = String::new();
-        assert_eq!(Ok(()), q.to_css(&mut dest));
+        let dest = q.to_css_string();
         assert_eq!(dest, "print and (width: 43px)");
     });
 }