diff --git a/flex-layout-alignment-literals.js b/flex-layout-alignment-literals.js
index c7e177c..96d5ba1 100644
--- a/flex-layout-alignment-literals.js
+++ b/flex-layout-alignment-literals.js
@@ -1,118 +1,118 @@
-import { unsafeCSS } from 'lit-element';
+import { css } from 'lit-element';
 
-export const startAligned = unsafeCSS`
+export const startAligned = css`
   -ms-flex-align: start;
   -webkit-align-items: flex-start;
   align-items: flex-start;
 `;
 
-export const centerAligned = unsafeCSS`
+export const centerAligned = css`
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
 `;
 
-export const endAligned = unsafeCSS`
+export const endAligned = css`
   -ms-flex-align: end;
   -webkit-align-items: flex-end;
   align-items: flex-end;
 `;
 
-export const baseline = unsafeCSS`
+export const baseline = css`
   -ms-flex-align: baseline;
   -webkit-align-items: baseline;
   align-items: baseline;
 `;
 
-export const startJustified = unsafeCSS`
+export const startJustified = css`
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
 `;
 
-export const centerJustified = unsafeCSS`
+export const centerJustified = css`
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
 `;
 
-export const endJustified = unsafeCSS`
+export const endJustified = css`
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
 `;
 
-export const aroundJustified = unsafeCSS`
+export const aroundJustified = css`
   -ms-flex-pack: distribute;
   -webkit-justify-content: space-around;
   justify-content: space-around;
 `;
 
-export const justified = unsafeCSS`
+export const justified = css`
   -ms-flex-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 `;
 
-export const selfStart = unsafeCSS`
+export const selfStart = css`
   -ms-align-self: flex-start;
   -webkit-align-self: flex-start;
   align-self: flex-start;
 `;
 
-export const selfCenter = unsafeCSS`
+export const selfCenter = css`
   -ms-align-self: center;
   -webkit-align-self: center;
   align-self: center;
 `;
 
-export const selfEnd = unsafeCSS`
+export const selfEnd = css`
   -ms-align-self: flex-end;
   -webkit-align-self: flex-end;
   align-self: flex-end;
 `;
 
-export const selfStretch = unsafeCSS`
+export const selfStretch = css`
   -ms-align-self: stretch;
   -webkit-align-self: stretch;
   align-self: stretch;
 `;
 
-export const selfBaseline = unsafeCSS`
+export const selfBaseline = css`
   -ms-align-self: baseline;
   -webkit-align-self: baseline;
   align-self: baseline;
 `;
 
-export const startAlignedContent = unsafeCSS`
+export const startAlignedContent = css`
   -ms-flex-line-pack: start; /* IE10 */
   -ms-align-content: flex-start;
   -webkit-align-content: flex-start;
   align-content: flex-start;
 `;
 
-export const endAlignedContent = unsafeCSS`
+export const endAlignedContent = css`
   -ms-flex-line-pack: end; /* IE10 */
   -ms-align-content: flex-end;
   -webkit-align-content: flex-end;
   align-content: flex-end;
 `;
 
-export const centerAlignedContent = unsafeCSS`
+export const centerAlignedContent = css`
   -ms-flex-line-pack: center; /* IE10 */
   -ms-align-content: center;
   -webkit-align-content: center;
   align-content: center;
 `;
 
-export const betweenAlignedContent = unsafeCSS`
+export const betweenAlignedContent = css`
   -ms-flex-line-pack: justify; /* IE10 */
   -ms-align-content: space-between;
   -webkit-align-content: space-between;
   align-content: space-between;
 `;
 
-export const aroundAlignedContent = unsafeCSS`
+export const aroundAlignedContent = css`
   -ms-flex-line-pack: distribute; /* IE10 */
   -ms-align-content: space-around;
   -webkit-align-content: space-around;
