Use postcss-modules-local-by-default

2026-01-12 22:51:09 +08:00 · 2015-06-09 14:08:48 -07:00
parent 90779f702a
commit 78b23428bd
26 changed files with 249 additions and 243 deletions
--- a/lib/css/background.css
+++ b/lib/css/background.css
@@ -1,13 +1,13 @@
-:local .backgroundColor-#fff { background-color: #fff; }
-:local .backgroundColor-transparent { background-color: currentcolor; }
+.backgroundColor-#fff { background-color: #fff; }
+.backgroundColor-transparent { background-color: currentcolor; }

-:local .backgroundImage { background-image: none; }
+.backgroundImage { background-image: none; }

-:local .backgroundPosition-center { background-position: center; }
-:local .backgroundSize-contain { background-size: contain; }
-:local .backgroundSize-cover { background-size: cover; }
+.backgroundPosition-center { background-position: center; }
+.backgroundSize-contain { background-size: contain; }
+.backgroundSize-cover { background-size: cover; }

-:local .backgroundRepeat-no-repeat { background-repeat: no-repeat; }
-:local .backgroundRepeat-repeat { background-repeat: repeat; }
-:local .backgroundRepeat-repeat-x { background-repeat: repeat-x; }
-:local .backgroundRepeat-repeat-y { background-repeat: repeat-y; }
+.backgroundRepeat-no-repeat { background-repeat: no-repeat; }
+.backgroundRepeat-repeat { background-repeat: repeat; }
+.backgroundRepeat-repeat-x { background-repeat: repeat-x; }
+.backgroundRepeat-repeat-y { background-repeat: repeat-y; }
--- a/lib/css/border.css
+++ b/lib/css/border.css
@@ -1,42 +1,42 @@
-:local .borderColor-currentcolor { border-color: currentcolor; }
-:local .borderColor-transparent { border-color: transparent; }
+.borderColor-currentcolor { border-color: currentcolor; }
+.borderColor-transparent { border-color: transparent; }

-:local .borderStyle-dotted { border-style: dotted; }
-:local .borderStyle-dashed { border-style: dashed; }
-:local .borderStyle-solid { border-style: solid; }
+.borderStyle-dotted { border-style: dotted; }
+.borderStyle-dashed { border-style: dashed; }
+.borderStyle-solid { border-style: solid; }

-:local .borderWidth-0 { border-width: 0; }
-:local .borderTopWidth-0 { border-top-width: 0; }
-:local .borderRightWidth-0 { border-right-width: 0; }
-:local .borderBottomWidth-0 { border-bottom-width: 0; }
-:local .borderLeftWidth-0 { border-left-width: 0; }
+.borderWidth-0 { border-width: 0; }
+.borderTopWidth-0 { border-top-width: 0; }
+.borderRightWidth-0 { border-right-width: 0; }
+.borderBottomWidth-0 { border-bottom-width: 0; }
+.borderLeftWidth-0 { border-left-width: 0; }

-:local .borderWidth-1px { border-width: 1px; }
-:local .borderTopWidth-1px { border-top-width: 1px; }
-:local .borderRightWidth-1px { border-right-width: 1px; }
-:local .borderBottomWidth-1px { border-bottom-width: 1px; }
-:local .borderLeftWidth-1px { border-left-width: 1px; }
+.borderWidth-1px { border-width: 1px; }
+.borderTopWidth-1px { border-top-width: 1px; }
+.borderRightWidth-1px { border-right-width: 1px; }
+.borderBottomWidth-1px { border-bottom-width: 1px; }
+.borderLeftWidth-1px { border-left-width: 1px; }

-:local .borderWidth-2px { border-width: 2px; }
-:local .borderTopWidth-2px { border-top-width: 2px; }
-:local .borderRightWidth-2px { border-right-width: 2px; }
-:local .borderBottomWidth-2px { border-bottom-width: 2px; }
-:local .borderLeftWidth-2px { border-left-width: 2px; }
+.borderWidth-2px { border-width: 2px; }
+.borderTopWidth-2px { border-top-width: 2px; }
+.borderRightWidth-2px { border-right-width: 2px; }
+.borderBottomWidth-2px { border-bottom-width: 2px; }
+.borderLeftWidth-2px { border-left-width: 2px; }

