adds scss webpack handling, revises components to import scss instead of css

src/components/App.js

@@ -3,6 +3,8 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { MeasureWindow, MeasureScroll, LoadCollections } from 'payload/components';
 
+import '../scss/app.scss';
+
 const App = props => {
   return (
     <Provider store={props.store}>

src/components/controls/Button/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 
-import './Button.css';
+import './index.scss';
 
 class Button extends Component {
   constructor(props) {

src/components/controls/Button/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .btn {
     @extend %uppercase-label;

src/components/field-types/Group/index.js

@@ -1,18 +1,20 @@
 import React from 'react';
 
-import './index.css';
-
-export default props => {
-  const Heading = props.heading
-    ? () => <header><h2>{props.heading}</h2></header>
-    : () => null;
+import './index.scss';
 
+const Group = props => {
   return (
     <section className="field-group">
-      <Heading />
+      {props.heading &&
+        <header>
+          <h2>{props.heading}</h2>
+        </header>
+      }
       <div className="content">
         {props.children}
       </div>
     </section>
   );
 };
+
+export default Group;

src/components/field-types/Group/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .field-group {
   @extend %shadow;

src/components/field-types/Input/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Tooltip, FormContext } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 class Input extends Component {
   constructor() {

src/components/field-types/Input/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .interact.text,
 .interact.email,

src/components/field-types/Textarea/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { FormContext, Tooltip } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 class Textarea extends Component {
   constructor() {
@@ -123,10 +123,12 @@ class Textarea extends Component {
   }
 }
 
-export default props => {
+const ContextTextarea = props => {
   return (
     <FormContext.Consumer>
       {context => <Textarea {...props} context={context} />}
     </FormContext.Consumer>
   );
 };
+
+export default ContextTextarea;

src/components/field-types/Textarea/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .interact.textarea {
   margin-bottom: rem(.5);

src/components/forms/Form/index.js

@@ -1,7 +1,7 @@
 import React, { Component, createContext } from 'react';
 import api from 'payload/api';
 
-import './index.css';
+import './index.scss';
 
 export const FormContext = createContext({});
 

src/components/forms/Form/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 form {
   display: flex;

src/components/graphics/PayloadIcon/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import './index.css';
+import './index.scss';
 
-export default () => {
+const PayloadIcon = () => {
   return (
     <svg className="payload-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
       <title>Payload icon</title>
@@ -12,3 +12,5 @@ export default () => {
     </svg>
   );
 };
+
+export default PayloadIcon;

src/components/graphics/PayloadLogo/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
 
-import './index.css';
+import './index.scss';
 
-export default () => {
+const PayloadLogo = () => {
   return (
     <svg className="payload-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 38.33">
       <path className="cls-1" d="M64.41,29.73a.65.65,0,0,1-.65.64H62a.65.65,0,0,1-.65-.64V8.44A.65.65,0,0,1,62,7.79H67.8a6.78,6.78,0,0,1,0,13.55H64.73a.3.3,0,0,0-.32.32Zm.32-18.87a.3.3,0,0,0-.32.32V18a.31.31,0,0,0,.32.33H67.8a3.71,3.71,0,0,0,0-7.42Z"/><path className="cls-1" d="M83.25,29.89a.65.65,0,0,1-.61.48H80.86c-.51,0-.71-.35-.64-.64l6-21.45a.62.62,0,0,1,.61-.49h2.26a.63.63,0,0,1,.61.49l6,21.45c.06.29-.13.64-.65.64H93.28a.64.64,0,0,1-.61-.48L91.25,25a.6.6,0,0,0-.62-.45H85.28a.61.61,0,0,0-.61.45Zm2.45-8.74c-.06.25.06.35.26.35h4c.19,0,.32-.1.26-.35l-2.1-9c0-.13-.07-.2-.13-.2h-.06c-.07,0-.1.07-.13.2Z"/><path className="cls-1" d="M112.67,8.28c.13-.36.32-.49.61-.49h2.13a.62.62,0,0,1,.52.91l-5.42,13.9v7.13a.65.65,0,0,1-.65.64h-1.8a.65.65,0,0,1-.65-.64v-7.1L101.93,8.7a.61.61,0,0,1,.51-.91h2.13a.61.61,0,0,1,.62.49l3.64,10c.06.16.19.16.26,0Z"/><path className="cls-1" d="M128,27a.31.31,0,0,0,.32.33h7.87a.65.65,0,0,1,.65.64v1.78a.65.65,0,0,1-.65.64H125.54a.64.64,0,0,1-.64-.64V8.44a.65.65,0,0,1,.64-.65h1.78a.65.65,0,0,1,.64.65Z"/><path className="cls-1" d="M158.12,14.24a51.32,51.32,0,0,1,0,9.68,7.19,7.19,0,0,1-7.25,6.71c-3.88,0-6.75-2.55-7.26-6.71a48.92,48.92,0,0,1,0-9.68,7.24,7.24,0,0,1,7.26-6.7C154.74,7.54,157.61,10.08,158.12,14.24Zm-11.45,0a48.92,48.92,0,0,0,0,9.68,4.1,4.1,0,0,0,4.2,3.65,4,4,0,0,0,4.19-3.65,42.92,42.92,0,0,0,0-9.68,4.24,4.24,0,0,0-8.39,0Z"/><path className="cls-1" d="M167.13,29.89a.66.66,0,0,1-.62.48h-1.77c-.52,0-.71-.35-.65-.64l6-21.45a.63.63,0,0,1,.62-.49H173a.64.64,0,0,1,.62.49l6,21.45c.06.29-.13.64-.65.64h-1.77a.66.66,0,0,1-.62-.48L175.12,25a.59.59,0,0,0-.61-.45h-5.35a.63.63,0,0,0-.62.45Zm2.45-8.74c-.07.25.06.35.25.35h4c.2,0,.33-.1.26-.35l-2.09-9c0-.13-.07-.2-.13-.2h-.07c-.06,0-.09.07-.13.2Z"/><path className="cls-1" d="M186.87,30.37a.65.65,0,0,1-.65-.64V8.44a.65.65,0,0,1,.65-.65H193c3.74,0,6.32,3,6.77,6.78a44.67,44.67,0,0,1,0,9c-.42,3.71-3,6.77-6.77,6.77ZM193,27.31a4,4,0,0,0,3.71-3.71,42.59,42.59,0,0,0,0-9A4,4,0,0,0,193,10.86h-3.39a.3.3,0,0,0-.32.32V27a.31.31,0,0,0,.32.33Z"/><path className="cls-1" d="M16.78.1.3,10.42A.62.62,0,0,0,0,11V27.37a.65.65,0,0,0,.3.55L16.78,38.23a.64.64,0,0,0,.68,0L33.94,27.92a.65.65,0,0,0,.3-.55V11a.62.62,0,0,0-.3-.54L17.46.1A.64.64,0,0,0,16.78.1Zm14,26.31L17.52,34.75a.75.75,0,0,1-.79,0L3.41,26.41a.75.75,0,0,1-.35-.63V12.55a.75.75,0,0,1,.35-.63L16.73,3.58a.75.75,0,0,1,.79,0l13.31,8.34a.73.73,0,0,1,.35.63V25.78A.73.73,0,0,1,30.83,26.41Z"/><path className="cls-1" d="M17.12,20.53v9.81a.58.58,0,0,0,.89.49l9.54-6a.93.93,0,0,0,.43-.77V14.24a.82.82,0,0,0-.12-.43Z"/><path className="cls-2" d="M27.55,13.47l-.13-.08L17.61,7.24a.94.94,0,0,0-1,0L8.88,12.11,7.17,13.18a.66.66,0,0,0,0,1.12l3.42,2.15,6.53,4.09,10.74-6.73A.85.85,0,0,0,27.55,13.47Z"/>
     </svg>
   );
 };
+
+export default PayloadLogo;

src/components/layout/ContentBlock/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import './index.css';
+import './index.scss';
 
 const ContentBlock = (props) => {
   let classes = props.className

src/components/layout/ContentBlock/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .content-block {
   max-width: $content-width;

src/components/layout/DefaultTemplate/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Sidebar, StepNav } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 const DefaultTemplate = props => {
   return (

src/components/layout/DefaultTemplate/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .default-template {
   @include default-template-width;

src/components/layout/Sidebar/index.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { NavLink, Link } from 'react-router-dom';
 import { Arrow, Label } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 const mapStateToProps = state => ({
   collections: state.collections.all

src/components/layout/Sidebar/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .sidebar {
   position: fixed;

src/components/layout/Sticky/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import './index.css';
+import './index.scss';
 
 const Sticky = props => {
   return (

src/components/layout/Sticky/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .sticky {
   @include m;

src/components/modules/HeadingButton/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Button } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
-export default props => {
+const HeadingButton = props => {
   return (
     <header className="heading-button">
       <h1>{props.heading}</h1>
@@ -11,3 +11,5 @@ export default props => {
     </header>
   );
 };
+
+export default HeadingButton;

src/components/modules/HeadingButton/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .heading-button {
   display: flex;

src/components/modules/StepNav/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Label, Arrow } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 const mapStateToProps = state => ({
   nav: state.common.stepNav

src/components/modules/StepNav/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .current-view-nav {
   @include m;

src/components/modules/Tooltip/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import './Tooltip.css';
+import './index.scss';
 
-export default (props) => {
+const Tooltip = (props) => {
   let className = props.className ? `tooltip ${props.className}` : 'tooltip';
 
   return (
@@ -12,3 +12,5 @@ export default (props) => {
     </aside>
   );
 };
+
+export default Tooltip;

src/components/modules/Tooltip/index.scss

@@ -1,6 +1,4 @@
-@import '_vars';
-@import '_type';
-@import '_structure';
+@import '~payload/scss/styles';
 
 .tooltip {
 	@extend %uppercase-label;

src/components/type/Label/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import './index.css';
+import './index.scss';
 
-export default props => {
+const Label = props => {
   let classes = props.className ? props.className : undefined;
 
   return (
@@ -11,3 +11,5 @@ export default props => {
     </label>
   );
 };
+
+export default Label;

src/components/type/Label/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 label.uppercase {
     @extend %uppercase-label;

src/components/views/CreateUser/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ContentBlock, Form, Input, FormSubmit, SetStepNav } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 const CreateUser = () => {
 

src/components/views/Dashboard/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { SetStepNav } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 const Dashboard = () => {
   return (

src/components/views/Login/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { ContentBlock, Form, Input, FormSubmit } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 const mapStateToProps = state => ({
   windowHeight: state.common.windowHeight

src/components/views/Login/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .login {
   display: flex;

src/components/views/collections/Archive/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SetStepNav } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 const Archive = props => {
   return (

src/components/views/collections/Archive/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .collection-archive {
   .heading-button {

src/components/views/collections/Edit/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SetStepNav } from 'payload/components';
 
-import './index.css';
+import './index.scss';
 
 const Edit = props => {
 

src/components/views/collections/Edit/index.scss

@@ -1,4 +1,4 @@
-@import '_styles';
+@import '~payload/scss/styles';
 
 .collection-edit {
   header {

src/scss/_styles.scss

@@ -1,6 +0,0 @@
-@import '_vars';
-@import '_structure';
-@import '_type';
-@import '_grid';
-@import '_queries';
-@import '_form';

src/scss/app.scss

@@ -1,5 +1,5 @@
-@import 'fonts.scss';
-@import '_styles';
+@import 'fonts';
+@import 'styles';
 
 /////////////////////////////
 // GLOBAL STYLES

src/scss/form.scss

@@ -1,6 +1,6 @@
-@import '_vars';
-@import '_structure';
-@import '_queries';
+@import 'vars';
+@import 'structure';
+@import 'queries';
 
 @mixin formInput () {
     @extend %inputShadow;

src/scss/grid.scss

@@ -1,4 +1,4 @@
-@import '_structure';
+@import 'structure';
 
 /////////////////////////////
 // GRID

src/scss/structure.scss

@@ -1,5 +1,5 @@
-@import '_queries';
-@import '_vars';
+@import 'queries';
+@import 'vars';
 
 /////////////////////////////
 // STRUCTURE

src/scss/styles.scss

@@ -0,0 +1,7 @@
+@import 'vars';
+@import '~local/client/scss/overrides';
+@import 'structure';
+@import 'type';
+@import 'grid';
+@import 'queries';
+@import 'form';

src/scss/type.scss

@@ -1,5 +1,5 @@
-@import '_vars';
-@import '_structure';
+@import 'vars';
+@import 'structure';
 
 /////////////////////////////
 // HEADINGS