diff --git a/flex-layout-alignment.js b/flex-layout-alignment.js
index 175de7f..5d0a0b7 100644
--- a/flex-layout-alignment.js
+++ b/flex-layout-alignment.js
@@ -8,85 +8,65 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 import { css } from 'lit-element';
-import {
-  startAligned,
-  centerAligned,
-  endAligned,
-  baseline,
-  startJustified,
-  centerJustified,
-  endJustified,
-  aroundJustified,
-  justified,
-  selfStart,
-  selfCenter,
-  selfEnd,
-  selfStretch,
-  selfBaseline,
-  startAlignedContent,
-  endAlignedContent,
-  centerAlignedContent,
-  betweenAlignedContent,
-  aroundAlignedContent
-} from './flex-layout-alignment-literals';
+import * as literals from './flex-layout-alignment-literals';
 export const alignment = css`
   .layout.start {
-    ${startAligned}
+    ${literals.startAligned}
   }
   .layout.center,
   .layout.center-center {
-    ${centerAligned}
+    ${literals.centerAligned}
   }
   .layout.end {
-    ${endAligned}
+    ${literals.endAligned}
   }
   .layout.baseline {
-    ${baseline}
+    ${literals.baseline}
   }
   .layout.start-justified {
-    ${startJustified}
+    ${literals.startJustified}
   }
   .layout.center-justified,
   .layout.center-center {
-    ${centerJustified}
+    ${literals.centerJustified}
   }
   .layout.end-justified {
-    ${endJustified}
+    ${literals.endJustified}
   }
   .layout.around-justified {
-    ${aroundJustified}
+    ${literals.aroundJustified}
   }
   .layout.justified {
-    ${justified}
+    ${literals.justified}
   }
   .self-start {
-    ${selfStart}
+    ${literals.selfStart}
   }
   .self-center {
-    ${selfCenter}
+    ${literals.selfCenter}
   }
   .self-end {
-    ${selfEnd}
+    ${literals.selfEnd}
   }
   .self-stretch {
-    ${selfStretch}
+    ${literals.selfStretch}
   }
   .self-baseline {
-    ${selfBaseline}
+    ${literals.selfBaseline}
   }
   .layout.start-aligned {
-    ${startAlignedContent}
+    ${literals.startAlignedContent}
   }
   .layout.end-aligned {
-    ${endAlignedContent}
+    ${literals.endAlignedContent}
   }
   .layout.center-aligned {
-    ${centerAlignedContent}
+    ${literals.centerAlignedContent}
   }
   .layout.between-aligned {
-    ${betweenAlignedContent}
+    ${literals.betweenAlignedContent}
   }
   .layout.around-aligned {
-    ${aroundAlignedContent}
+    ${literals.aroundAlignedContent}
   }
 `;
\ No newline at end of file
diff --git a/flex-layout-factors-literals.js b/flex-layout-factors-literals.js
index 3629c4a..477a84a 100644
--- a/flex-layout-factors-literals.js
+++ b/flex-layout-factors-literals.js
@@ -1,5 +1,5 @@
-import { unsafeCSS } from 'lit-element';
-export const flexFactor = unsafeCSS`
+import { css } from 'lit-element';
+export const flexFactor = css`
   -ms-flex: 1 1 0.000000001px;
   -webkit-flex: 1;
   flex: 1;
@@ -7,67 +7,67 @@ export const flexFactor = unsafeCSS`
   flex-basis: 0.000000001px;
 `;
 
-export const flex2 = unsafeCSS`
+export const flex2 = css`
   -ms-flex: 2;
   -webkit-flex: 2;
   flex: 2;
 `;
 
-export const flex3 = unsafeCSS`
+export const flex3 = css`
   -ms-flex: 3;
   -webkit-flex: 3;
   flex: 3;
 `;
 
-export const flex4 = unsafeCSS`
+export const flex4 = css`
   -ms-flex: 4;
   -webkit-flex: 4;
   flex: 4;
 `;
 
-export const flex5 = unsafeCSS`
+export const flex5 = css`
   -ms-flex: 5;
   -webkit-flex: 5;
   flex: 5;
 `;
 
-export const flex6 = unsafeCSS`
+export const flex6 = css`
   -ms-flex: 6;
   -webkit-flex: 6;
   flex: 6;
 `;
 
-export const flex7 = unsafeCSS`
+export const flex7 = css`
   -ms-flex: 7;
   -webkit-flex: 7;
   flex: 7;
 `;
 