-:local .borderWidth-3px { border-width: 3px; }
-:local .borderTopWidth-3px { border-top-width: 3px; }
-:local .borderRightWidth-3px { border-right-width: 3px; }
-:local .borderBottomWidth-3px { border-bottom-width: 3px; }
-:local .borderLeftWidth-3px { border-left-width: 3px; }
+.borderWidth-3px { border-width: 3px; }
+.borderTopWidth-3px { border-top-width: 3px; }
+.borderRightWidth-3px { border-right-width: 3px; }
+.borderBottomWidth-3px { border-bottom-width: 3px; }
+.borderLeftWidth-3px { border-left-width: 3px; }

-:local .borderWidth-4px { border-width: 4px; }
-:local .borderTopWidth-4px { border-top-width: 4px; }
-:local .borderRightWidth-4px { border-right-width: 4px; }
-:local .borderBottomWidth-4px { border-bottom-width: 4px; }
-:local .borderLeftWidth-4px { border-left-width: 4px; }
+.borderWidth-4px { border-width: 4px; }
+.borderTopWidth-4px { border-top-width: 4px; }
+.borderRightWidth-4px { border-right-width: 4px; }
+.borderBottomWidth-4px { border-bottom-width: 4px; }
+.borderLeftWidth-4px { border-left-width: 4px; }

-:local .borderWidth-5px { border-width: 5px; }
-:local .borderTopWidth-5px { border-top-width: 5px; }
-:local .borderRightWidth-5px { border-right-width: 5px; }
-:local .borderBottomWidth-5px { border-bottom-width: 5px; }
-:local .borderLeftWidth-5px { border-left-width: 5px; }
+.borderWidth-5px { border-width: 5px; }
+.borderTopWidth-5px { border-top-width: 5px; }
+.borderRightWidth-5px { border-right-width: 5px; }
+.borderBottomWidth-5px { border-bottom-width: 5px; }
+.borderLeftWidth-5px { border-left-width: 5px; }
--- a/lib/css/boxSizing.css
+++ b/lib/css/boxSizing.css
@@ -1,2 +1,2 @@
-:local .boxSizing-border-box { box-sizing: border-box; }
-:local .boxSizing-content-box { box-sizing: content-box; }
+.boxSizing-border-box { box-sizing: border-box; }
+.boxSizing-content-box { box-sizing: content-box; }
--- a/lib/css/clear.css
+++ b/lib/css/clear.css
@@ -1,4 +1,4 @@
-:local .clear-both { clear: both; }
-:local .clear-left { clear: left; }
-:local .clear-none { clear: none; }
-:local .clear-right { clear: right; }
+.clear-both { clear: both; }
+.clear-left { clear: left; }
+.clear-none { clear: none; }
+.clear-right { clear: right; }
--- a/lib/css/color.css
+++ b/lib/css/color.css
@@ -1,4 +1,4 @@
-:local .color-\#fff { color: #fff; }
-:local .color-\#000 { color: #000; }
-:local .color-transparent { color: transparent; }
-:local .color-inherit { color: inherit; }
+.color-\#fff { color: #fff; }
+.color-\#000 { color: #000; }
+.color-transparent { color: transparent; }
+.color-inherit { color: inherit; }
--- a/lib/css/direction.css
+++ b/lib/css/direction.css
@@ -1,3 +1,3 @@
-:local .direction-auto { direction: auto; }
-:local .direction-ltr { direction: ltr; }
-:local .direction-rtl { direction: rtl; }
+.direction-auto { direction: auto; }
+.direction-ltr { direction: ltr; }
+.direction-rtl { direction: rtl; }
--- a/lib/css/display.css
+++ b/lib/css/display.css
@@ -1,12 +1,12 @@
-:local .display-block { display: block; }
-:local .display-flex { display: flex; }
-:local .display-inline { display: inline; }
-:local .display-inline-block { display: inline-block; }
-:local .display-inline-flex { display: inline-flex; }
-:local .display-inline-table { display: inline-table; }
-:local .display-none { display: none; }
-:local .display-table { display: table; }
-:local .display-table-row { display: table-row; }
-:local .display-table-cell { display: table-cell; }
-:local .display-table-column { display: table-column; }
-:local .display-table-column-group { display: table-column-group; }
+.display-block { display: block; }
+.display-flex { display: flex; }
+.display-inline { display: inline; }
+.display-inline-block { display: inline-block; }
+.display-inline-flex { display: inline-flex; }
+.display-inline-table { display: inline-table; }
+.display-none { display: none; }
+.display-table { display: table; }
+.display-table-row { display: table-row; }
+.display-table-cell { display: table-cell; }
+.display-table-column { display: table-column; }
+.display-table-column-group { display: table-column-group; }
--- a/lib/css/flexbox.css
+++ b/lib/css/flexbox.css
@@ -1,70 +1,70 @@
-:local .alignContent-center { align-content: center; }
-:local .alignContent-flex-end { align-content: flex-end; }
-:local .alignContent-flex-start { align-content: flex-start; }
-:local .alignContent-stretch { align-content: stretch; }
-:local .alignContent-space-around { align-content: space-around; }
-:local .alignContent-space-between { align-content: space-between; }
+.alignContent-center { align-content: center; }
+.alignContent-flex-end { align-content: flex-end; }
+.alignContent-flex-start { align-content: flex-start; }
+.alignContent-stretch { align-content: stretch; }
+.alignContent-space-around { align-content: space-around; }
+.alignContent-space-between { align-content: space-between; }

