diff --git a/components/app_bar/config.css b/components/app_bar/config.module.css
similarity index 100%
rename from components/app_bar/config.css
rename to components/app_bar/config.module.css
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
index ac09b55cc..2fd50cbbd 100644
--- a/components/app_bar/index.js
+++ b/components/app_bar/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers';
 import { appBarFactory } from './AppBar';
 import { IconButton } from '../button';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const AppBar = appBarFactory(IconButton);
 const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
diff --git a/components/app_bar/theme.css b/components/app_bar/theme.module.css
similarity index 90%
rename from components/app_bar/theme.css
rename to components/app_bar/theme.module.css
index 3f1836817..fe8986f4e 100644
--- a/components/app_bar/theme.css
+++ b/components/app_bar/theme.module.css
@@ -1,7 +1,7 @@
-@import '../colors.css';
-@import '../media.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../media.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .appBar {
   background: var(--appbar-color);
diff --git a/components/autocomplete/config.css b/components/autocomplete/config.module.css
similarity index 100%
rename from components/autocomplete/config.css
rename to components/autocomplete/config.module.css
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
index 52e3bc568..4acb3accd 100644
--- a/components/autocomplete/index.js
+++ b/components/autocomplete/index.js
@@ -3,7 +3,7 @@ import { AUTOCOMPLETE } from '../identifiers';
 import { autocompleteFactory } from './Autocomplete';
 import { Chip } from '../chip';
 import { Input } from '../input';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Autocomplete = autocompleteFactory(Chip, Input);
 const ThemedAutocomplete = themr(AUTOCOMPLETE, theme, { withRef: true })(Autocomplete);