-export const flex8 = unsafeCSS`
+export const flex8 = css`
   -ms-flex: 8;
   -webkit-flex: 8;
   flex: 8;
 `;
 
-export const flex9 = unsafeCSS`
+export const flex9 = css`
   -ms-flex: 9;
   -webkit-flex: 9;
   flex: 9;
 `;
 
-export const flex10 = unsafeCSS`
+export const flex10 = css`
   -ms-flex: 10;
   -webkit-flex: 10;
   flex: 10;
 `;
 
-export const flex11 = unsafeCSS`
+export const flex11 = css`
   -ms-flex: 11;
   -webkit-flex: 11;
   flex: 11;
 `;
 
-export const flex12 = unsafeCSS`
+export const flex12 = css`
   -ms-flex: 12;
   -webkit-flex: 12;
   flex: 12;
diff --git a/flex-layout-factors.js b/flex-layout-factors.js
index 36d85ed..238d876 100644
--- a/flex-layout-factors.js
+++ b/flex-layout-factors.js
@@ -8,57 +8,43 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 import { css } from 'lit-element';
-import {
-  flexFactor,
-  flex2,
-  flex3,
-  flex4,
-  flex5,
-  flex6,
-  flex7,
-  flex8,
-  flex9,
-  flex10,
-  flex11,
-  flex12,
-
-} from './flex-layout-factors-literals';
+import * as literals from './flex-layout-factors-literals';
 export const factors = css`
   .flex,
   .flex-1 {
-    ${flexFactor}
+    ${literals.flexFactor}
   }
   .flex-2 {
-    ${flex2}
+    ${literals.flex2}
   }
   .flex-3 {
-    ${flex3}
+    ${literals.flex3}
   }
   .flex-4 {
-    ${flex4}
+    ${literals.flex4}
   }
   .flex-5 {
-    ${flex5}
+    ${literals.flex5}
   }
   .flex-6 {
-    ${flex6}
+    ${literals.flex6}
   }
   .flex-7 {
-    ${flex7}
+    ${literals.flex7}
   }
   .flex-8 {
-    ${flex8}
+    ${literals.flex8}
   }
   .flex-9 {
-    ${flex9}
+    ${literals.flex9}
   }
   .flex-10 {
-    ${flex10}
+    ${literals.flex10}
   }
   .flex-11 {
-    ${flex11}
+    ${literals.flex11}
   }
   .flex-12 {
-    ${flex12}
+    ${literals.flex12}
   }
 `;
\ No newline at end of file
diff --git a/flex-layout-literals.js b/flex-layout-literals.js
index 8c26b89..e08c871 100644
--- a/flex-layout-literals.js
+++ b/flex-layout-literals.js
@@ -1,54 +1,54 @@
-import { unsafeCSS } from 'lit-element';
+import { css } from 'lit-element';
 
-export const displayFlex = unsafeCSS`
+export const displayFlex = css`
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
 `;
 
-export const displayInlineFlex = unsafeCSS`
+export const displayInlineFlex = css`
   display: -ms-inline-flexbox;
   display: -webkit-inline-flex;
   display: inline-flex;
 `;
 
-export const horizontal = unsafeCSS`
+export const horizontal = css`
   -ms-flex-direction: row;
   -webkit-flex-direction: row;
   flex-direction: row;
 `;
 
-export const vertical = unsafeCSS`
+export const vertical = css`
   -ms-flex-direction: column;
   -webkit-flex-direction: column;
   flex-direction: column;
 `;
 
-export const wrap = unsafeCSS`
+export const wrap = css`
   -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
 `;
 
-export const noWrap = unsafeCSS`
+export const noWrap = css`
   -ms-flex-wrap: nowrap;
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
 `;
 
-export const centerAligned = unsafeCSS`
+export const centerAligned = css`
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
 `;
 
-export const centerJustified = unsafeCSS`
+export const centerJustified = css`
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
 `;
 
-export const flexFactor = unsafeCSS`
+export const flexFactor = css`
   -ms-flex: 1 1 0.000000001px;
   -webkit-flex: 1;
   flex: 1;
@@ -56,13 +56,13 @@ export const flexFactor = unsafeCSS`
   flex-basis: 0.000000001px;
 `;
 