-:local .alignItems-center { align-items: center; }
-:local .alignItems-flex-end { align-items: flex-end; }
-:local .alignItems-flex-start { align-items: flex-start; }
-:local .alignItems-stretch { align-items: stretch; }
-:local .alignItems-space-around { align-items: space-around; }
-:local .alignItems-space-between { align-items: space-between; }
+.alignItems-center { align-items: center; }
+.alignItems-flex-end { align-items: flex-end; }
+.alignItems-flex-start { align-items: flex-start; }
+.alignItems-stretch { align-items: stretch; }
+.alignItems-space-around { align-items: space-around; }
+.alignItems-space-between { align-items: space-between; }

-:local .alignSelf-auto { align-self: auto; }
-:local .alignSelf-baseline { align-self: baseline; }
-:local .alignSelf-center { align-self: center; }
-:local .alignSelf-flex-end { align-self: flex-end; }
-:local .alignSelf-flex-start { align-self: flex-start; }
-:local .alignSelf-stretch { align-self: stretch; }
+.alignSelf-auto { align-self: auto; }
+.alignSelf-baseline { align-self: baseline; }
+.alignSelf-center { align-self: center; }
+.alignSelf-flex-end { align-self: flex-end; }
+.alignSelf-flex-start { align-self: flex-start; }
+.alignSelf-stretch { align-self: stretch; }

-:local .flexBasis-0 { flex-basis: 0%; }
-:local .flexBasis-auto { flex-basis: auto; }
+.flexBasis-0 { flex-basis: 0%; }
+.flexBasis-auto { flex-basis: auto; }

-:local .flexDirection-column { flex-direction: column; }
-:local .flexDirection-column-reverse { flex-direction: column-reverse; }
-:local .flexDirection-row { flex-direction: row; }
-:local .flexDirection-row-reverse { flex-direction: row-reverse; }
+.flexDirection-column { flex-direction: column; }
+.flexDirection-column-reverse { flex-direction: column-reverse; }
+.flexDirection-row { flex-direction: row; }
+.flexDirection-row-reverse { flex-direction: row-reverse; }

-:local .flexGrow-0 { flex-grow: 0; }
-:local .flexGrow-1 { flex-grow: 1; }
-:local .flexGrow-2 { flex-grow: 2; }
-:local .flexGrow-3 { flex-grow: 3; }
-:local .flexGrow-4 { flex-grow: 4; }
-:local .flexGrow-5 { flex-grow: 5; }
-:local .flexGrow-6 { flex-grow: 6; }
-:local .flexGrow-7 { flex-grow: 7; }
-:local .flexGrow-8 { flex-grow: 8; }
-:local .flexGrow-9 { flex-grow: 9; }
+.flexGrow-0 { flex-grow: 0; }
+.flexGrow-1 { flex-grow: 1; }
+.flexGrow-2 { flex-grow: 2; }
+.flexGrow-3 { flex-grow: 3; }
+.flexGrow-4 { flex-grow: 4; }
+.flexGrow-5 { flex-grow: 5; }
+.flexGrow-6 { flex-grow: 6; }
+.flexGrow-7 { flex-grow: 7; }
+.flexGrow-8 { flex-grow: 8; }
+.flexGrow-9 { flex-grow: 9; }

