rename .css to .module.css

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);

components/app_bar/theme.css → 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);

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);

components/autocomplete/theme.css → 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);

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);

components/avatar/theme.css → 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);

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', () => {

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);

components/button/theme.css → 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;

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);

components/card/theme.css → 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);

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));

components/checkbox/theme.css → 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;

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);

components/chip/theme.css → 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);

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', () => {

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);

components/date_picker/theme.css → 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;

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);

components/dialog/theme.css → 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;

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);

components/drawer/theme.css → 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;

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);

components/dropdown/theme.css → 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 {

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);

components/input/theme.css → 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;

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));

components/layout/theme.css → 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);

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);
 

components/link/theme.css → 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));

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 });

components/list/theme.css → 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);

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);

components/menu/theme.css → 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;

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;

components/navigation/theme.css → 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'],

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;

components/overlay/theme.css → 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);

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', () => {

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);
 

components/progress_bar/theme.css → 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);