-export const flexFactorAuto = unsafeCSS`
+export const flexFactorAuto = css`
   -ms-flex: 1 1 auto;
   -webkit-flex: 1 1 auto;
   flex: 1 1 auto;
 `;
 
-export const flexFactorNone = unsafeCSS`
+export const flexFactorNone = css`
   -ms-flex: none;
   -webkit-flex: none;
   flex: none;
diff --git a/flex-layout-positioning-literals.js b/flex-layout-positioning-literals.js
index 927150b..6d95472 100644
--- a/flex-layout-positioning-literals.js
+++ b/flex-layout-positioning-literals.js
@@ -1,22 +1,22 @@
-import { unsafeCSS } from 'lit-element';
+import { css } from 'lit-element';
 
-export const displayBlock = unsafeCSS`
+export const displayBlock = css`
   display: block;
 `;
 
-export const displayNone = unsafeCSS`
+export const displayNone = css`
   display: none !important;
 `;
 
-export const invisible = unsafeCSS`
+export const invisible = css`
   visibility: hidden !important;
 `;
 
-export const relative = unsafeCSS`
+export const relative = css`
   position: relative;
 `;
 
-export const fit = unsafeCSS`
+export const fit = css`
   position: absolute;
   top: 0;
   right: 0;
@@ -24,39 +24,39 @@ export const fit = unsafeCSS`
   left: 0;
 `;
 
-export const fullbleed = unsafeCSS`
+export const fullbleed = css`
   margin: 0;
   height: 100vh;
 `
 
-export const scroll = unsafeCSS`
+export const scroll = css`
   -webkit-overflow-scrolling: touch;
   overflow: auto;
 `;
 
-export const fixed = unsafeCSS`
+export const fixed = css`
   position: fixed;
 `;
 
-export const fixedTop = unsafeCSS`
+export const fixedTop = css`
   top: 0;
   left: 0;
   right: 0;
 `;
 
-export const fixedRight = unsafeCSS`
+export const fixedRight = css`
   top: 0;
   right: 0;
   bottom: 0;
 `;
 
-export const fixedLeft = unsafeCSS`
+export const fixedLeft = css`
   top: 0;
   bottom: 0;
   left: 0;
 `;
 
-export const fixedBottom = unsafeCSS`
+export const fixedBottom = css`
   right: 0;
   bottom: 0;
   left: 0;
diff --git a/flex-layout-positioning.js b/flex-layout-positioning.js
index 63abc1e..bb78f0c 100644
--- a/flex-layout-positioning.js
+++ b/flex-layout-positioning.js
@@ -8,59 +8,47 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 import { css } from 'lit-element';
-import {
-  displayBlock,
-  displayNone,
-  invisible,
-  relative,
-  fit,
-  fullbleed,
-  scroll,
-  fixed,
-  fixedTop,
-  fixedRight,
-  fixedBottom,
-  fixedLeft
-} from './flex-layout-positioning-literals';
+import * as literals from './flex-layout-positioning-literals';
+
 export const positioning = css`
   .block {
-    ${displayBlock}
+    ${literals.displayBlock}
   }
   /* IE 10 support for HTML5 hidden attr */
   [hidden] {
-    ${displayNone}
+    ${literals.displayNone}
   }
   .invisible {
-    ${invisible}
+    ${literals.invisible}
   }
   .relative {
-    ${relative}
+    ${literals.relative}
   }
   .fit {
-    ${fit}
+    ${literals.fit}
   }
   body.fullbleed {
-    ${fullbleed}
+    ${literals.fullbleed}
   }
   .scroll {
-    ${scroll}
+    ${literals.scroll}
   }
   .fixed-bottom,
   .fixed-left,
   .fixed-right,
   .fixed-top {
-    ${fixed}
+    ${literals.fixed}
   }
   .fixed-top {
-    ${fixedTop}
+    ${literals.fixedTop}
   }
   .fixed-right {
-    ${fixedRight}
+    ${literals.fixedRight}
   }
   .fixed-bottom {
-    ${fixedBottom}
+    ${literals.fixedBottom}
   }
   .fixed-left {
-    ${fixedLeft}
+    ${literals.fixedLeft}
   }
 `;
\ No newline at end of file
diff --git a/flex-layout-reverse-literals.js b/flex-layout-reverse-literals.js
index 9641c74..fd44b69 100644
--- a/flex-layout-reverse-literals.js
+++ b/flex-layout-reverse-literals.js
@@ -1,24 +1,24 @@
-import { unsafeCSS } from 'lit-element';
+import { css } from 'lit-element';
 
-export const displayFlex = unsafeCSS`
+export const displayFlex = css`
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
 `;
 