-:local .flexShrink-0 { flex-shrink: 0; }
-:local .flexShrink-1 { flex-shrink: 1; }
-:local .flexShrink-2 { flex-shrink: 2; }
-:local .flexShrink-3 { flex-shrink: 3; }
-:local .flexShrink-4 { flex-shrink: 4; }
-:local .flexShrink-5 { flex-shrink: 5; }
-:local .flexShrink-6 { flex-shrink: 6; }
-:local .flexShrink-7 { flex-shrink: 7; }
-:local .flexShrink-8 { flex-shrink: 8; }
-:local .flexShrink-9 { flex-shrink: 9; }
+.flexShrink-0 { flex-shrink: 0; }
+.flexShrink-1 { flex-shrink: 1; }
+.flexShrink-2 { flex-shrink: 2; }
+.flexShrink-3 { flex-shrink: 3; }
+.flexShrink-4 { flex-shrink: 4; }
+.flexShrink-5 { flex-shrink: 5; }
+.flexShrink-6 { flex-shrink: 6; }
+.flexShrink-7 { flex-shrink: 7; }
+.flexShrink-8 { flex-shrink: 8; }
+.flexShrink-9 { flex-shrink: 9; }

-:local .flexWrap-nowrap { flex-wrap: nowrap; }
-:local .flexWrap-wrap { flex-wrap: wrap; }
-:local .flexWrap-wrap-reverse { flex-wrap: wrap-reverse; }
+.flexWrap-nowrap { flex-wrap: nowrap; }
+.flexWrap-wrap { flex-wrap: wrap; }
+.flexWrap-wrap-reverse { flex-wrap: wrap-reverse; }

-:local .justifyContent-center { justify-content: center; }
-:local .justifyContent-flex-end { justify-content: flex-end; }
-:local .justifyContent-flex-start { justify-content: flex-start; }
-:local .justifyContent-space-around { justify-content: space-around; }
-:local .justifyContent-space-between { justify-content: space-between; }
+.justifyContent-center { justify-content: center; }
+.justifyContent-flex-end { justify-content: flex-end; }
+.justifyContent-flex-start { justify-content: flex-start; }
+.justifyContent-space-around { justify-content: space-around; }
+.justifyContent-space-between { justify-content: space-between; }

-:local .order-1 { order: 1; }
-:local .order-2 { order: 2; }
-:local .order-3 { order: 3; }
-:local .order-4 { order: 4; }
-:local .order-5 { order: 5; }
-:local .order-6 { order: 6; }
-:local .order-7 { order: 7; }
-:local .order-8 { order: 8; }
-:local .order-9 { order: 9; }
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-9 { order: 9; }
--- a/lib/css/float.css
+++ b/lib/css/float.css
@@ -1,3 +1,3 @@
-:local .float-left { float: left; }
-:local .float-none { float: none; }
-:local .float-right { float: right; }
+.float-left { float: left; }
+.float-none { float: none; }
+.float-right { float: right; }
--- a/lib/css/font.css
+++ b/lib/css/font.css
@@ -1,16 +1,16 @@
-:local .font-inherit { font: inherit; }
+.font-inherit { font: inherit; }

-:local .fontStyle-italic { font-style: italic; }
-:local .fontStyle-normal { font-style: normal; }
+.fontStyle-italic { font-style: italic; }
+.fontStyle-normal { font-style: normal; }

