change to postcss + css modules

build/webpack.config.js

@@ -231,8 +231,9 @@ webpackConfig.postcss = [
     add: true,
     remove: true,
     browsers: ['last 2 versions']
-  })
-  // require('postcss-easy-import')({
+  }),
+  require('precss')
+  // require('postcss-partial-import')({
   //   prefix: '_'
   // }),
   // require('postcss-mixins'),

package.json

@@ -161,6 +161,7 @@
     "postcss-extend": "^1.0.1",
     "postcss-mixins": "^4.0.1",
     "postcss-nested": "^1.0.0",
+    "precss": "^1.4.0",
     "pretender": "^1.1.0",
     "react-addons-test-utils": "^15.0.0",
     "redbox-react": "^1.2.2",

src/components/Counter/Counter.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import classes from './Counter.scss'
+import classes from './Counter.css'
 
 export const Counter = (props) => (
   <div>

src/components/Dropdown/Dropdown.js

@@ -3,7 +3,7 @@ import DropdownTrigger from './DropdownTrigger';
 import DropdownList from './DropdownList';
 import DropdownItem from './DropdownItem';
 import dropdownManager from './DropdownManager';
-import css from './drop-down.scss';
+import css from './drop-down.css';
 
 export class Dropdown extends React.Component {
   constructor(props, context) {

src/components/Dropdown/DropdownItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import css from './drop-down-item.scss';
+import css from './drop-down-item.css';
 
 export class DropdownItem extends React.Component {
 

src/components/Dropdown/DropdownList.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import DropdownItem from './DropdownItem';
 import classnames from 'classnames';
-import css from './drop-down-list.scss';
+import css from './drop-down-list.css';
 
 export class DropdownList extends React.Component {
 

src/components/Dropdown/DropdownTrigger.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import css from './drop-down-trigger.scss';
+import css from './drop-down-trigger.css';
 
 export class DropdownTrigger extends React.Component {
   render () {

src/components/Dropdown/drop-down-item.scss → src/components/Dropdown/drop-down-item.css

@@ -1,6 +1,6 @@
-@import 'src/styles/utils/colors';
-@import 'src/styles/utils/mixins';
-@import 'src/styles/base/icon-fonts';
+@import '../../styles/utils/colors';
+@import '../../styles/utils/mixins';
+@import '../../styles/base/icon-fonts';
 
 .selectOption {
   line-height: 1.75rem;

src/components/Dropdown/drop-down-list.scss → src/components/Dropdown/drop-down-list.css

@@ -1,4 +1,4 @@
-@import 'src/styles/utils/colors';
+@import '../../styles/utils/colors';
 
 .expandedContent {
   position: absolute;

src/components/Dropdown/drop-down-trigger.scss → src/components/Dropdown/drop-down-trigger.css

@@ -1,6 +1,6 @@
-@import 'src/styles/utils/colors';
-@import 'src/styles/utils/mixins';
-@import 'src/styles/base/icon-fonts';
+@import '../../styles/utils/colors';
+@import '../../styles/utils/mixins';
+@import '../../styles/base/icon-fonts';
 
 .trigger {
     display: inline-block;

src/components/Dropdown/drop-down.css

@@ -0,0 +1,7 @@
+@import '../../styles/utils/mixins';
+
+.container {
+  @mixin font__proxima-nova-light;
+  position: relative;
+  display: inline-block;
+}

src/components/Googlemap/Googlemap.js

@@ -8,7 +8,7 @@ import dot from './map-red-dot.svg';
 import dot2 from './map-red-dot-2.svg';
 import dot3 from './map-red-dot-3.svg';
 import dot4 from './map-red-dot-4.svg';
-import css from './google-map.scss';
+import css from './google-map.css';
 
 
 const memberOptions = {

src/components/Header/NavBar/NavBar.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames';
-import css from './nav-bar.scss';
+import css from './nav-bar.css';
 
 export class NavBar extends React.Component {
   render () {

src/components/Header/NavBar/nav-bar.scss → src/components/Header/NavBar/nav-bar.css

@@ -1,6 +1,6 @@
-@import 'src/styles/utils/colors';
-@import 'src/styles/utils/mixins';
-@import 'src/styles/variables/nav-bar';
+@import '../../../styles/utils/colors';
+@import '../../../styles/utils/mixins';
+@import '../../../styles/variables/nav-bar';
 
 .container {
   height: $nav_bar_height;
@@ -27,7 +27,7 @@
 }
 
 .name {
-  @include font__proxima-nova-semibold;
+  @mixin font__proxima-nova-semibold;
   display: inline-block;
   width: 65%;
   margin: 0;

src/components/Header/NavBarItem/NaveBarItem.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import {Link} from 'react-router';
 import classnames from 'classnames';
-import css from './nav-bar-item.scss';
+import css from './nav-bar-item.css';
 
 export class NaveBarItem extends React.Component {
   static contextTypes = {

src/components/Header/NavBarItem/nav-bar-item.scss → src/components/Header/NavBarItem/nav-bar-item.css

@@ -1,4 +1,4 @@
-@import 'src/styles/utils/colors.scss';
+@import '../../../styles/utils/colors';
 
 .container {
   display: inline;

src/components/Header/Title/Title.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import css from './title.scss';
+import css from './title.css';
 
 export class Title extends React.Component {
   render () {

src/components/Header/Title/title.scss → src/components/Header/Title/title.css

@@ -1,6 +1,6 @@
-@import 'src/styles/utils/colors';
-@import 'src/styles/utils/mixins';
-@import 'src/styles/variables/title-bar';
+@import '../../../styles/utils/colors';
+@import '../../../styles/utils/mixins';
+@import '../../../styles/variables/title-bar';
 
 .container {
   width: 100%;
@@ -16,7 +16,7 @@
 }
 
 .text {
-  @include font__proxima-nova-light;
+  @mixin font__proxima-nova-light;
   margin: 0;
   font-size: 1.65rem;
   line-height: 77px;

src/components/Maps/Mapsliderbar/Mapsliderbar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import css from './map-slider-bar.scss';
+import css from './map-slider-bar.css';
 
 export class Mapsliderbar extends React.Component {
   constructor(props, context) {

src/components/Maps/Mapsliderbar/map-slider-bar.scss → src/components/Maps/Mapsliderbar/map-slider-bar.css

@@ -1,8 +1,8 @@
-@import 'src/styles/utils/colors';
-@import 'src/styles/utils/mixins';
+@import '../../../styles/utils/colors';
+@import '../../../styles/utils/mixins';
 
 .mapControls {
-  @include font__proxima-nova-regular;
+  @mixin font__proxima-nova-regular;
   position: absolute;
   top: 30px;
   left: -290px;
@@ -19,7 +19,7 @@
 }
 
 .toggler {
-  @include font__proxima-nova-thin;
+  @mixin font__proxima-nova-thin;
   position: absolute;
   top: 10px;
   left: calc(260px + 30px + 30px);

src/components/Overview/MembershipsOverviewReportsRetention/MembershipsOverviewReportsRetention.js

@@ -3,7 +3,7 @@ import StudentsRiskLevelChart from './StudentsRiskLevelChart';
 import classnames from 'classnames';
 import Dropdown from 'components/Dropdown';
 import _get from 'lodash/object/get';
-import css from './students-retention.scss';
+import css from './students-retention.css';
 
 export class MembershipsOverviewReportsRetention extends React.Component {
   constructor(props, context) {

src/components/Overview/MembershipsOverviewReportsRetention/StudentsDemographicsChart.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import * as d3 from 'd3';
 import _debounce from 'lodash/function/debounce';
-import css from './students-demographics-chart.scss';
+import css from './students-demographics-chart.css';
 
 export class StudentsDemographicsChart extends React.Component {
   constructor(props, context) {

src/components/Overview/MembershipsOverviewReportsRetention/StudentsRiskLevelChart.js

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import RingChart from 'components/RingChart';
 import StudentsDemographicsChart from './StudentsDemographicsChart';
 import _get from 'lodash/object/get';
-import css from './students-risk-level-chart.scss';
+import css from './students-risk-level-chart.css';
 
 const RING_COLOR = {
   'low-risk': {

src/components/Overview/MembershipsOverviewReportsRetention/students-demographics-chart.scss → src/components/Overview/MembershipsOverviewReportsRetention/students-demographics-chart.css

@@ -1,5 +1,5 @@
-@import 'src/styles/utils/mixins';
-@import 'src/styles/utils/colors';
+@import '../../../styles/utils/mixins';
+@import '../../../styles/utils/colors';
 
 .container {
   height: 350px;
@@ -16,7 +16,7 @@
     }
 
     text {
-      @include font__proxima-nova-light;
+      @mixin font__proxima-nova-light;
       fill: $color_shadow-grey;
       stroke: $color_shadow-grey;
       shape-rendering: crispEdges;

src/components/Overview/MembershipsOverviewReportsRetention/students-retention.scss → src/components/Overview/MembershipsOverviewReportsRetention/students-retention.css

@@ -1,4 +1,4 @@
-@import '../Snapshot/snapshot.scss';
+@import '../Snapshot/snapshot.css';
 
 .content{
   @extend .row;

src/components/Overview/MembershipsOverviewReportsRetention/students-risk-level-chart.scss → src/components/Overview/MembershipsOverviewReportsRetention/students-risk-level-chart.css

@@ -1,8 +1,8 @@
-@import 'src/styles/utils/mixins';
-@import 'src/styles/utils/colors';
+@import '../../../styles/utils/mixins';
+@import '../../../styles/utils/colors';
 
 .chart {
-  @include flex-row;
+  @mixin flex-row;
   margin-top: 30px;
 }
 

src/components/Overview/Snapshot/Snapshot.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import Dropdown from 'components/Dropdown';
 import _get from 'lodash/object/get';
-import css from './snapshot.scss';
+import css from './snapshot.css';
 
 export class Snapshot extends React.Component {
   constructor(props, context) {

src/components/Overview/Snapshot/snapshot.scss → src/components/Overview/Snapshot/snapshot.css

@@ -1,4 +1,4 @@
-@import 'src/styles/utils/colors';
+@import '../../../styles/utils/colors';
 
 .snapshot {
   min-height: 370px;

src/components/Overview/StatCard/StatCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import css from './stat-card.scss';
+import css from './stat-card.css';
 
 export class StatCard extends React.Component {
   render () {

src/components/Overview/StatCard/stat-card.scss → src/components/Overview/StatCard/stat-card.css

@@ -1,5 +1,5 @@
-@import 'src/styles/utils/colors';
-@import 'src/styles/utils/mixins';
+@import '../../../styles/utils/colors';
+@import '../../../styles/utils/mixins';
 
 .statCard {
   flex: 1;
@@ -30,7 +30,7 @@
 }
 
 .primaryStat {
-  @include font__proxima-nova-thin ;
+  @mixin font__proxima-nova-thin ;
   font-size: 2.5em;
 }
 
@@ -59,7 +59,7 @@
 
 
 .primaryText {
-  @include font__proxima-nova-semibold;
+  @mixin font__proxima-nova-semibold;
   margin-top: 1em;
   font-size: 0.9rem;
 }

src/components/Tab/Tab.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import css from './tab.scss'
+import css from './tab.css'
 
 export class Tab extends React.Component {
   constructor(props, context) {

src/components/Tab/tab.scss → src/components/Tab/tab.css

@@ -1,5 +1,5 @@
-@import 'src/styles/utils/colors';
-@import 'src/styles/utils/mixins';
+@import '../../styles/utils/colors';
+@import '../../styles/utils/mixins';
 
 .list {
   display: flex;
@@ -19,7 +19,7 @@
 }
 
 .title {
-  @include font__proxima-nova-semibold;
+  @mixin font__proxima-nova-semibold;
   display: block;
   padding: 1em;
   font-size: 0.8rem;

src/containers/AppContainer.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import { Router } from 'react-router'
 import { Provider } from 'react-redux';
 import dropdownManager from 'components/Dropdown/DropdownManager';
-import 'styles/app.scss';
+import 'styles/app.css';
 
 class AppContainer extends React.Component {
   static propTypes = {

src/layouts/CoreLayout/CoreLayout.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Header from 'components/Header'
 import classnames from 'classnames';
-import css from './core-layout.scss';
+import css from './core-layout.css';
 
 export const CoreLayout = ({ children }) => (
   <div className={classnames(css.application)}>

src/layouts/CoreLayout/core-layout.css

@@ -0,0 +1,5 @@
+@import '../../styles/utils/mixins';
+
+.application {
+  @mixin font__proxima-nova-regular;
+}

src/routes/Maps/containers/Container.js

@@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
 import classnames from 'classnames';
 import { fetchMapData } from '../modules/reducer';
 import _get from 'lodash/object/get';
-import css from './maps.scss';
+import css from './maps.css';
 
 import GoogleMap from 'components/GoogleMap';
 import Mapsliderbar from 'components/Maps/Mapsliderbar';