-export const horizontalReverse = unsafeCSS`
+export const horizontalReverse = css`
   -ms-flex-direction: row-reverse;
   -webkit-flex-direction: row-reverse;
   flex-direction: row-reverse;
 `;
 
-export const verticalReverse = unsafeCSS`
+export const verticalReverse = css`
   -ms-flex-direction: column-reverse;
   -webkit-flex-direction: column-reverse;
   flex-direction: column-reverse;
 `;
 
-export const wrapReverse = unsafeCSS`
+export const wrapReverse = css`
   -ms-flex-wrap: wrap-reverse;
   -webkit-flex-wrap: wrap-reverse;
   flex-wrap: wrap-reverse;
diff --git a/flex-layout-reverse.js b/flex-layout-reverse.js
index 91a40dd..05ccf0c 100644
--- a/flex-layout-reverse.js
+++ b/flex-layout-reverse.js
@@ -8,24 +8,20 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 import { css } from 'lit-element';
-import {
-  displayFlex,
-  horizontalReverse,
-  verticalReverse,
-  wrapReverse
-} from './flex-layout-reverse-literals';
+import * as literals from './flex-layout-reverse-literals';
+
 export const reverse = css`
   .layout.horizontal-reverse,
   .layout.vertical-reverse {
-    ${displayFlex}
+    ${literals.displayFlex}
   }
   .layout.horizontal-reverse {
-    ${horizontalReverse}
+    ${literals.horizontalReverse}
   }
   .layout.vertical-reverse {
-    ${verticalReverse}
+    ${literals.verticalReverse}
   }
   .layout.wrap-reverse {
-    ${wrapReverse}
+    ${literals.wrapReverse}
   }
 `;
\ No newline at end of file
diff --git a/flex-layout.js b/flex-layout.js
index 6eaaa12..fdd7012 100644
--- a/flex-layout.js
+++ b/flex-layout.js
@@ -7,57 +7,44 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
-import { css, unsafeCSS } from 'lit-element';
-import {
-  displayFlex,
-  displayInlineFlex,
-  horizontal,
-  vertical,
-  wrap,
-  noWrap,
-  centerAligned,
-  centerJustified,
-  flexFactor,
-  flexFactorAuto,
-  flexFactorNone,
-
-} from './flex-layout-literals';
+import { css } from 'lit-element';
+import * as literals from './flex-layout-literals';
 
 export const flexLayout = css`
   .layout.horizontal,
   .layout.vertical {
-    ${displayFlex}
+    ${literals.displayFlex}
   }
   .layout.inline {
-    ${displayInlineFlex}
+    ${literals.displayInlineFlex}
   }
   .layout.horizontal {
-    ${horizontal}
+    ${literals.horizontal}
   }
   .layout.vertical {
-    ${vertical}
+    ${literals.vertical}
   }
   .layout.wrap {
-    ${wrap}
+    ${literals.wrap}
   }
   .layout.no-wrap {
-    ${noWrap}
+    ${literals.noWrap}
   }
   .layout.center,
   .layout.center-center {
-    ${centerAligned}
+    ${literals.centerAligned}
   }
   .layout.center-justified,
   .layout.center-center {
-    ${centerJustified}
+    ${literals.centerJustified}
   }
   .flex {
-    ${flexFactor}
+    ${literals.flexFactor}
   }
   .flex-auto {
-    ${flexFactorAuto}
+    ${literals.flexFactorAuto}
   }
   .flex-none {
-    ${flexFactorNone}
+    ${literals.flexFactorNone}
   }
 `;
\ No newline at end of file