-:local .fontWeight-100 { font-weight: 100; }
-:local .fontWeight-200 { font-weight: 200; }
-:local .fontWeight-300 { font-weight: 300; }
-:local .fontWeight-400 { font-weight: 400; }
-:local .fontWeight-500 { font-weight: 500; }
-:local .fontWeight-600 { font-weight: 600; }
-:local .fontWeight-700 { font-weight: 700; }
-:local .fontWeight-800 { font-weight: 800; }
-:local .fontWeight-900 { font-weight: 900; }
-:local .fontWeight-bold { font-weight: bold; }
-:local .fontWeight-normal { font-weight: normal; }
+.fontWeight-100 { font-weight: 100; }
+.fontWeight-200 { font-weight: 200; }
+.fontWeight-300 { font-weight: 300; }
+.fontWeight-400 { font-weight: 400; }
+.fontWeight-500 { font-weight: 500; }
+.fontWeight-600 { font-weight: 600; }
+.fontWeight-700 { font-weight: 700; }
+.fontWeight-800 { font-weight: 800; }
+.fontWeight-900 { font-weight: 900; }
+.fontWeight-bold { font-weight: bold; }
+.fontWeight-normal { font-weight: normal; }
--- a/lib/css/height.css
+++ b/lib/css/height.css
@@ -1,3 +1,3 @@
-:local .maxHeight-100\% { max-height: 100%; }
-:local .minHeight-100\% { min-height: 100%; }
-:local .height-100\% { height: 100%; }
+.maxHeight-100\% { max-height: 100%; }
+.minHeight-100\% { min-height: 100%; }
+.height-100\% { height: 100%; }
--- a/lib/css/margin.css
+++ b/lib/css/margin.css
@@ -1,13 +1,13 @@
-:local .margin-0 { margin: 0; }
-:local .margin-auto { margin: auto; }
-:local .marginTop-0 { margin-top: 0; }
-:local .marginTop-auto { margin-top: auto; }
+.margin-0 { margin: 0; }
+.margin-auto { margin: auto; }
+.marginTop-0 { margin-top: 0; }
+.marginTop-auto { margin-top: auto; }

-:local .marginRight-0 { margin-right: 0; }
-:local .marginRight-auto { margin-right: auto; }
+.marginRight-0 { margin-right: 0; }
+.marginRight-auto { margin-right: auto; }

-:local .marginBottom-0 { margin-bottom: 0; }
-:local .marginBottom-auto { margin-bottom: auto; }
+.marginBottom-0 { margin-bottom: 0; }
+.marginBottom-auto { margin-bottom: auto; }

-:local .marginLeft-0 { margin-left: 0; }
-:local .marginLeft-auto { margin-left: auto; }
+.marginLeft-0 { margin-left: 0; }
+.marginLeft-auto { margin-left: auto; }
--- a/lib/css/overflow.css
+++ b/lib/css/overflow.css
@@ -1,14 +1,14 @@
-:local .overflow-auto { overflow: auto; }
-:local .overflow-hidden { overflow: hidden; }
-:local .overflow-scroll { overflow: scroll; }
-:local .overflow-visible { overflow: visible; }
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-scroll { overflow: scroll; }
+.overflow-visible { overflow: visible; }

-:local .overflowX-auto { overflow-x: auto; }
-:local .overflowX-hidden { overflow-x: hidden; }
-:local .overflowX-scroll { overflow-x: scroll; }
-:local .overflowX-visible { overflow-x: visible; }
+.overflowX-auto { overflow-x: auto; }
+.overflowX-hidden { overflow-x: hidden; }
+.overflowX-scroll { overflow-x: scroll; }
+.overflowX-visible { overflow-x: visible; }

-:local .overflowY-auto { overflow-y: auto; }
-:local .overflowY-hidden { overflow-y: hidden; }
-:local .overflowY-scroll { overflow-y: scroll; }
-:local .overflowY-visible { overflow-y: visible; }
+.overflowY-auto { overflow-y: auto; }
+.overflowY-hidden { overflow-y: hidden; }
+.overflowY-scroll { overflow-y: scroll; }
+.overflowY-visible { overflow-y: visible; }
--- a/lib/css/padding.css
+++ b/lib/css/padding.css
@@ -1,17 +1,17 @@
-:local .padding-0 { padding: 0; }
-:local .paddingTop-0 { padding-top: 0; }
-:local .paddingRight-0 { padding-right: 0; }
-:local .paddingBottom-0 { padding-bottom: 0; }
-:local .paddingLeft-0 { padding-left: 0; }
+.padding-0 { padding: 0; }
+.paddingTop-0 { padding-top: 0; }
+.paddingRight-0 { padding-right: 0; }
+.paddingBottom-0 { padding-bottom: 0; }
+.paddingLeft-0 { padding-left: 0; }

-:local .padding-1em { padding: 1em; }
-:local .paddingTop-1em { padding-top: 1em; }
-:local .paddingRight-1em { padding-right: 1em; }
-:local .paddingBottom-1em { padding-bottom: 1em; }
-:local .paddingLeft-1em { padding-left: 1em; }
+.padding-1em { padding: 1em; }
+.paddingTop-1em { padding-top: 1em; }
+.paddingRight-1em { padding-right: 1em; }
+.paddingBottom-1em { padding-bottom: 1em; }
+.paddingLeft-1em { padding-left: 1em; }