diff --git a/components/autocomplete/theme.css b/components/autocomplete/theme.module.css
similarity index 92%
rename from components/autocomplete/theme.css
rename to components/autocomplete/theme.module.css
index 1794d2104..069e1e4f1 100644
--- a/components/autocomplete/theme.css
+++ b/components/autocomplete/theme.module.css
@@ -1,7 +1,7 @@
-@import '../colors.css';
-@import '../variables.css';
-@import '../input/config.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import '../input/config.module.css';
+@import './config.module.css';
 
 .suggestions {
   background-color: var(--autocomplete-suggestions-background);
diff --git a/components/avatar/config.css b/components/avatar/config.module.css
similarity index 100%
rename from components/avatar/config.css
rename to components/avatar/config.module.css
diff --git a/components/avatar/index.js b/components/avatar/index.js
index 1bb9d9bc6..50f902cdc 100644
--- a/components/avatar/index.js
+++ b/components/avatar/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
 import { AVATAR } from '../identifiers';
 import { avatarFactory } from './Avatar';
 import { FontIcon } from '../font_icon/FontIcon';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Avatar = avatarFactory(FontIcon);
 const ThemedAvatar = themr(AVATAR, theme)(Avatar);
diff --git a/components/avatar/theme.css b/components/avatar/theme.module.css
similarity index 88%
rename from components/avatar/theme.css
rename to components/avatar/theme.module.css
index ce5653ca8..4921b333a 100644
--- a/components/avatar/theme.css
+++ b/components/avatar/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .avatar {
   background-color: var(--avatar-background);
diff --git a/components/button/__test__/index.spec.js b/components/button/__test__/index.spec.js
index 21fb11540..bb41e3498 100644
--- a/components/button/__test__/index.spec.js
+++ b/components/button/__test__/index.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { Button } from '../Button';
-import theme from '../theme.css';
+import theme from '../theme.module.css';
 
 describe('Button', () => {
   describe('#render', () => {
diff --git a/components/button/config.css b/components/button/config.module.css
similarity index 100%
rename from components/button/config.css
rename to components/button/config.module.css
diff --git a/components/button/index.js b/components/button/index.js
index 003bc3555..c506d01c6 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -5,7 +5,7 @@ import { browseButtonFactory } from './BrowseButton';
 import { iconButtonFactory } from './IconButton';
 import { FontIcon } from '../font_icon/FontIcon';
 import themedRippleFactory from '../ripple';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
 const IconButton = iconButtonFactory(themedRippleFactory({ centered: true }), FontIcon);
diff --git a/components/button/theme.css b/components/button/theme.module.css
similarity index 98%
rename from components/button/theme.css
rename to components/button/theme.module.css
index 1db1cb42b..05faf005f 100644
--- a/components/button/theme.css
+++ b/components/button/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .button {
   align-content: center;
diff --git a/components/card/config.css b/components/card/config.module.css
similarity index 100%
rename from components/card/config.css
rename to components/card/config.module.css
diff --git a/components/card/index.js b/components/card/index.js
index 3e8265103..309df8dc9 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -6,7 +6,7 @@ import { CardMedia } from './CardMedia';
 import { CardText } from './CardText';
 import { cardTitleFactory } from './CardTitle';
 import { Avatar } from '../avatar';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const CardTitle = cardTitleFactory(Avatar);
 const ThemedCard = themr(CARD, theme)(Card);
diff --git a/components/card/theme.css b/components/card/theme.module.css
similarity index 96%
rename from components/card/theme.css
rename to components/card/theme.module.css
index f292ec235..be0f69ba9 100644
--- a/components/card/theme.css
+++ b/components/card/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .card {
   background: var(--card-background-color);
diff --git a/components/checkbox/config.css b/components/checkbox/config.module.css
similarity index 100%
rename from components/checkbox/config.css
rename to components/checkbox/config.module.css
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
index 5fad61cdd..9135b8ef7 100644
--- a/components/checkbox/index.js
+++ b/components/checkbox/index.js
@@ -3,7 +3,7 @@ import { CHECKBOX } from '../identifiers';
 import themedRippleFactory from '../ripple';
 import { checkboxFactory } from './Checkbox';
 import checkFactory from './Check';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const ThemedCheck = checkFactory(themedRippleFactory({ centered: true, spread: 2.6 }));
 const ThemedCheckbox = themr(CHECKBOX, theme)(checkboxFactory(ThemedCheck));
diff --git a/components/checkbox/theme.css b/components/checkbox/theme.module.css
similarity index 96%
rename from components/checkbox/theme.css
rename to components/checkbox/theme.module.css
index f41d07fb8..97e120719 100644
--- a/components/checkbox/theme.css
+++ b/components/checkbox/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .field {
   display: block;
diff --git a/components/chip/config.css b/components/chip/config.module.css
similarity index 100%
rename from components/chip/config.css
rename to components/chip/config.module.css
diff --git a/components/chip/index.js b/components/chip/index.js
index 6777f33cb..426c69cec 100644
--- a/components/chip/index.js
+++ b/components/chip/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
 import { CHIP } from '../identifiers';
 import { chipFactory } from './Chip';
 import { Avatar } from '../avatar';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Chip = chipFactory(Avatar);
 const ThemedChip = themr(CHIP, theme)(Chip);
diff --git a/components/chip/theme.css b/components/chip/theme.module.css
similarity index 93%
rename from components/chip/theme.css
rename to components/chip/theme.module.css
index bcfad99db..8f27ab7e0 100644
--- a/components/chip/theme.css
+++ b/components/chip/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .chip {
   background-color: var(--chip-background);
diff --git a/components/colors.css b/components/colors.module.css
similarity index 100%
rename from components/colors.css
rename to components/colors.module.css
diff --git a/components/date_picker/__test__/index.spec.js b/components/date_picker/__test__/index.spec.js
index 7ef335f86..fa952c7fb 100644
--- a/components/date_picker/__test__/index.spec.js
+++ b/components/date_picker/__test__/index.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import theme from '../theme.css';
+import theme from '../theme.module.css';
 import { DatePickerDialog, Calendar } from '../DatePicker';
 
 describe('DatePickerDialog', () => {
diff --git a/components/date_picker/config.css b/components/date_picker/config.module.css
similarity index 100%
rename from components/date_picker/config.css
rename to components/date_picker/config.module.css
diff --git a/components/date_picker/index.js b/components/date_picker/index.js
index 2a7f36b60..5e72c5988 100644
--- a/components/date_picker/index.js
+++ b/components/date_picker/index.js
@@ -7,7 +7,7 @@ import calendarFactory from './Calendar';
 import { IconButton } from '../button';
 import { Input } from '../input';
 import { Dialog } from '../dialog';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Calendar = calendarFactory(IconButton);
 const DatePickerDialog = datePickerDialogFactory(Dialog, Calendar);
diff --git a/components/date_picker/theme.css b/components/date_picker/theme.module.css
similarity index 97%
rename from components/date_picker/theme.css
rename to components/date_picker/theme.module.css
index 6509cc1df..f0998f716 100644
--- a/components/date_picker/theme.css
+++ b/components/date_picker/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .input:not(.disabled) > .inputElement {
   cursor: pointer;
diff --git a/components/dialog/config.css b/components/dialog/config.module.css
similarity index 100%
rename from components/dialog/config.css
rename to components/dialog/config.module.css
diff --git a/components/dialog/index.js b/components/dialog/index.js
index 132144562..66fce6919 100644
--- a/components/dialog/index.js
+++ b/components/dialog/index.js
@@ -3,7 +3,7 @@ import { DIALOG } from '../identifiers';
 import { dialogFactory } from './Dialog';
 import { Overlay } from '../overlay';
 import { Button } from '../button';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Dialog = dialogFactory(Overlay, Button);
 const ThemedDialog = themr(DIALOG, theme)(Dialog);
diff --git a/components/dialog/theme.css b/components/dialog/theme.module.css
similarity index 93%
rename from components/dialog/theme.css
rename to components/dialog/theme.module.css
index 083b74feb..84aa589f0 100644
--- a/components/dialog/theme.css
+++ b/components/dialog/theme.module.css
@@ -1,7 +1,7 @@
-@import '../colors.css';
-@import '../variables.css';
-@import '../media.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import '../media.module.css';
+@import './config.module.css';
 
 .wrapper {
   align-items: center;
diff --git a/components/drawer/config.css b/components/drawer/config.module.css
similarity index 100%
rename from components/drawer/config.css
rename to components/drawer/config.module.css
diff --git a/components/drawer/index.js b/components/drawer/index.js
index 7c8909317..71d03180a 100644
--- a/components/drawer/index.js
+++ b/components/drawer/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
 import { DRAWER } from '../identifiers';
 import { Overlay } from '../overlay';
 import { drawerFactory } from './Drawer';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Drawer = drawerFactory(Overlay);
 const ThemedDrawer = themr(DRAWER, theme)(Drawer);
diff --git a/components/drawer/theme.css b/components/drawer/theme.module.css
similarity index 89%
rename from components/drawer/theme.css
rename to components/drawer/theme.module.css
index fc8152f79..a0a3e3c62 100644
--- a/components/drawer/theme.css
+++ b/components/drawer/theme.module.css
@@ -1,7 +1,7 @@
-@import '../colors.css';
-@import '../variables.css';
-@import '../media.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import '../media.module.css';
+@import './config.module.css';
 
 .wrapper {
   position: relative;
diff --git a/components/dropdown/config.css b/components/dropdown/config.module.css
similarity index 100%
rename from components/dropdown/config.css
rename to components/dropdown/config.module.css
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
index 419b264af..0c8349a81 100644
--- a/components/dropdown/index.js
+++ b/components/dropdown/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
 import { DROPDOWN } from '../identifiers';
 import { dropdownFactory } from './Dropdown';
 import { Input } from '../input';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Dropdown = dropdownFactory(Input);
 const ThemedDropdown = themr(DROPDOWN, theme)(Dropdown);
diff --git a/components/dropdown/theme.css b/components/dropdown/theme.module.css
similarity index 95%
rename from components/dropdown/theme.css
rename to components/dropdown/theme.module.css
index 52e838ef3..fe45f05a2 100644
--- a/components/dropdown/theme.css
+++ b/components/dropdown/theme.module.css
@@ -1,7 +1,7 @@
-@import '../colors.css';
-@import '../variables.css';
-@import '../input/config.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import '../input/config.module.css';
+@import './config.module.css';
 
 .value {
   & > input {
diff --git a/components/input/config.css b/components/input/config.module.css
similarity index 100%
rename from components/input/config.css
rename to components/input/config.module.css
diff --git a/components/input/index.js b/components/input/index.js
index 062dbebb5..aeb5bfe25 100644
--- a/components/input/index.js
+++ b/components/input/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
 import { INPUT } from '../identifiers';
 import { inputFactory } from './Input';
 import { FontIcon } from '../font_icon/FontIcon';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const Input = inputFactory(FontIcon);
 const ThemedInput = themr(INPUT, theme, { withRef: true })(Input);
diff --git a/components/input/theme.css b/components/input/theme.module.css
similarity index 97%
rename from components/input/theme.css
rename to components/input/theme.module.css
index 89c940a13..fc60c1841 100644
--- a/components/input/theme.css
+++ b/components/input/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .input {
   padding: var(--input-padding) 0;
diff --git a/components/layout/index.js b/components/layout/index.js
index 18b9ad55c..c2921bff8 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -6,7 +6,7 @@ import { navDrawerFactory } from './NavDrawer';
 import { Panel } from './Panel';
 import { AppBar } from '../app_bar';
 import { Drawer } from '../drawer';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const injectTheme = component => themr(LAYOUT, theme)(component);
 const ThemedNavDrawer = injectTheme(navDrawerFactory(Drawer));
diff --git a/components/layout/theme.css b/components/layout/theme.module.css
similarity index 96%
rename from components/layout/theme.css
rename to components/layout/theme.module.css
index a870285b4..054a61263 100644
--- a/components/layout/theme.css
+++ b/components/layout/theme.module.css
@@ -1,8 +1,8 @@
-@import '../colors.css';
-@import '../media.css';
-@import '../variables.css';
-@import '../app_bar/config.css';
-@import '../drawer/config.css';
+@import '../colors.module.css';
+@import '../media.module.css';
+@import '../variables.module.css';
+@import '../app_bar/config.module.css';
+@import '../drawer/config.module.css';
 
 :root {
   --layout-side-transition: all var(--animation-duration) var(--animation-curve-default);
diff --git a/components/link/index.js b/components/link/index.js
index 73c91ba15..df8a571e1 100644
--- a/components/link/index.js
+++ b/components/link/index.js
@@ -1,7 +1,7 @@
 import { themr } from 'react-css-themr';
 import { LINK } from '../identifiers';
 import { Link } from './Link';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const ThemedLink = themr(LINK, theme)(Link);
 
diff --git a/components/link/theme.css b/components/link/theme.module.css
similarity index 90%
rename from components/link/theme.css
rename to components/link/theme.module.css
index 804dae2fd..ba016e1c8 100644
--- a/components/link/theme.css
+++ b/components/link/theme.module.css
@@ -1,5 +1,5 @@
-@import '../colors.css';
-@import '../variables.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
 
 .icon {
   font-size: calc(1.8 * var(--unit));
diff --git a/components/list/config.css b/components/list/config.module.css
similarity index 100%
rename from components/list/config.css
rename to components/list/config.module.css
diff --git a/components/list/index.js b/components/list/index.js
index f13c94ec3..de147707f 100644
--- a/components/list/index.js
+++ b/components/list/index.js
@@ -13,7 +13,7 @@ import { listItemActionsFactory } from './ListItemActions';
 import { listItemContentFactory } from './ListItemContent';
 import { listItemLayoutFactory } from './ListItemLayout';
 import themedRippleFactory from '../ripple';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const applyTheme = Component => themr(LIST, theme)(Component);
 const ripple = themedRippleFactory({ centered: false, listItemIgnore: true });
diff --git a/components/list/theme.css b/components/list/theme.module.css
similarity index 97%
rename from components/list/theme.css
rename to components/list/theme.module.css
index cd80f14e4..b8fc2af8b 100644
--- a/components/list/theme.css
+++ b/components/list/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .divider {
   background-color: var(--color-divider);
diff --git a/components/media.css b/components/media.module.css
similarity index 100%
rename from components/media.css
rename to components/media.module.css
diff --git a/components/menu/config.css b/components/menu/config.module.css
similarity index 100%
rename from components/menu/config.css
rename to components/menu/config.module.css
diff --git a/components/menu/index.js b/components/menu/index.js
index a62675ab7..13b37347c 100644
--- a/components/menu/index.js
+++ b/components/menu/index.js
@@ -6,7 +6,7 @@ import { menuItemFactory } from './MenuItem';
 import { menuFactory } from './Menu';
 import { iconMenuFactory } from './IconMenu';
 import themedRippleFactory from '../ripple';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const applyTheme = Component => themr(MENU, theme)(Component);
 const ThemedMenuDivider = applyTheme(MenuDivider);
diff --git a/components/menu/theme.css b/components/menu/theme.module.css
similarity index 96%
rename from components/menu/theme.css
rename to components/menu/theme.module.css
index 4a455dee7..57e410a89 100644
--- a/components/menu/theme.css
+++ b/components/menu/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .iconMenu {
   display: inline-block;
diff --git a/components/navigation/config.css b/components/navigation/config.module.css
similarity index 100%
rename from components/navigation/config.css
rename to components/navigation/config.module.css
diff --git a/components/navigation/index.js b/components/navigation/index.js
index 5b98443b0..2de55561a 100644
--- a/components/navigation/index.js
+++ b/components/navigation/index.js
@@ -3,7 +3,7 @@ import { NAVIGATION } from '../identifiers';
 import { navigationFactory } from './Navigation';
 import { Button } from '../button';
 import { Link } from '../link';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const ThemedNavigation = themr(NAVIGATION, theme)(navigationFactory(Button, Link));
 export default ThemedNavigation;
diff --git a/components/navigation/theme.css b/components/navigation/theme.module.css
similarity index 83%
rename from components/navigation/theme.css
rename to components/navigation/theme.module.css
index e0c4a3cc3..452065bba 100644
--- a/components/navigation/theme.css
+++ b/components/navigation/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .horizontal {
   & > [data-react-toolbox='button'],
diff --git a/components/overlay/config.css b/components/overlay/config.module.css
similarity index 100%
rename from components/overlay/config.css
rename to components/overlay/config.module.css
diff --git a/components/overlay/index.js b/components/overlay/index.js
index d210af170..d4085a739 100644
--- a/components/overlay/index.js
+++ b/components/overlay/index.js
@@ -1,7 +1,7 @@
 import { themr } from 'react-css-themr';
 import { OVERLAY } from '../identifiers';
 import { Overlay } from './Overlay';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const ThemedOverlay = themr(OVERLAY, theme)(Overlay);
 export default ThemedOverlay;
diff --git a/components/overlay/theme.css b/components/overlay/theme.module.css
similarity index 77%
rename from components/overlay/theme.css
rename to components/overlay/theme.module.css
index e8b1328f5..5d4a0647c 100644
--- a/components/overlay/theme.css
+++ b/components/overlay/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .overlay {
   background-color: var(--overlay-color);
diff --git a/components/progress_bar/__test__/index.spec.js b/components/progress_bar/__test__/index.spec.js
index 2a9c1a221..f3d7e29ca 100644
--- a/components/progress_bar/__test__/index.spec.js
+++ b/components/progress_bar/__test__/index.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { ProgressBar } from '../ProgressBar';
-import theme from '../theme.css';
+import theme from '../theme.module.css';
 
 describe('ProgressBar', () => {
   describe('#calculateRatio', () => {
diff --git a/components/progress_bar/config.css b/components/progress_bar/config.module.css
similarity index 100%
rename from components/progress_bar/config.css
rename to components/progress_bar/config.module.css
diff --git a/components/progress_bar/index.js b/components/progress_bar/index.js
index a6b5a9fa3..92eb89651 100644
--- a/components/progress_bar/index.js
+++ b/components/progress_bar/index.js
@@ -1,7 +1,7 @@
 import { themr } from 'react-css-themr';
 import { PROGRESS_BAR } from '../identifiers';
 import { ProgressBar } from './ProgressBar';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const ThemedProgressBar = themr(PROGRESS_BAR, theme)(ProgressBar);
 
diff --git a/components/progress_bar/theme.css b/components/progress_bar/theme.module.css
similarity index 97%
rename from components/progress_bar/theme.css
rename to components/progress_bar/theme.module.css
index 764ebbc20..41a6c83ef 100644
--- a/components/progress_bar/theme.css
+++ b/components/progress_bar/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .value {
   background-color: var(--progress-main-color);
diff --git a/components/radio/config.css b/components/radio/config.module.css
similarity index 100%
rename from components/radio/config.css
rename to components/radio/config.module.css
diff --git a/components/radio/index.js b/components/radio/index.js
index 143a29af0..e98bf0673 100644
--- a/components/radio/index.js
+++ b/components/radio/index.js
@@ -4,7 +4,7 @@ import themedRippleFactory from '../ripple';
 import radioFactory from './Radio';
 import { radioButtonFactory } from './RadioButton';
 import { radioGroupFactory } from './RadioGroup';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const ThemedRadio = radioFactory(themedRippleFactory({ centered: true, spread: 2.6 }));
 const ThemedRadioButton = themr(RADIO, theme)(radioButtonFactory(ThemedRadio));
diff --git a/components/radio/theme.css b/components/radio/theme.module.css
similarity index 95%
rename from components/radio/theme.css
rename to components/radio/theme.module.css
index 12c7636c4..528ddcadc 100644
--- a/components/radio/theme.css
+++ b/components/radio/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .radio {
   border: calc(0.2 * var(--unit)) solid var(--radio-text-color);
diff --git a/components/ripple/config.css b/components/ripple/config.module.css
similarity index 100%
rename from components/ripple/config.css
rename to components/ripple/config.module.css
diff --git a/components/ripple/index.js b/components/ripple/index.js
index 3933c4cfa..4d2f945b1 100644
--- a/components/ripple/index.js
+++ b/components/ripple/index.js
@@ -1,4 +1,4 @@
 import rippleFactory from './Ripple';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 export default options => rippleFactory({ ...options, theme });
diff --git a/components/ripple/theme.css b/components/ripple/theme.module.css
similarity index 91%
rename from components/ripple/theme.css
rename to components/ripple/theme.module.css
index 4b4153c6c..1e0fdcaf9 100644
--- a/components/ripple/theme.css
+++ b/components/ripple/theme.module.css
@@ -1,5 +1,5 @@
-@import '../variables.css';
-@import './config.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .rippleWrapper {
   bottom: 0;
diff --git a/components/slider/__tests__/index.spec.js b/components/slider/__tests__/index.spec.js
index 817abcdc0..4cd0cdaa9 100644
--- a/components/slider/__tests__/index.spec.js
+++ b/components/slider/__tests__/index.spec.js
@@ -3,7 +3,7 @@ import { mount, shallow } from 'enzyme';
 import { Input } from '../../input/Input';
 import { ProgressBar } from '../../progress_bar/ProgressBar';
 import { Slider } from '../Slider';
-import theme from '../theme.css';
+import theme from '../theme.module.css';
 
 describe('Slider', () => {
   describe('#positionToValue', () => {
diff --git a/components/slider/config.css b/components/slider/config.module.css
similarity index 100%
rename from components/slider/config.css
rename to components/slider/config.module.css
diff --git a/components/slider/index.js b/components/slider/index.js
index a9c2a2789..364f4004f 100644
--- a/components/slider/index.js
+++ b/components/slider/index.js
@@ -3,7 +3,7 @@ import { SLIDER } from '../identifiers';
 import { ProgressBar } from '../progress_bar';
 import { Input } from '../input';
 import { sliderFactory } from './Slider';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const ThemedSlider = themr(SLIDER, theme)(sliderFactory(ProgressBar, Input));
 export default ThemedSlider;
diff --git a/components/slider/theme.css b/components/slider/theme.module.css
similarity index 98%
rename from components/slider/theme.css
rename to components/slider/theme.module.css
index 34faff95b..23be886ae 100644
--- a/components/slider/theme.css
+++ b/components/slider/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .container {
   height: var(--slider-knob-size);
diff --git a/components/snackbar/index.js b/components/snackbar/index.js
index d812ec1b8..69b25363b 100644
--- a/components/snackbar/index.js
+++ b/components/snackbar/index.js
@@ -2,7 +2,7 @@ import { themr } from 'react-css-themr';
 import { SNACKBAR } from '../identifiers';
 import { snackbarFactory } from './Snackbar';
 import { Button } from '../button';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const ThemedSnackbar = themr(SNACKBAR, theme)(snackbarFactory(Button));
 
diff --git a/components/snackbar/theme.css b/components/snackbar/theme.module.css
similarity index 96%
rename from components/snackbar/theme.css
rename to components/snackbar/theme.module.css
index f2e9660e4..32fa03f2d 100644
--- a/components/snackbar/theme.css
+++ b/components/snackbar/theme.module.css
@@ -1,5 +1,5 @@
-@import '../colors.css';
-@import '../variables.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
 
 :root {
   --snackbar-color-cancel: var(--palette-red-500);
diff --git a/components/switch/config.css b/components/switch/config.module.css
similarity index 100%
rename from components/switch/config.css
rename to components/switch/config.module.css
diff --git a/components/switch/index.js b/components/switch/index.js
index 36d0344ac..fd35ac3c2 100644
--- a/components/switch/index.js
+++ b/components/switch/index.js
@@ -3,7 +3,7 @@ import { switchFactory } from './Switch';
 import { SWITCH } from '../identifiers';
 import thumbFactory from './Thumb';
 import themedRippleFactory from '../ripple';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const applyTheme = Component => themr(SWITCH, theme)(Component);
 const ripple = themedRippleFactory({ centered: true, spread: 2.6 });
diff --git a/components/switch/theme.css b/components/switch/theme.module.css
similarity index 96%
rename from components/switch/theme.css
rename to components/switch/theme.module.css
index 6e1b94835..1de29ccdb 100644
--- a/components/switch/theme.css
+++ b/components/switch/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .field {
   display: block;
diff --git a/components/table/index.js b/components/table/index.js
index ff2500d60..ae1fa1abb 100644
--- a/components/table/index.js
+++ b/components/table/index.js
@@ -7,7 +7,7 @@ import { tableFactory } from './Table';
 import { tableHeadFactory } from './TableHead';
 import { tableRowFactory } from './TableRow';
 import { tableCellFactory } from './TableCell';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const applyTheme = Component => themr(TABLE, theme)(Component);
 const ThemedTableCell = applyTheme(tableCellFactory(FontIcon));
diff --git a/components/table/theme.css b/components/table/theme.module.css
similarity index 97%
rename from components/table/theme.css
rename to components/table/theme.module.css
index 440488a0b..efa4d0d9f 100644
--- a/components/table/theme.css
+++ b/components/table/theme.module.css
@@ -1,5 +1,5 @@
-@import '../colors.css';
-@import '../variables.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
 
 :root {
   --table-font-size: calc(1.3 * var(--unit));
diff --git a/components/tabs/__tests__/index.spec.js b/components/tabs/__tests__/index.spec.js
index 249d45879..f34b7bb1c 100644
--- a/components/tabs/__tests__/index.spec.js
+++ b/components/tabs/__tests__/index.spec.js
@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import { Tabs } from '../Tabs';
 import { Tab } from '../Tab';
 import { TabContent } from '../TabContent';
-import theme from '../theme.css';
+import theme from '../theme.module.css';
 
 describe('Tabs', () => {
   class Composition extends Component {
diff --git a/components/tabs/config.css b/components/tabs/config.module.css
similarity index 100%
rename from components/tabs/config.css
rename to components/tabs/config.module.css
diff --git a/components/tabs/index.js b/components/tabs/index.js
index b5ebaaa5d..d571e47c7 100644
--- a/components/tabs/index.js
+++ b/components/tabs/index.js
@@ -5,7 +5,7 @@ import { TabContent } from './TabContent';
 import { tabFactory } from './Tab';
 import themedRippleFactory from '../ripple';
 import { FontIcon } from '../font_icon/FontIcon';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const applyTheme = Component => themr(TABS, theme)(Component);
 const ThemedTabContent = applyTheme(TabContent);
diff --git a/components/tabs/theme.css b/components/tabs/theme.module.css
similarity index 96%
rename from components/tabs/theme.css
rename to components/tabs/theme.module.css
index 45ed0c00a..7a69a6327 100644
--- a/components/tabs/theme.css
+++ b/components/tabs/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .tabs {
   display: flex;
diff --git a/components/time_picker/config.css b/components/time_picker/config.module.css
similarity index 100%
rename from components/time_picker/config.css
rename to components/time_picker/config.module.css
diff --git a/components/time_picker/index.js b/components/time_picker/index.js
index dbfb227da..ffc0d6416 100644
--- a/components/time_picker/index.js
+++ b/components/time_picker/index.js
@@ -4,7 +4,7 @@ import { timePickerFactory } from './TimePicker';
 import timePickerDialogFactory from './TimePickerDialog';
 import { Dialog } from '../dialog';
 import { Input } from '../input';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const TimePickerDialog = timePickerDialogFactory(Dialog);
 const ThemedTimePicker = themr(TIME_PICKER, theme)(timePickerFactory(TimePickerDialog, Input));
diff --git a/components/time_picker/theme.css b/components/time_picker/theme.module.css
similarity index 98%
rename from components/time_picker/theme.css
rename to components/time_picker/theme.module.css
index 080b0f213..29ca53e69 100644
--- a/components/time_picker/theme.css
+++ b/components/time_picker/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .input:not(.disabled) > .inputElement {
   cursor: pointer;
diff --git a/components/tooltip/config.css b/components/tooltip/config.module.css
similarity index 100%
rename from components/tooltip/config.css
rename to components/tooltip/config.module.css
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index 6cedcaffc..48421c38f 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,5 +1,5 @@
 import tooltipFactory from './Tooltip';
-import theme from './theme.css';
+import theme from './theme.module.css';
 
 const themedTooltipFactory = options => tooltipFactory({ ...options, theme });
 export default tooltipFactory({ theme });
diff --git a/components/tooltip/theme.css b/components/tooltip/theme.module.css
similarity index 93%
rename from components/tooltip/theme.css
rename to components/tooltip/theme.module.css
index 57ae37d19..b16f66d17 100644
--- a/components/tooltip/theme.css
+++ b/components/tooltip/theme.module.css
@@ -1,6 +1,6 @@
-@import '../colors.css';
-@import '../variables.css';
-@import './config.css';
+@import '../colors.module.css';
+@import '../variables.module.css';
+@import './config.module.css';
 
 .tooltip {
   display: block;
diff --git a/components/variables.css b/components/variables.module.css
similarity index 100%
rename from components/variables.css
rename to components/variables.module.css
diff --git a/docs/app/commons.css b/docs/app/commons.css
deleted file mode 100644
index 60a1e654c..000000000
--- a/docs/app/commons.css
+++ /dev/null
@@ -1,90 +0,0 @@
-html {
-  font-size: 62.5%;
-}
-
-body {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  font-family: Roboto, sans-serif;
-  font-size: 1.6rem;
-  -webkit-touch-callout: none;
-  * {
-    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  }
-}
-
-a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
-code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
-h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
-legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
-strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
-  padding: 0;
-  margin: 0;
-  border: 0;
-  outline: 0;
-}
-
-*, *:before, *:after {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
-  font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-  text-size-adjust: 100%;
-}
-
-a {
-  text-decoration: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-input:not([type="checkbox"]):not([type="radio"]), button {
-  outline: none;
-  appearance: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}
-
-/* Remove firefox default style for required inputs */
-input[required]:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/* Material design font sizes */
-/* h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
-  @include typo-display-3($color-contrast: true);
-}
-
-h1 {
-  @include typo-display-3;
-}
-
-h2 {
-  @include typo-display-2;
-}
-
-h3 {
-  @include typo-display-1;
-}
-
-h4 {
-  @include typo-headline;
-}
-
-h5 {
-  @include typo-title;
-}
-
-h6 {
-  @include typo-subhead;
-}
-
-p {
-  @include typo-body-1;
-} */
\ No newline at end of file
diff --git a/docs/app/components/appbar/style.css b/docs/app/components/appbar/style.css
deleted file mode 100644
index f4448e857..000000000
--- a/docs/app/components/appbar/style.css
+++ /dev/null
@@ -1,62 +0,0 @@
-@import 'colors.css';
-@import 'variables.css';
-
-:root {
-  --appbar-height: calc(6.4 * var(--unit));
-  --appbar-logo-size: calc(3.6 * var(--unit));
-  --appbar-shadow: 0 1px rgba(255, 255, 255, 0.65);
-  --appbar-navigation-offset: calc(6.5 * var(--unit));
-}
-
-.appbar {
-  align-items: flex-start;
-  box-shadow: var(--appbar-shadow);
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  min-height: var(--appbar-height);
-  z-index: var(--z-index-higher);
-}
-
-.logo {
-  display: block;
-  fill: var(--color-primary-contrast);
-  height: var(--appbar-logo-size);
-  width: var(--appbar-logo-size);
-}
-
-.navigation {
-  flex-grow: 1;
-  text-align: right;
-
-  & > ul {
-    list-style: none;
-
-    & > li {
-      display: inline-block;
-
-      & > a {
-        color: var(--color-primary-contrast);
-        display: inline-block;
-        font-size: 1.4rem;
-        font-weight: 500;
-        letter-spacing: 0;
-        line-height: var(--appbar-height);
-        margin-right: var(--unit);
-        padding: 0 calc(1.5 * var(--unit));
-        position: relative;
-
-        &.active::after {
-          background-color: var(--color-accent);
-          bottom: 0;
-          content: '';
-          display: block;
-          height: calc(0.3 * var(--unit));
-          left: 0;
-          position: absolute;
-          width: 100%;
-        }
-      }
-    }
-  }
-}
diff --git a/docs/app/components/editor/one-dark.css b/docs/app/components/editor/one-dark.css
deleted file mode 100644
index b2c9802aa..000000000
--- a/docs/app/components/editor/one-dark.css
+++ /dev/null
@@ -1,114 +0,0 @@
-:global .cm-s-one-dark {
-  &.CodeMirror {
-    background: #282c34;
-    color: #abb2bf;
-  }
-
-  & div.CodeMirror-selected {
-    background: #3e4451;
-  }
-
-  & .CodeMirror-line::selection,
-  & .CodeMirror-line > span::selection,
-  & .CodeMirror-line > span > span::selection {
-    background: rgba(73, 72, 62, 0.99);
-  }
-
-  & .CodeMirror-line::-moz-selection,
-  & .CodeMirror-line > span::-moz-selection,
-  & .CodeMirror-line > span > span::-moz-selection {
-    background: rgba(73, 72, 62, 0.99);
-  }
-
-  & .CodeMirror-gutters {
-    background: #282c34;
-    border-right: 1px solid #282c34;
-  }
-
-  & .CodeMirror-guttermarker {
-    color: white;
-  }
-
-  & .CodeMirror-guttermarker-subtle {
-    color: #d0d0d0;
-  }
-
-  & .CodeMirror-linenumber {
-    color: #4b5363;
-  }
-
-  & .CodeMirror-cursor {
-    border-left: 1px solid #528bff;
-  }
-
-  & span.cm-comment {
-    color: #667689;
-  }
-
-  & span.cm-atom {
-    color: #64b6c3;
-  }
-
-  & span.cm-number {
-    color: #d19a66;
-  }
-
-  & span.cm-property,
-  & span.cm-attribute {
-    color: #abb2bf;
-  }
-
-  & span.cm-keyword {
-    color: #d86c74;
-  }
-
-  & span.cm-string {
-    color: #98c379;
-  }
-
-  & span.cm-variable {
-    color: #abb2bf;
-  }
-
-  & span.cm-variable-2 {
-    color: #c678dd;
-  }
-
-  & span.cm-variable-3 {
-    color: #64b6c3;
-  }
-
-  & span.cm-def {
-    color: #6caff2;
-  }
-
-  & span.cm-bracket {
-    color: #abb2bf;
-  }
-
-  & span.cm-tag {
-    color: #d86c74;
-  }
-
-  & span.cm-header {
-    color: #abb2bf;
-  }
-
-  & span.cm-link {
-    color: #98c379;
-  }
-
-  & span.cm-error {
-    background: #f92672;
-    color: red;
-  }
-
-  & .CodeMirror-activeline-background {
-    background: #2c323b;
-  }
-
-  & .CodeMirror-matchingbracket {
-    color: #abb2bf !important;
-    text-decoration: underline;
-  }
-}
diff --git a/docs/app/components/editor/style.css b/docs/app/components/editor/style.css
deleted file mode 100644
index eef4dfe1f..000000000
--- a/docs/app/components/editor/style.css
+++ /dev/null
@@ -1,33 +0,0 @@
-@import 'variables.css';
-
-:root {
-  --editor-height: 28 * var(--unit);
-  --editor-padding: var(--unit);
-}
-
-:global {
-  & div.CodeMirror {
-    flex-grow: 1;
-    height: var(--editor-height);
-  }
-
-  & .CodeMirror-lines {
-    padding: var(--editor-padding) 0;
-  }
-
-  & pre.CodeMirror-line {
-    padding: 0 var(--editor-padding);
-  }
-
-  & div.CodeMirror pre,
-  & div.CodeMirror-linenumber,
-  & code {
-    font-family: source-code-pro, Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
-    font-size: 13px;
-    line-height: 1.4;
-  }
-}
-
-.editor {
-  position: relative;
-}
diff --git a/docs/app/components/layout/home/style.css b/docs/app/components/layout/home/style.css
deleted file mode 100644
index 049f84590..000000000
--- a/docs/app/components/layout/home/style.css
+++ /dev/null
@@ -1,220 +0,0 @@
-@import 'colors.css';
-@import 'variables.css';
-
-:root {
-  --hero-gradient-dark: var(--color-primary-dark);
-  --hero-gradient-light: var(--color-primary-light);
-  --hero-text-color: var(--color-primary-contrast);
-  --hero-max-width: calc(62 * var(--unit));
-  --hero-text-secondary-opacity: 0.75;
-  --hero-item-spacing: calc(5 * var(--unit));
-  --hero-logo-size: calc(12 * var(--unit));
-  --hero-logo-opacity: 0.85;
-  --github-buttons-height: calc(4 * var(--unit));
-  --twitter-color: #55acee;
-  --content-offset: calc(4.8 * var(--unit));
-  --content-width: 740px;
-  --color-content: #fafafa;
-}
-
-.header {
-  background: linear-gradient(45deg, var(--hero-gradient-dark) 0%, var(--hero-gradient-light) 100%);
-  background-position: top right;
-  background-size: 120%;
-  color: var(--hero-text-color);
-  padding: 0 calc((100% - var(--hero-max-width)) / 2);
-  text-align: center;
-
-  & .logo {
-    fill: var(--hero-text-color);
-    height: var(--hero-logo-size);
-    margin-top: calc(var(--hero-item-spacing) + var(--github-buttons-height));
-    opacity: var(--hero-logo-opacity);
-    width: var(--hero-logo-size);
-  }
-
-  & .title {
-    font-size: calc(5.6 * var(--unit));
-    font-weight: 400;
-    letter-spacing: -0.02em;
-    line-height: 1.35;
-    margin-top: var(--hero-item-spacing);
-  }
-
-  & .subtitle {
-    font-size: calc(2.4 * var(--unit));
-    font-weight: 400;
-    line-height: 1.2;
-    margin-top: var(--unit);
-    opacity: var(--hero-text-secondary-opacity);
-  }
-
-  & .github {
-    left: calc(2 * var(--unit));
-    position: fixed;
-    text-align: center;
-    top: calc(2 * var(--unit));
-    z-index: var(--z-index-higher);
-
-    & iframe {
-      display: inline-block;
-      height: calc(2 * var(--unit));
-      vertical-align: top;
-      width: calc(10 * var(--unit));
-    }
-  }
-
-  & .navigation > ul {
-    list-style: none;
-    margin-top: var(--hero-item-spacing);
-
-    & li {
-      display: inline-block;
-      position: relative;
-
-      &:not(:last-child) > a::after {
-        content: '·';
-        display: inline-block;
-        font-size: 50px;
-        line-height: 60px;
-        margin: 0 10px;
-        vertical-align: middle;
-      }
-
-      & > a {
-        color: var(--hero-text-color);
-        display: inline-block;
-        font-size: calc(2 * var(--unit));
-        font-weight: 400;
-        letter-spacing: 0.02em;
-        line-height: 60px;
-        opacity: var(--hero-text-secondary-opacity);
-        position: relative;
-        vertical-align: middle;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-
-.twitterButton {
-  &.neutral.flat:not([disabled]) {
-    color: var(--twitter-color);
-  }
-}
-
-.content {
-  align-items: center;
-  background-color: var(--color-content);
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  padding: var(--content-offset);
-
-  &:nth-child(3) {
-    background-color: color-mod(var(--color-content) blackness(5%));
-  }
-
-  & > .authors {
-    align-items: flex-start;
-    display: flex;
-    justify-content: center;
-
-    & > * {
-      flex: 1 auto;
-      margin: 0 var(--unit);
-      max-width: calc(32 * var(--unit));
-    }
-  }
-
-  & > p {
-    font-size: calc(1.8 * var(--unit));
-    line-height: 1.5;
-    margin-bottom: var(--content-offset);
-    max-width: var(--content-width);
-    opacity: 0.6;
-    text-align: justify;
-  }
-
-  & > h2 {
-    color: var(--hero-gradient-dark);
-    font-size: calc(2 * var(--unit));
-    margin-bottom: var(--content-offset);
-  }
-
-  & > h3 {
-    color: var(--color-primary-dark);
-    font-size: calc(2.4 * var(--unit));
-    margin-bottom: calc(var(--content-offset) / 2);
-  }
-}
-
-.footer {
-  background-color: var(--color-text);
-  color: var(--color-content);
-  padding: calc(2 * var(--unit)) 0;
-  text-align: center;
-
-  & .love {
-    color: var(--color-accent);
-    font-size: var(--font-size-normal);
-  }
-
-  & small {
-    color: rgba(255, 255, 255, 0.5);
-  }
-}
-
-.donate {
-  border-radius: 3px;
-  color: #fff;
-  display: inline-block;
-  font-size: calc(1.1 * var(--unit));
-  overflow: hidden;
-  vertical-align: top;
-
-  & .legend {
-    background-color: #555;
-    display: inline-block;
-    line-height: calc(2 * var(--unit));
-    padding: 0 calc(0.5 * var(--unit));
-  }
-
-  & .paypal {
-    background-color: #007ec6;
-    display: inline-block;
-    line-height: calc(2 * var(--unit));
-    padding: 0 calc(0.5 * var(--unit));
-  }
-}
-
-@media all and (max-width: 768px) {
-  & .header {
-    & .github {
-      position: absolute;
-    }
-  }
-
-  & .content {
-    padding: calc(var(--content-offset) / 2);
-
-    & > .authors {
-      flex-direction: column;
-
-      & > * {
-        margin: var(--unit) 0;
-      }
-    }
-
-    & > p {
-      max-width: 100%;
-    }
-  }
-
-  & .second-content {
-    background-color: transparent;
-  }
-}
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index d4302ea9b..648498249 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -97,7 +97,7 @@ If the component has no styles injected, you should provide a theme object imple
 
 ## Theming
 
-You can afford theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written in SASS and configured using the **config** files we saw earlier. Also you may want to check [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.css) files to get an overview of the **variables** you have to override to get the results you want.
+You can afford theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written in SASS and configured using the **config** files we saw earlier. Also you may want to check [colors](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.module.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.module.css) files to get an overview of the **variables** you have to override to get the results you want.
 
 In most scenarios you can get more customized themes by overriding those variables and compiling stylesheets with them. For example, you can create a `_theme.scss` SASS file:
 
diff --git a/docs/app/components/layout/install/style.css b/docs/app/components/layout/install/style.css
deleted file mode 100644
index eb7e6cc68..000000000
--- a/docs/app/components/layout/install/style.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@import 'variables.css';
-@import 'app_bar/config.css';
-
-.install {
-  margin-top: var(--appbar-height);
-}
diff --git a/docs/app/components/layout/main/components/navigation.css b/docs/app/components/layout/main/components/navigation.css
deleted file mode 100644
index 0d203027d..000000000
--- a/docs/app/components/layout/main/components/navigation.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@import 'colors.css';
-@import 'variables.css';
-@import '../config.css';
-
-.root {
-  background-color: var(--color-background);
-  display: flex;
-  flex-direction: column;
-  width: var(--navigation-width);
-}
-
-.list {
-  flex-grow: 1;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    height: 0;
-    width: 0;
-  }
-}
-
-.item {
-  & > span {
-    padding: var(--navigation-v-padding) var(--navigation-h-padding);
-  }
-
-  & [data-react-toolbox='list-item-text'] {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-semi-bold);
-  }
-}
-
-.active {
-  background: $color-divider;
-}
-
-.footer {
-  border-top: var(--navigation-footer-border);
-  color: var(--color-text-secondary);
-  flex-grow: 0;
-  font-size: var(--font-size-small);
-  overflow: hidden;
-  padding: var(--navigation-h-padding);
-
-  & > * {
-    display: block;
-  }
-}
diff --git a/docs/app/components/layout/main/components/playground.css b/docs/app/components/layout/main/components/playground.css
deleted file mode 100644
index d059090c7..000000000
--- a/docs/app/components/layout/main/components/playground.css
+++ /dev/null
@@ -1,37 +0,0 @@
-@import 'colors.css';
-@import 'variables.css';
-@import '../config.css';
-
-.editor,
-.preview {
-  overflow-y: auto;
-  position: absolute;
-  right: 0;
-
-  &::-webkit-scrollbar {
-    height: 0;
-    width: 0;
-  }
-}
-
-.editor {
-  bottom: 50%;
-  left: 0;
-  top: 0;
-
-  & div:global(.CodeMirror) {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    height: 100%;
-    max-height: 100%;
-    min-height: 100%;
-  }
-}
-
-.preview {
-  bottom: 0;
-  display: flex;
-  left: 0;
-  top: 50%;
-}
diff --git a/docs/app/components/layout/main/config.css b/docs/app/components/layout/main/config.css
deleted file mode 100644
index d83f66e2a..000000000
--- a/docs/app/components/layout/main/config.css
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-  --media-min-width: 1440px;
-  --playground-max-width: calc(var(--media-min-width) / 2);
-  --playground-width: 50%;
-  --navigation-width: calc(22 * var(--unit));
-  --navigation-h-padding: calc(2.4 * var(--unit));
-  --navigation-v-padding: calc(1.2 * var(--unit));
-  --navigation-footer-border: solid 1px rgb(224, 224, 224);
-  --documentation-left-shadow:
-    0 4px 5px 0 color-mod(var(--color-black) a(14%)),
-    0 1px 10px 0 color-mod(var(--color-black) a(12%)),
-    0 2px 4px -1px color-mod(var(--color-black) a(20%));
-  --documentation-right-shadow: -2px 0 4px color-mod(var(--color-black) a(14%));
-}
diff --git a/docs/app/components/layout/main/style.css b/docs/app/components/layout/main/style.css
deleted file mode 100644
index ee68f6818..000000000
--- a/docs/app/components/layout/main/style.css
+++ /dev/null
@@ -1,109 +0,0 @@
-@import 'colors.css';
-@import 'variables.css';
-@import 'app_bar/config.css';
-@import 'button/config.css';
-@import 'button/theme.css';
-@import './config.css';
-
-hr {
-  border-top: 1px solid var(--color-divider);
-  margin: 4rem 0;
-}
-
-.appbar {
-  padding-right: calc(8 * var(--unit));
-}
-
-.playground-button {
-  position: fixed;
-  right: calc(var(--button-floating-height) / 2);
-  top: calc(var(--appbar-height) - (var(--button-floating-height) / 2));
-  z-index: var(--z-index-highest);
-}
-
-.documentation {
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: var(--appbar-height);
-  transition: padding var(--animation-duration) var(--animation-curve-default);
-  z-index: var(--z-index-normal);
-}
-
-.navigation {
-  bottom: 0;
-  box-shadow: var(--documentation-left-shadow);
-  left: 0;
-  position: fixed;
-  top: var(--appbar-height);
-  transition: transform var(--animation-duration) var(--animation-curve-default);
-  z-index: var(--z-index-high);
-}
-
-.playground {
-  background: var(--color-background);
-  bottom: 0;
-  box-shadow: var(--documentation-right-shadow);
-  position: fixed;
-  right: 0;
-  top: var(--appbar-height);
-  transition: transform var(--animation-duration) var(--animation-curve-default);
-  width: var(--playground-width);
-  z-index: var(--z-index-high);
-}
-
-.root {
-  &:not(.with-playground) {
-    & > .playground {
-      transform: translateX(100%);
-    }
-
-    & > .documentation {
-      padding-left: var(--navigation-width);
-      padding-right: 0;
-    }
-
-    & > .navigation {
-      transform: translateX(0);
-    }
-  }
-
-  &.with-playground {
-    & > .playground {
-      transform: translateY(0);
-    }
-
-    & > .documentation {
-      padding-left: 0;
-      padding-right: var(--playground-width);
-    }
-
-    & > .navigation {
-      transform: translateX(calc(-1 * 100%));
-    }
-  }
-}
-
-.load-button {
-  display: inline-block;
-}
-
-@media and (min-width: 1440px) {
-  .root {
-    & .playground {
-      width: var(--playground-max-width);
-    }
-
-    &.with-playground {
-      & > .documentation {
-        padding-left: var(--navigation-width);
-        padding-right: var(--playground-max-width);
-      }
-
-      & > .navigation {
-        transform: translateX(0);
-      }
-    }
-  }
-}
diff --git a/docs/app/components/logo/style.css b/docs/app/components/logo/style.css
deleted file mode 100644
index df54b8d47..000000000
--- a/docs/app/components/logo/style.css
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'variables.css';
-
-.logo {
-  display: inline-block;
-  fill: #fff;
-  height: calc(20 * var(--unit));
-  width: calc(20 * var(--unit));
-}
diff --git a/docs/app/components/markdown/style.css b/docs/app/components/markdown/style.css
deleted file mode 100644
index aa5aa8598..000000000
--- a/docs/app/components/markdown/style.css
+++ /dev/null
@@ -1,118 +0,0 @@
-@import 'colors.css';
-@import 'variables.css';
-
-:root {
-  --documentation-h1-size: calc(3.4 * var(--unit));
-  --documentation-h2-size: calc(2.4 * var(--unit));
-  --documentation-h-offset: calc(4 * var(--unit));
-  --documentation-v-offset: calc(var(--documentation-h-offset) / 2);
-  --documentation-code-background: rgba(0, 0, 0, 0.05);
-  --documentation-playground-button-height: calc(3 * var(--unit));
-  --documentation-playground-button-font-size: calc(1.2 * var(--unit));
-  --documentation-table-font-size: calc(1.4 * var(--unit));
-}
-
-.markdown {
-  color: var(--color-text);
-  display: block;
-  flex-grow: 1;
-  font-size: var(--font-size-normal);
-  max-height: 100%;
-  overflow-y: auto;
-  padding-bottom: calc(4 * var(--unit));
-
-  & > *:not(pre) {
-    margin: var(--documentation-v-offset) var(--documentation-h-offset);
-  }
-
-  & h1 {
-    font-size: var(--documentation-h1-size);
-  }
-
-  & h2 {
-    font-size: var(--documentation-h2-size);
-  }
-
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    font-size: inherit;
-    font-weight: var(--font-weight-bold);
-  }
-
-  & h1,
-  & h2 {
-    color: var(--color-primary-dark);
-    padding-top: var(--documentation-v-offset);
-  }
-
-  & p {
-    font-size: inherit;
-    line-height: 1.5;
-
-    & a {
-      color: var(--color-text);
-      text-decoration: underline;
-    }
-  }
-
-  & code {
-    background-color: var(--documentation-code-background);
-    border-radius: 2px;
-    font-family: source-code-pro, Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
-    font-size: 13px;
-    line-height: 1.4;
-    padding: calc(0.3 * var(--unit)) calc(0.5 * var(--unit));
-  }
-
-  & pre {
-    background-color: var(--documentation-code-background);
-    font-family: source-code-pro, Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
-    font-size: 13px;
-    line-height: 1.4;
-    padding: var(--documentation-v-offset) var(--documentation-h-offset);
-  }
-
-  & > :global(.playground-button) {
-    display: block;
-    text-align: left;
-
-    & > button {
-      font-size: var(--documentation-playground-button-font-size);
-      height: var(--documentation-playground-button-height);
-      line-height: var(--documentation-playground-button-height);
-
-      & > span {
-        line-height: var(--documentation-playground-button-height);
-      }
-    }
-  }
-
-  & ul {
-    -webkit-font-smoothing: antialiased;
-    font-smoothing: antialiased;
-    margin-left: 7 * var(--unit);
-
-    & > li {
-      margin-bottom: var(--unit);
-    }
-  }
-
-  & table {
-    font-size: var(--documentation-table-font-size);
-    width: auto;
-
-    & thead th {
-      -webkit-font-smoothing: antialiased;
-      font-smoothing: antialiased;
-    }
-
-    & th,
-    & td {
-      -webkit-font-smoothing: antialiased;
-      font-smoothing: antialiased;
-      padding: var(--unit);
-    }
-  }
-}
diff --git a/docs/app/components/preview/style.css b/docs/app/components/preview/style.css
deleted file mode 100644
index 797226880..000000000
--- a/docs/app/components/preview/style.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@import 'variables';
-
-:root {
-  --preview-error-background: #f2777a;
-  --preview-error-color: #fff;
-}
-
-.preview {
-  display: flex;
-  flex-direction: column;
-}
-
-.content {
-  flex-grow: 1;
-  margin: calc(2 * var(--unit));
-}
-
-.error {
-  background: var(--preview-error-background);
-  border-bottom: 1px solid color-mod(var(--preview-error-background) blackness(60%));
-  color: var(--preview-error-color);
-  font-family: source-code-pro, Menlo, Consolas, Monaco, 'Andale Mono', 'Courier New', monospace;
-  font-size: 13px;
-  letter-spacing: calc(-0.05 * var(--unit));
-  line-height: 1.4;
-  padding: calc(0.5 * var(--unit));
-}
diff --git a/docs/app/index.js b/docs/app/index.js
index 03351adec..0e248c883 100644
--- a/docs/app/index.js
+++ b/docs/app/index.js
@@ -1,6 +1,6 @@
-import '../../components/variables.css';
-import '../../components/colors.css';
-import '../../components/media.css';
+import '../../components/variables.module.css';
+import '../../components/colors.module.css';
+import '../../components/media.module.css';
 import './commons.css';
 import 'normalize.css';
 
diff --git a/package-lock.json b/package-lock.json
index eb2536634..4499a3606 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1249,174 +1249,174 @@
       }
     },
     "@webassemblyjs/ast": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.8.tgz",
-      "integrity": "sha512-dOrtdtEyB8sInpl75yLPNksY4sRl0j/+t6aHyB/YA+ab9hV3Fo7FmG12FHzP+2MvWVAJtDb+6eXR5EZbZJ+uVg==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.10.tgz",
+      "integrity": "sha512-wTUeaByYN2EA6qVqhbgavtGc7fLTOx0glG2IBsFlrFG51uXIGlYBTyIZMf4SPLo3v1bgV/7lBN3l7Z0R6Hswew==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/helper-module-context": "1.7.8",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
-        "@webassemblyjs/wast-parser": "1.7.8"
+        "@webassemblyjs/helper-module-context": "1.7.10",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.10",
+        "@webassemblyjs/wast-parser": "1.7.10"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.8.tgz",
-      "integrity": "sha512-kn2zNKGsbql5i56VAgRYkpG+VazqHhQQZQycT2uXAazrAEDs23gy+Odkh5VblybjnwX2/BITkDtNmSO76hdIvQ==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.10.tgz",
+      "integrity": "sha512-gMsGbI6I3p/P1xL2UxqhNh1ga2HCsx5VBB2i5VvJFAaqAjd2PBTRULc3BpTydabUQEGlaZCzEUQhLoLG7TvEYQ==",
       "dev": true
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.8.tgz",
-      "integrity": "sha512-xUwxDXsd1dUKArJEP5wWM5zxgCSwZApSOJyP1XO7M8rNUChUDblcLQ4FpzTpWG2YeylMwMl1MlP5Ztryiz1x4g==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.10.tgz",
+      "integrity": "sha512-DoYRlPWtuw3yd5BOr9XhtrmB6X1enYF0/54yNvQWGXZEPDF5PJVNI7zQ7gkcKfTESzp8bIBWailaFXEK/jjCsw==",
       "dev": true
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.8.tgz",
-      "integrity": "sha512-WXiIMnuvuwlhWvVOm8xEXU9DnHaa3AgAU0ZPfvY8vO1cSsmYb2WbGbHnMLgs43vXnA7XAob9b56zuZaMkxpCBg==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.10.tgz",
+      "integrity": "sha512-+RMU3dt/dPh4EpVX4u5jxsOlw22tp3zjqE0m3ftU2tsYxnPULb4cyHlgaNd2KoWuwasCQqn8Mhr+TTdbtj3LlA==",
       "dev": true
     },
     "@webassemblyjs/helper-code-frame": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.8.tgz",
-      "integrity": "sha512-TLQxyD9qGOIdX5LPQOPo0Ernd88U5rHkFb8WAjeMIeA0sPjCHeVPaGqUGGIXjUcblUkjuDAc07bruCcNHUrHDA==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.10.tgz",
+      "integrity": "sha512-UiytbpKAULOEab2hUZK2ywXen4gWJVrgxtwY3Kn+eZaaSWaRM8z/7dAXRSoamhKFiBh1uaqxzE/XD9BLlug3gw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/wast-printer": "1.7.8"
+        "@webassemblyjs/wast-printer": "1.7.10"
       }
     },
     "@webassemblyjs/helper-fsm": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.8.tgz",
-      "integrity": "sha512-TjK0CnD8hAPkV5mbSp5aWl6SO1+H3WFcjWtixWoy8EMA99YnNzYhpc/WSYWhf7yrhpzkq5tZB0tvLK3Svr3IXA==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.10.tgz",
+      "integrity": "sha512-w2vDtUK9xeSRtt5+RnnlRCI7wHEvLjF0XdnxJpgx+LJOvklTZPqWkuy/NhwHSLP19sm9H8dWxKeReMR7sCkGZA==",
       "dev": true
     },
     "@webassemblyjs/helper-module-context": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.8.tgz",
-      "integrity": "sha512-uCutAKR7Nm0VsFixcvnB4HhAyHouNbj0Dx1p7eRjFjXGGZ+N7ftTaG1ZbWCasAEbtwGj54LP8+lkBZdTCPmLGg==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.10.tgz",
+      "integrity": "sha512-yE5x/LzZ3XdPdREmJijxzfrf+BDRewvO0zl8kvORgSWmxpRrkqY39KZSq6TSgIWBxkK4SrzlS3BsMCv2s1FpsQ==",
       "dev": true
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.8.tgz",
-      "integrity": "sha512-AdCCE3BMW6V34WYaKUmPgVHa88t2Z14P4/0LjLwuGkI0X6pf7nzp0CehzVVk51cKm2ymVXjl9dCG+gR1yhITIQ==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.10.tgz",
+      "integrity": "sha512-u5qy4SJ/OrxKxZqJ9N3qH4ZQgHaAzsopsYwLvoWJY6Q33r8PhT3VPyNMaJ7ZFoqzBnZlCcS/0f4Sp8WBxylXfg==",
       "dev": true
     },
     "@webassemblyjs/helper-wasm-section": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.8.tgz",
-      "integrity": "sha512-BkBhYQuzyl4hgTGOKo87Vdw6f9nj8HhI7WYpI0MCC5qFa5ahrAPOGgyETVdnRbv+Rjukl9MxxfDmVcVC435lDg==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.10.tgz",
+      "integrity": "sha512-Ecvww6sCkcjatcyctUrn22neSJHLN/TTzolMGG/N7S9rpbsTZ8c6Bl98GpSpV77EvzNijiNRHBG0+JO99qKz6g==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.8",
-        "@webassemblyjs/helper-buffer": "1.7.8",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
-        "@webassemblyjs/wasm-gen": "1.7.8"
+        "@webassemblyjs/ast": "1.7.10",
+        "@webassemblyjs/helper-buffer": "1.7.10",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.10",
+        "@webassemblyjs/wasm-gen": "1.7.10"
       }
     },
     "@webassemblyjs/ieee754": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.7.8.tgz",
-      "integrity": "sha512-tOarWChdG1a3y1yqCX0JMDKzrat5tQe4pV6K/TX19BcXsBLYxFQOL1DEDa5KG9syeyvCrvZ+i1+Mv1ExngvktQ==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.7.10.tgz",
+      "integrity": "sha512-HRcWcY+YWt4+s/CvQn+vnSPfRaD4KkuzQFt5MNaELXXHSjelHlSEA8ZcqT69q0GTIuLWZ6JaoKar4yWHVpZHsQ==",
       "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.7.8.tgz",
-      "integrity": "sha512-GCYeGPgUFWJiZuP4NICbcyUQNxNLJIf476Ei+K+jVuuebtLpfvwkvYT6iTUE7oZYehhkor4Zz2g7SJ/iZaPudQ==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.7.10.tgz",
+      "integrity": "sha512-og8MciYlA8hvzCLR71hCuZKPbVBfLQeHv7ImKZ4nlyxrYbG7uJHYtHiHu6OV9SqrGuD03H/HtXC4Bgdjfm9FHw==",
       "dev": true,
       "requires": {
         "@xtuc/long": "4.2.1"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.7.8.tgz",
-      "integrity": "sha512-9X+f0VV+xNXW2ujfIRSXBJENGE6Qh7bNVKqu3yDjTFB3ar3nsThsGBBKdTG58aXOm2iUH6v28VIf88ymPXODHA==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.7.10.tgz",
+      "integrity": "sha512-Ng6Pxv6siyZp635xCSnH3mKmIFgqWPCcGdoo0GBYgyGdxu7cUj4agV7Uu1a8REP66UYUFXJLudeGgd4RvuJAnQ==",
       "dev": true
     },
     "@webassemblyjs/wasm-edit": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.8.tgz",
-      "integrity": "sha512-6D3Hm2gFixrfyx9XjSON4ml1FZTugqpkIz5Awvrou8fnpyprVzcm4X8pyGRtA2Piixjl3DqmX/HB1xdWyE097A==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.10.tgz",
+      "integrity": "sha512-e9RZFQlb+ZuYcKRcW9yl+mqX/Ycj9+3/+ppDI8nEE/NCY6FoK8f3dKBcfubYV/HZn44b+ND4hjh+4BYBt+sDnA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.8",
-        "@webassemblyjs/helper-buffer": "1.7.8",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
-        "@webassemblyjs/helper-wasm-section": "1.7.8",
-        "@webassemblyjs/wasm-gen": "1.7.8",
-        "@webassemblyjs/wasm-opt": "1.7.8",
-        "@webassemblyjs/wasm-parser": "1.7.8",
-        "@webassemblyjs/wast-printer": "1.7.8"
+        "@webassemblyjs/ast": "1.7.10",
+        "@webassemblyjs/helper-buffer": "1.7.10",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.10",
+        "@webassemblyjs/helper-wasm-section": "1.7.10",
+        "@webassemblyjs/wasm-gen": "1.7.10",
+        "@webassemblyjs/wasm-opt": "1.7.10",
+        "@webassemblyjs/wasm-parser": "1.7.10",
+        "@webassemblyjs/wast-printer": "1.7.10"
       }
     },
     "@webassemblyjs/wasm-gen": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.8.tgz",
-      "integrity": "sha512-a7O/wE6eBeVKKUYgpMK7NOHmMADD85rSXLe3CqrWRDwWff5y3cSVbzpN6Qv3z6C4hdkpq9qyij1Ga1kemOZGvQ==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.10.tgz",
+      "integrity": "sha512-M0lb6cO2Y0PzDye/L39PqwV+jvO+2YxEG5ax+7dgq7EwXdAlpOMx1jxyXJTScQoeTpzOPIb+fLgX/IkLF8h2yw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.8",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
-        "@webassemblyjs/ieee754": "1.7.8",
-        "@webassemblyjs/leb128": "1.7.8",
-        "@webassemblyjs/utf8": "1.7.8"
+        "@webassemblyjs/ast": "1.7.10",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.10",
+        "@webassemblyjs/ieee754": "1.7.10",
+        "@webassemblyjs/leb128": "1.7.10",
+        "@webassemblyjs/utf8": "1.7.10"
       }
     },
     "@webassemblyjs/wasm-opt": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.8.tgz",
-      "integrity": "sha512-3lbQ0PT81NHCdi1sR/7+SNpZadM4qYcTSr62nFFAA7e5lFwJr14M1Gi+A/Y3PgcDWOHYjsaNGPpPU0H03N6Blg==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.10.tgz",
+      "integrity": "sha512-R66IHGCdicgF5ZliN10yn5HaC7vwYAqrSVJGjtJJQp5+QNPBye6heWdVH/at40uh0uoaDN/UVUfXK0gvuUqtVg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.8",
-        "@webassemblyjs/helper-buffer": "1.7.8",
-        "@webassemblyjs/wasm-gen": "1.7.8",
-        "@webassemblyjs/wasm-parser": "1.7.8"
+        "@webassemblyjs/ast": "1.7.10",
+        "@webassemblyjs/helper-buffer": "1.7.10",
+        "@webassemblyjs/wasm-gen": "1.7.10",
+        "@webassemblyjs/wasm-parser": "1.7.10"
       }
     },
     "@webassemblyjs/wasm-parser": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.8.tgz",
-      "integrity": "sha512-rZ/zlhp9DHR/05zh1MbAjT2t624sjrPP/OkJCjXqzm7ynH+nIdNcn9Ixc+qzPMFXhIrk0rBoQ3to6sEIvHh9jQ==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.10.tgz",
+      "integrity": "sha512-AEv8mkXVK63n/iDR3T693EzoGPnNAwKwT3iHmKJNBrrALAhhEjuPzo/lTE4U7LquEwyvg5nneSNdTdgrBaGJcA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.8",
-        "@webassemblyjs/helper-api-error": "1.7.8",
-        "@webassemblyjs/helper-wasm-bytecode": "1.7.8",
-        "@webassemblyjs/ieee754": "1.7.8",
-        "@webassemblyjs/leb128": "1.7.8",
-        "@webassemblyjs/utf8": "1.7.8"
+        "@webassemblyjs/ast": "1.7.10",
+        "@webassemblyjs/helper-api-error": "1.7.10",
+        "@webassemblyjs/helper-wasm-bytecode": "1.7.10",
+        "@webassemblyjs/ieee754": "1.7.10",
+        "@webassemblyjs/leb128": "1.7.10",
+        "@webassemblyjs/utf8": "1.7.10"
       }
     },
     "@webassemblyjs/wast-parser": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.7.8.tgz",
-      "integrity": "sha512-Q/zrvtUvzWuSiJMcSp90fi6gp2nraiHXjTV2VgAluVdVapM4gy1MQn7akja2p6eSBDQpKJPJ6P4TxRkghRS5dg==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.7.10.tgz",
+      "integrity": "sha512-YTPEtOBljkCL0VjDp4sHe22dAYSm3ZwdJ9+2NTGdtC7ayNvuip1wAhaAS8Zt9Q6SW9E5Jf5PX7YE3XWlrzR9cw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.8",
-        "@webassemblyjs/floating-point-hex-parser": "1.7.8",
-        "@webassemblyjs/helper-api-error": "1.7.8",
-        "@webassemblyjs/helper-code-frame": "1.7.8",
-        "@webassemblyjs/helper-fsm": "1.7.8",
+        "@webassemblyjs/ast": "1.7.10",
+        "@webassemblyjs/floating-point-hex-parser": "1.7.10",
+        "@webassemblyjs/helper-api-error": "1.7.10",
+        "@webassemblyjs/helper-code-frame": "1.7.10",
+        "@webassemblyjs/helper-fsm": "1.7.10",
         "@xtuc/long": "4.2.1"
       }
     },
     "@webassemblyjs/wast-printer": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.7.8.tgz",
-      "integrity": "sha512-GllIthRtwTxRDAURRNXscu7Napzmdf1jt1gpiZiK/QN4fH0lSGs3OTmvdfsMNP7tqI4B3ZtfaaWRlNIQug6Xyg==",
+      "version": "1.7.10",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.7.10.tgz",
+      "integrity": "sha512-mJ3QKWtCchL1vhU/kZlJnLPuQZnlDOdZsyP0bbLWPGdYsQDnSBvyTLhzwBA3QAMlzEL9V4JHygEmK6/OTEyytA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.8",
-        "@webassemblyjs/wast-parser": "1.7.8",
+        "@webassemblyjs/ast": "1.7.10",
+        "@webassemblyjs/wast-parser": "1.7.10",
         "@xtuc/long": "4.2.1"
       }
     },
@@ -1449,9 +1449,9 @@
       }
     },
     "acorn": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-      "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.2.tgz",
+      "integrity": "sha512-GXmKIvbrN3TV7aVqAzVFaMW8F8wzVX7voEBRO3bDA64+EX37YSayggRJP5Xig6HYHBkWKpFg9W5gg6orklubhg==",
       "dev": true
     },
     "acorn-dynamic-import": {
@@ -1461,6 +1461,14 @@
       "dev": true,
       "requires": {
         "acorn": "^5.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "5.7.3",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
+          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+          "dev": true
+        }
       }
     },
     "acorn-globals": {
@@ -1471,24 +1479,13 @@
       "requires": {
         "acorn": "^6.0.1",
         "acorn-walk": "^6.0.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.2.tgz",
-          "integrity": "sha512-GXmKIvbrN3TV7aVqAzVFaMW8F8wzVX7voEBRO3bDA64+EX37YSayggRJP5Xig6HYHBkWKpFg9W5gg6orklubhg==",
-          "dev": true
-        }
       }
     },
     "acorn-jsx": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-4.1.1.tgz",
-      "integrity": "sha512-JY+iV6r+cO21KtntVvFkD+iqjtdpRUpGqKWgfkCdZq1R+kbreEl8EcdcJR4SmiIgsIQT33s6QzheQ9a275Q8xw==",
-      "dev": true,
-      "requires": {
-        "acorn": "^5.0.3"
-      }
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.0.tgz",
+      "integrity": "sha512-XkB50fn0MURDyww9+UYL3c1yLbOBz0ZFvrdYlGB8l+Ije1oSC75qAqrzSPjYQbdnQUzhlUGNKuesryAv0gxZOg==",
+      "dev": true
     },
     "acorn-walk": {
       "version": "6.1.0",
@@ -1961,12 +1958,12 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.3.0.tgz",
-      "integrity": "sha512-rpp+REfk0Ii3lCoiXhU4+CGYn8FbYckmvj6JJbJGSdzaxYCGJ7EvpHncDqgfAn/P6XhWig4u9BBNnsFAfAd5wg==",
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.3.1.tgz",
+      "integrity": "sha512-DY9gOh8z3tnCbJ13JIWaeQsoYncTGdsrgCceBaQSIL4nvdrLxgbRSBPevg2XbX7u4QCSfLheSJEEIUUSlkbx6Q==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.3.2",
+        "browserslist": "^4.3.3",
         "caniuse-lite": "^1.0.30000898",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
@@ -2607,14 +2604,14 @@
       }
     },
     "browserslist": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.3.2.tgz",
-      "integrity": "sha512-wgZJWlYcDvsjRtf8socmAHf1nXq88KrQLB/gMYHGPUc2bzPWsgltSXwPWYHx4Sw0G9E/XGNW5wJDaWlpHRMpjA==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.3.3.tgz",
+      "integrity": "sha512-6h84UD1mmHeuQ9IucX6yzBc+KBYcBBTLYt2CXtY7GYCra6iE5kOm7oM+zuGw/0tjGtbJxjm58OvxSBmogEMCRQ==",
       "dev": true,
       "requires": {
         "caniuse-lite": "^1.0.30000898",
-        "electron-to-chromium": "^1.3.80",
-        "node-releases": "^1.0.0-alpha.14"
+        "electron-to-chromium": "^1.3.81",
+        "node-releases": "^1.0.0-alpha.15"
       }
     },
     "bser": {
@@ -4139,9 +4136,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.81",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.81.tgz",
-      "integrity": "sha512-+rym2xtzwPWmoi8AYRrCdW65QOT0vfUHjZb5mjgh0VLyj31pGM3CpP3znKhQNBzQaWujR/KEl/mfC2lnKYgADA==",
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.82.tgz",
+      "integrity": "sha512-NI4nB2IWGcU4JVT1AE8kBb/dFor4zjLHMLsOROPahppeHrR0FG5uslxMmkp/thO1MvPjM2xhlKoY29/I60s0ew==",
       "dev": true
     },
     "elegant-spinner": {
@@ -4675,9 +4672,9 @@
       }
     },
     "eslint-plugin-jest": {
-      "version": "21.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-21.26.0.tgz",
-      "integrity": "sha512-zYePgbZaJsTfiJMb6XcsrrqgDpUB40AmGjjlwMZPEgVstrAsDNW8z7qQggD1lC24yR9h9VxTTb8qu6HRq3n6eg==",
+      "version": "21.26.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-21.26.1.tgz",
+      "integrity": "sha512-utdtKV04jP8ZXnqbsrArI/7m0Bg819JYnP/f6zP3gwnU7hHGdUzlYPNW73wShVFIDmllgHnkpo49kOPNhbQwrg==",
       "dev": true
     },
     "eslint-plugin-jsx-a11y": {
@@ -4744,13 +4741,14 @@
       "dev": true
     },
     "espree": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-4.0.0.tgz",
-      "integrity": "sha512-kapdTCt1bjmspxStVKX6huolXVV5ZfyZguY1lcfhVVZstce3bqxH9mcLzNn3/mlgW6wQ732+0fuG9v7h0ZQoKg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz",
+      "integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==",
       "dev": true,
       "requires": {
-        "acorn": "^5.6.0",
-        "acorn-jsx": "^4.1.1"
+        "acorn": "^6.0.2",
+        "acorn-jsx": "^5.0.0",
+        "eslint-visitor-keys": "^1.0.0"
       }
     },
     "esprima": {
@@ -8793,6 +8791,12 @@
         "xml-name-validator": "^3.0.0"
       },
       "dependencies": {
+        "acorn": {
+          "version": "5.7.3",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
+          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+          "dev": true
+        },
         "parse5": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
@@ -9994,9 +9998,9 @@
       }
     },
     "node-releases": {
-      "version": "1.0.0-alpha.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.0-alpha.14.tgz",
-      "integrity": "sha512-G8nnF9cP9QPP/jUmYWw/uUUhumHmkm+X/EarCugYFjYm2uXRMFeOD6CVT3RLdoyCvDUNy51nirGfUItKWs/S1g==",
+      "version": "1.0.0-alpha.15",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.0-alpha.15.tgz",
+      "integrity": "sha512-hKG6hd/g6a9OV/ARt2qrxbRhe/4WEMFohTLOB9PNyTYvvI59gICZFzt9/mMgpYUTts06qXlN8H6UjfbIRdnW8A==",
       "dev": true,
       "requires": {
         "semver": "^5.3.0"
@@ -15441,15 +15445,15 @@
       "dev": true
     },
     "webpack": {
-      "version": "4.22.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.22.0.tgz",
-      "integrity": "sha512-2+3EYFqyhPl12buLQ42QPHEEh8BHn3P9ipRvGRHhdfKJ1u9svhZ3QjhIoEdL5SeIhL5gfOZVbBnartYEabkEsg==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.23.0.tgz",
+      "integrity": "sha512-Osh/3U9y4swhEKDjy8fF48v2Qx5VC6VvdQ8bEm1HMaVVddiQBw4+mIyDrzVcVRCPT/+4uJFOcklPuoB+I3Zw0w==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.7.8",
-        "@webassemblyjs/helper-module-context": "1.7.8",
-        "@webassemblyjs/wasm-edit": "1.7.8",
-        "@webassemblyjs/wasm-parser": "1.7.8",
+        "@webassemblyjs/ast": "1.7.10",
+        "@webassemblyjs/helper-module-context": "1.7.10",
+        "@webassemblyjs/wasm-edit": "1.7.10",
+        "@webassemblyjs/wasm-parser": "1.7.10",
         "acorn": "^5.6.2",
         "acorn-dynamic-import": "^3.0.0",
         "ajv": "^6.1.0",
@@ -15472,6 +15476,12 @@
         "webpack-sources": "^1.3.0"
       },
       "dependencies": {
+        "acorn": {
+          "version": "5.7.3",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
+          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+          "dev": true
+        },
         "enhanced-resolve": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
diff --git a/package.json b/package.json
index 3e9415360..78178a636 100644
--- a/package.json
+++ b/package.json
@@ -149,4 +149,4 @@
     "webpack-dev-middleware": "^3.4.0",
     "webpack-hot-middleware": "^2.24.0"
   }
-}
\ No newline at end of file
+}
diff --git a/spec/components/card.js b/spec/components/card.js
index 1f53e8d4e..355d9e7ac 100644
--- a/spec/components/card.js
+++ b/spec/components/card.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import Button, { IconButton } from '../../components/button';
 import Card, { CardActions, CardMedia, CardText, CardTitle } from '../../components/card';
-import style from '../style';
+import style from '../style.module.css';
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
diff --git a/spec/components/chip.js b/spec/components/chip.js
index a6f8fcbbf..6f7d25856 100644
--- a/spec/components/chip.js
+++ b/spec/components/chip.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Avatar from '../../components/avatar';
 import Chip from '../../components/chip';
-import style from '../style';
+import style from '../style.module.css';
 import { cold } from 'react-hot-loader';
 
 const ColdAvatar = cold(Avatar)
diff --git a/spec/components/drawer.js b/spec/components/drawer.js
index f71f3380c..1279e162f 100644
--- a/spec/components/drawer.js
+++ b/spec/components/drawer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from '../../components/button';
 import Drawer from '../../components/drawer';
-import style from '../style.css';
+import style from '../style.module.css';
 
 class DrawerTest extends React.Component {
   state = {
diff --git a/spec/components/dropdown.js b/spec/components/dropdown.js
index a7bd8b89f..52a12716d 100644
--- a/spec/components/dropdown.js
+++ b/spec/components/dropdown.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Dropdown from '../../components/dropdown';
-import style from '../style';
+import style from '../style.module.css';
 
 const countries = [
   { value: 'EN-gb', label: 'England', img: 'http://' },
diff --git a/spec/components/progress.js b/spec/components/progress.js
index f10ae1db4..17554b9cb 100644
--- a/spec/components/progress.js
+++ b/spec/components/progress.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ProgressBar from '../../components/progress_bar';
-import style from '../style.css';
+import style from '../style.module.css';
 
 const initialState = {
   progress: 0,
diff --git a/spec/root.js b/spec/root.js
index 91f592d68..8b96ab1a5 100644
--- a/spec/root.js
+++ b/spec/root.js
@@ -6,7 +6,6 @@ import { hot } from 'react-hot-loader';
 import { Layout, Panel, NavDrawer } from '../components/layout';
 import AppBar from '../components/app_bar';
 import ButtonToolbox from '../components/button';
-
 import Autocomplete from './components/autocomplete';
 import AppBarTest from './components/app_bar';
 import Avatar from './components/avatar';
@@ -31,7 +30,7 @@ import Switch from './components/switch';
 import Table from './components/table';
 import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
-import style from './style.css';
+import style from './style.module.css';
 
 class Root extends Component {
   state = { pinned: false };
diff --git a/spec/style.css b/spec/style.module.css
similarity index 98%
rename from spec/style.css
rename to spec/style.module.css
index 3a3362871..4e72d3ab6 100644
--- a/spec/style.css
+++ b/spec/style.module.css
@@ -1,4 +1,4 @@
-@import '../components/button/config.css';
+@import '../components/button/config.module.css';
 
 :root {
   --offset: calc(1.8 * var(--unit));
diff --git a/spec/ts/card.tsx b/spec/ts/card.tsx
index a119f7aac..9ffbceff0 100644
--- a/spec/ts/card.tsx
+++ b/spec/ts/card.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import Button, { IconButton } from '../../components/button';
 import Card, { CardActions, CardMedia, CardText, CardTitle } from '../../components/card';
 
-const style = require('../style.css');
+const style = require('../style.module.css');
 
 const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
 
diff --git a/spec/ts/chip.tsx b/spec/ts/chip.tsx
index 0a6eab23e..ec757e295 100644
--- a/spec/ts/chip.tsx
+++ b/spec/ts/chip.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Avatar from '../../components/avatar';
 import Chip from '../../components/chip';
 
-const style = require('../style.css');
+const style = require('../style.module.css');
 
 class ChipTest extends React.Component<any, any> {
   state = {
diff --git a/spec/ts/drawer.tsx b/spec/ts/drawer.tsx
index 91f8d1e4a..629c21d8b 100644
--- a/spec/ts/drawer.tsx
+++ b/spec/ts/drawer.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '../../components/button';
 import Drawer from '../../components/drawer';
 
-const style = require('../style.css');
+const style = require('../style.module.css');
 
 class DrawerTest extends React.Component<any, any> {
   state = {
diff --git a/spec/ts/dropdown.tsx b/spec/ts/dropdown.tsx
index 11acbaae8..ef13e52f3 100644
--- a/spec/ts/dropdown.tsx
+++ b/spec/ts/dropdown.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Dropdown from '../../components/dropdown';
 
-const style = require('../style.css');
+const style = require('../style.module.css');
 
 const countries = [
   { value: 'EN-gb', label: 'England', img: 'http://' },
diff --git a/spec/ts/progress.tsx b/spec/ts/progress.tsx
index 3e379a2f2..bb2d29e0b 100644
--- a/spec/ts/progress.tsx
+++ b/spec/ts/progress.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ProgressBar from '../../components/progress_bar';
 
-const style = require('../style.css');
+const style = require('../style.module.css');
 
 const initialState = {
   progress: 0,
diff --git a/webpack/postcss.config.js b/webpack/postcss.config.js
index cb6ede823..e005e4b4d 100644
--- a/webpack/postcss.config.js
+++ b/webpack/postcss.config.js
@@ -14,7 +14,10 @@ module.exports = () => ({
       features: {
         'custom-properties': {
           preserve: false, // required to output values instead of variables
-          importFrom: ['./components/variables.css', './components/colors.css']
+          importFrom: [
+            './components/variables.module.css',
+            './components/colors.module.css',
+          ],
         },
         'color-mod-function': true, // required to use color-mod()
       }
diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js
index 649af92ff..5e899f2b6 100644
--- a/webpack/webpack.config.dev.js
+++ b/webpack/webpack.config.dev.js
@@ -44,7 +44,7 @@ module.exports = {
         ]
       },
       {
-        test: /\.css$/,
+        test: /\.module\.css$/,
         include: [
           path.join(__dirname, '../components'),
           path.join(__dirname, '../spec')