-:local .padding-1rem { padding: 1rem; }
-:local .paddingTop-1rem { padding-top: 1rem; }
-:local .paddingRight-1rem { padding-right: 1rem; }
-:local .paddingBottom-1rem { padding-bottom: 1rem; }
-:local .paddingLeft-1rem { padding-left: 1rem; }
+.padding-1rem { padding: 1rem; }
+.paddingTop-1rem { padding-top: 1rem; }
+.paddingRight-1rem { padding-right: 1rem; }
+.paddingBottom-1rem { padding-bottom: 1rem; }
+.paddingLeft-1rem { padding-left: 1rem; }
--- a/lib/css/pointerEvents.css
+++ b/lib/css/pointerEvents.css
@@ -1,6 +1,6 @@
-:local .pointerEvents-auto { pointer-events: auto; }
-:local .pointerEvents-none { pointer-events: none; }
-:local .pointerEvents-box-none { pointer-events: none; }
-:local .pointerEvents-box-none * { pointer-events: auto;}
-:local .pointerEvents-box-only { pointer-events: auto; }
-:local .pointerEvents-box-only * { pointer-events: none; }
+.pointerEvents-auto { pointer-events: auto; }
+.pointerEvents-none { pointer-events: none; }
+.pointerEvents-box-none { pointer-events: none; }
+.pointerEvents-box-none * { pointer-events: auto;}
+.pointerEvents-box-only { pointer-events: auto; }
+.pointerEvents-box-only * { pointer-events: none; }
--- a/lib/css/position.css
+++ b/lib/css/position.css
@@ -1,13 +1,13 @@
-:local .position-absolute { position: absolute; }
-:local .position-fixed { position: fixed; }
-:local .position-relative { position: relative; }
+.position-absolute { position: absolute; }
+.position-fixed { position: fixed; }
+.position-relative { position: relative; }

-:local .top-0 { top: 0; }
-:local .right-0 { right: 0; }
-:local .left-0 { left: 0; }
-:local .bottom-0 { bottom: 0; }
+.top-0 { top: 0; }
+.right-0 { right: 0; }
+.left-0 { left: 0; }
+.bottom-0 { bottom: 0; }

-:local .top-100\% { top: 100%; }
-:local .right-100\% { right: 100%; }
-:local .left-100\% { left: 100%; }
-:local .bottom-100\% { bottom: 100%; }
+.top-100\% { top: 100%; }
+.right-100\% { right: 100%; }
+.left-100\% { left: 100%; }
+.bottom-100\% { bottom: 100%; }
--- a/lib/css/text.css
+++ b/lib/css/text.css
@@ -1,14 +1,14 @@
-:local .textAlign-center { text-align: center; }
-:local .textAlign-left { text-align: left; }
-:local .textAlign-right { text-align: right; }
-:local .textAlign-justify { text-align: justify; }
+.textAlign-center { text-align: center; }
+.textAlign-left { text-align: left; }
+.textAlign-right { text-align: right; }
+.textAlign-justify { text-align: justify; }

-:local .textDecoration-none { text-decoration: none; }
-:local .textDecoration-underline { text-decoration: underline; }
+.textDecoration-none { text-decoration: none; }
+.textDecoration-underline { text-decoration: underline; }

-:local .textOverflow-ellipsis { text-overflow: ellipsis }
+.textOverflow-ellipsis { text-overflow: ellipsis }

-:local .textTransform-capitalize { text-transform: capitalize; }
-:local .textTransform-lowercase { text-transform: lowercase; }
-:local .textTransform-none { text-transform: none; }
-:local .textTransform-uppercase { text-transform: uppercase; }
+.textTransform-capitalize { text-transform: capitalize; }
+.textTransform-lowercase { text-transform: lowercase; }
+.textTransform-none { text-transform: none; }
+.textTransform-uppercase { text-transform: uppercase; }
--- a/lib/css/userSelect.css
+++ b/lib/css/userSelect.css
@@ -1,3 +1,3 @@
-:local .userSelect-all { user-select: all; }
-:local .userSelect-inherit { user-select: inherit; }
-:local .userSelect-none { user-select: none; }
+.userSelect-all { user-select: all; }
+.userSelect-inherit { user-select: inherit; }
+.userSelect-none { user-select: none; }
--- a/lib/css/visibility.css
+++ b/lib/css/visibility.css
@@ -1,2 +1,2 @@
-:local .visibility-hidden { visibility: hidden; }
-:local .visibility-visible { visibility: visible; }
+.visibility-hidden { visibility: hidden; }
+.visibility-visible { visibility: visible; }
--- a/lib/css/whiteSpace.css
+++ b/lib/css/whiteSpace.css
@@ -1,3 +1,3 @@
-:local .whiteSpace-normal { white-space: normal; }
-:local .whiteSpace-nowrap { white-space: nowrap; }
-:local .whiteSpace-pre { white-space: pre; }
+.whiteSpace-normal { white-space: normal; }
+.whiteSpace-nowrap { white-space: nowrap; }
+.whiteSpace-pre { white-space: pre; }
--- a/lib/css/width.css
+++ b/lib/css/width.css
@@ -1,3 +1,3 @@
-:local .maxWidth-100\% { max-width: 100%; }
-:local .minWidth-100\% { min-width: 100%; }
-:local .width-100\% { width: 100%; }
+.maxWidth-100\% { max-width: 100%; }
+.minWidth-100\% { min-width: 100%; }
+.width-100\% { width: 100%; }
--- a/lib/css/word.css
+++ b/lib/css/word.css
@@ -1,2 +1,2 @@
-:local .wordWrap-break-word { word-wrap: break-word; }
-:local .wordWrap-normal { word-wrap: normal; }
+.wordWrap-break-word { word-wrap: break-word; }
+.wordWrap-normal { word-wrap: normal; }
--- a/lib/css/zIndex.css
+++ b/lib/css/zIndex.css
@@ -1,12 +1,12 @@
-:local .zIndex--1 { z-index: -1; }
-:local .zIndex-0 { z-index: 0; }
-:local .zIndex-1 { z-index: 1; }
-:local .zIndex-2 { z-index: 2; }
-:local .zIndex-3 { z-index: 3; }
-:local .zIndex-4 { z-index: 4; }
-:local .zIndex-5 { z-index: 5; }
-:local .zIndex-6 { z-index: 6; }
-:local .zIndex-7 { z-index: 7; }
-:local .zIndex-8 { z-index: 8; }
-:local .zIndex-9 { z-index: 9; }
-:local .zIndex-10 { z-index: 10; }
+.zIndex--1 { z-index: -1; }
+.zIndex-0 { z-index: 0; }
+.zIndex-1 { z-index: 1; }
+.zIndex-2 { z-index: 2; }
+.zIndex-3 { z-index: 3; }
+.zIndex-4 { z-index: 4; }
+.zIndex-5 { z-index: 5; }
+.zIndex-6 { z-index: 6; }
+.zIndex-7 { z-index: 7; }
+.zIndex-8 { z-index: 8; }
+.zIndex-9 { z-index: 9; }
+.zIndex-10 { z-index: 10; }
--- a/lib/styleMap.js
+++ b/lib/styleMap.js
@@ -1,3 +1,4 @@
+import background from './css/background.css';
 import border from './css/border.css';
 import boxSizing from './css/boxSizing.css';
 import clear from './css/clear.css';
@@ -19,8 +20,10 @@ import visibility from './css/visibility.css';
 import whiteSpace from './css/whiteSpace.css';
 import width from './css/width.css';
 import word from './css/word.css';
+import zIndex from './css/zIndex.css';

 const map = Object.assign({},
+  background,
  border,
  boxSizing,
  clear,
@@ -41,7 +44,8 @@ const map = Object.assign({},
  visibility,
  whiteSpace,
  width,
-  word
+  word,
+  zIndex
 );

 export default map;
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "css-loader": "^0.14.4",
    "node-libs-browser": "^0.5.2",
    "postcss-loader": "^0.4.4",
+    "postcss-modules-local-by-default": "0.0.7",
    "style-loader": "^0.12.3",
    "webpack": "^1.9.10"
  },
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,5 @@
 var autoprefixer = require('autoprefixer-core');
+var localcss = require('postcss-modules-local-by-default');

 module.exports = {
  module: {
@@ -15,5 +16,5 @@ module.exports = {
      }
    ]
  },
-  postcss: [ autoprefixer ]
+  postcss: [ autoprefixer, localcss ]
 };