Migrate to plain CSS (remove CSS modules) (decaporg#659)

* Migrate to plain CSS (remove CSS modules) Change `prefixer` to a function instead of a proxy * Switch prefix to `nc` * Replace prefixer with literal class names * Remove prefixer * Fix migration errors * fix compose migrations * Remove unnecessary theme imports * Remove old CSS import * fix sticky toolbar positioning * update to cssnano v4 so preset is used * fix css pseudo selectors * update lockfile
tsiq-swyx · Oct 18, 2017 · 7dd8ca1 · 7dd8ca1
1 parent 8a819be
commit 7dd8ca1
Show file tree

Hide file tree

Showing 70 changed files with 1,523 additions and 1,253 deletions.
diff --git a/package.json b/package.json
@@ -90,6 +90,7 @@
     "caniuse-lite": "^1.0.30000745",
     "cross-env": "^5.0.2",
     "css-loader": "^0.28.7",
+    "cssnano": "^v4.0.0-rc.2",
     "deep-equal": "^1.0.1",
     "enzyme": "^3.0.0",
     "enzyme-adapter-react-15": "^1.0.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -12,5 +12,8 @@ module.exports = {
         },
       },
     }),
+    require('cssnano')({
+      preset: 'default',
+    }),
   ],
 };
diff --git a/src/backends/git-gateway/AuthenticationPage.css b/src/backends/git-gateway/AuthenticationPage.css
@@ -1,31 +1,31 @@
-.root {
+.nc-gitGatewayAuthenticationPage-root {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
 }
 
-.card {
+.nc-gitGatewayAuthenticationPage-card {
   width: 350px;
   padding: 10px;
 }
 
-.card img {
+.nc-gitGatewayAuthenticationPage-card img {
   display: block;
   margin: auto;
   padding-bottom: 5px;
 }
 
-.errorMsg {
+.nc-gitGatewayAuthenticationPage-errorMsg {
   color: #dd0000;
 }
 
-.message {
+.nc-gitGatewayAuthenticationPage-message {
   font-size: 1.1em;
   margin: 20px 10px;
 }
 
-.button {
+.nc-gitGatewayAuthenticationPage-button {
   padding: .25em 1em;
   height: auto;
 }
diff --git a/src/backends/git-gateway/AuthenticationPage.js b/src/backends/git-gateway/AuthenticationPage.js
@@ -6,7 +6,6 @@ import { Notifs } from 'redux-notifications';
 import { Toast } from '../../components/UI/index';
 import { Card, Icon } from "../../components/UI";
 import logo from "./netlify_logo.svg";
-import styles from "./AuthenticationPage.css";
 
 let component = null;
 
@@ -94,24 +93,24 @@ export default class AuthenticationPage extends React.Component {
     const { error } = this.props;
 
     if (window.netlifyIdentity) {
-      return <section className={styles.root}>
+      return <section className="nc-gitGatewayAuthenticationPage-root">
         <Notifs CustomComponent={Toast} />
-        <Button className={styles.button} raised onClick={this.handleIdentity}>
+        <Button className="nc-gitGatewayAuthenticationPage-button" raised onClick={this.handleIdentity}>
           Login with Netlify Identity
         </Button>
       </section>
     }
 
     return (
-      <section className={styles.root}>
-        <Card className={styles.card}>
+      <section className="nc-gitGatewayAuthenticationPage-root">
+        <Card className="nc-gitGatewayAuthenticationPage-card">
           <form onSubmit={this.handleLogin}>
             <img src={logo} width={100} role="presentation" />
             {error && <p>
-              <span className={styles.errorMsg}>{error}</span>
+              <span className="nc-gitGatewayAuthenticationPage-errorMsg">{error}</span>
             </p>}
             {errors.server && <p>
-              <span className={styles.errorMsg}>{errors.server}</span>
+              <span className="nc-gitGatewayAuthenticationPage-errorMsg">{errors.server}</span>
             </p>}
             <Input
               type="text"
@@ -130,7 +129,7 @@ export default class AuthenticationPage extends React.Component {
               onChange={this.handleChange.bind(this, "password")} // eslint-disable-line
             />
             <Button
-              className={styles.button}
+              className="nc-gitGatewayAuthenticationPage-button"
               raised
             >
               <Icon type="login" /> Login

diff --git a/src/backends/github/AuthenticationPage.css b/src/backends/github/AuthenticationPage.css
@@ -1,12 +1,12 @@
-.root {
+.nc-githubAuthenticationPage-root {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   justify-content: center;
   height: 100vh;
 }
 
-.button {
+.nc-githubAuthenticationPage-button {
   padding: .25em 1em;
   height: auto;
 }
diff --git a/src/backends/github/AuthenticationPage.js b/src/backends/github/AuthenticationPage.js
@@ -5,7 +5,6 @@ import Authenticator from '../../lib/netlify-auth';
 import { Icon } from '../../components/UI';
 import { Notifs } from 'redux-notifications';
 import { Toast } from '../../components/UI/index';
-import styles from './AuthenticationPage.css';
 
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
@@ -35,11 +34,11 @@ export default class AuthenticationPage extends React.Component {
     const { loginError } = this.state;
 
     return (
-      <section className={styles.root}>
+      <section className="nc-githubAuthenticationPage-root">
         <Notifs CustomComponent={Toast} />
         {loginError && <p>{loginError}</p>}
         <Button
-          className={styles.button}
+          className="nc-githubAuthenticationPage-button"
           raised
           onClick={this.handleLogin}
         >

diff --git a/src/backends/test-repo/AuthenticationPage.js b/src/backends/test-repo/AuthenticationPage.js
@@ -4,7 +4,6 @@ import Input from "react-toolbox/lib/input";
 import Button from "react-toolbox/lib/button";
 import { Card, Icon } from "../../components/UI";
 import logo from "../git-gateway/netlify_logo.svg";
-import styles from "../git-gateway/AuthenticationPage.css";
 
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
@@ -23,10 +22,10 @@ export default class AuthenticationPage extends React.Component {
   };
 
   render() {
-    return (<section className={styles.root}>
-      <Card className={styles.card}>
+    return (<section className="nc-gitGatewayAuthenticationPage-root">
+      <Card className="nc-gitGatewayAuthenticationPage-card">
         <img src={logo} width={100} role="presentation" />
-        <p className={styles.message}>This is a demo, enter your email to start</p>
+        <p className="nc-gitGatewayAuthenticationPage-message">This is a demo, enter your email to start</p>
         <Input
           type="text"
           label="Email"
@@ -35,7 +34,7 @@ export default class AuthenticationPage extends React.Component {
           onChange={this.handleEmailChange}
         />
         <Button
-          className={styles.button}
+          className="nc-gitGatewayAuthenticationPage-button"
           raised
           onClick={this.handleLogin}
         >

diff --git a/src/components/AppHeader/AppHeader.css b/src/components/AppHeader/AppHeader.css
@@ -1,6 +1,4 @@
-@import '../UI/theme';
-
-.appBar {
+.nc-appHeader-appBar {
   padding: 8px 24px;
   height: auto;
   background-color: var(--backgroundAltColor);
@@ -9,18 +7,18 @@
 
 /* Gross stuff below, React Toolbox hacks */
 
-.homeLink,
-.iconMenu {
+.nc-appHeader-homeLink,
+.nc-appHeader-iconMenu {
   margin-left: 2%;
 }
 
-.homeLink .icon {
+.nc-appHeader-homeLink &icon {
   vertical-align: top;
 }
 
-.icon,
-.icon span,
-.leftIcon span {
+.nc-appHeader-icon,
+.nc-appHeader-icon span,
+.nc-appHeader-leftIcon span {
   /* stylelint-disable */
 
   color: var(--defaultColorLight) !important;

diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js
@@ -8,7 +8,6 @@ import AppBar from "react-toolbox/lib/app_bar";
 import FontIcon from "react-toolbox/lib/font_icon";
 import FindBar from "../FindBar/FindBar";
 import { stringToRGB } from "../../lib/textHelper";
-import styles from "./AppHeader.css";
 
 export default class AppHeader extends React.Component {
 
@@ -58,19 +57,32 @@ export default class AppHeader extends React.Component {
       backgroundColor: `#${ stringToRGB(user.get("name")) }`,
     };
 
+    const theme = {
+      appBar: 'nc-appHeader-appBar',
+      homeLink: 'nc-appHeader-homeLink',
+      iconMenu: 'nc-appHeader-iconMenu',
+      icon: 'nc-appHeader-icon',
+      leftIcon: 'nc-appHeader-leftIcon',
+      base: 'nc-theme-base',
+      container: 'nc-theme-container',
+      rounded: 'nc-theme-rounded',
+      depth: 'nc-theme-depth',
+      clearfix: 'nc-theme-clearfix',
+    };
+
     return (
       <AppBar
         fixed
-        theme={styles}
+        theme={theme}
         leftIcon="menu"
         onLeftIconClick={toggleDrawer}
         onRightIconClick={this.handleRightIconClick}
       >
-        <Link to="/" className={styles.homeLink}>
-          <FontIcon value="home" className={styles.icon} />
+        <Link to="/" className="nc-appHeader-homeLink">
+          <FontIcon value="home" className="nc-appHeader-icon" />
         </Link>
         <IconMenu
-          theme={styles}
+          theme={theme}
           icon="add"
           onClick={this.handleCreateButtonClick}
           onHide={this.handleCreateMenuHide}
@@ -88,7 +100,7 @@ export default class AppHeader extends React.Component {
         </IconMenu>
         <FindBar runCommand={runCommand} />
         <Avatar style={avatarStyle} title={user.get("name")} image={user.get("avatar_url")} />
-        <IconMenu icon="settings" position="topRight" theme={styles}>
+        <IconMenu icon="settings" position="topRight" theme={theme}>
           <MenuItem onClick={onLogoutClick} value="log out" caption="Log Out" />
         </IconMenu>
       </AppBar>

diff --git a/src/components/ControlPanel/ControlPane.css b/src/components/ControlPanel/ControlPane.css
@@ -1,61 +1,60 @@
-@import "../UI/theme";
+.nc-controlPane-root p {
+  font-size: 16px;
+}
 
-.control {
+.nc-controlPane-control {
   color: var(--textColor);
   position: relative;
   padding: 20px 0 10px 0;
   margin-top: 16px;
+}
 
-  & input,
-  & textarea,
-  & select,
-  & div[contenteditable=true] {
-    display: block;
-    width: 100%;
-    padding: 12px;
-    margin: 0;
-    border: var(--textFieldBorder);
-    border-radius: var(--borderRadius);
-    outline: 0;
-    box-shadow: none;
-    background-color: var(--controlBGColor);
-    font-size: 16px;
-    color: var(--textColor);
-    transition: border-color .3s ease;
-
-    &:focus,
-    &:active {
-      border-color: var(--primaryColor);
-    }
-  }
 
-  & input,
-  & textarea,
-  & select {
-    font-family: var(--fontFamilyMono);
+.nc-controlPane-control input,
+.nc-controlPane-control textarea,
+.nc-controlPane-control select,
+.nc-controlPane-control div[contenteditable=true] {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  margin: 0;
+  border: var(--textFieldBorder);
+  border-radius: var(--borderRadius);
+  outline: 0;
+  box-shadow: none;
+  background-color: var(--controlBGColor);
+  font-size: 16px;
+  color: var(--textColor);
+  transition: border-color .3s ease;
+
+  &:focus,
+  &:active {
+    border-color: var(--primaryColor);
   }
 }
 
-.label {
+.nc-controlPane-control input,
+.nc-controlPane-control textarea,
+.nc-controlPane-control select {
+  font-family: var(--fontFamilyMono);
+}
+
+
+.nc-controlPane-label {
   display: block;
   color: var(--controlLabelColor);
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 600;
 }
 
-.labelWithError {
-  composes: label;
+.nc-controlPane-labelWithError {
   color: #FF706F;
 }
 
-.errors {
+.nc-controlPane-errors {
   list-style-type: none;
   font-size: 10px;
   color: #FF706F;
   margin-bottom: 5px;
 }
-
-p {
-  font-size: 16px;
-}
diff --git a/src/components/ControlPanel/ControlPane.js b/src/components/ControlPanel/ControlPane.js
@@ -4,7 +4,6 @@ import { Map, fromJS } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { resolveWidget } from '../Widgets';
 import ControlHOC from '../Widgets/ControlHOC';
-import styles from './ControlPane.css';
 
 function isHidden(field) {
   return field.get('widget') === 'hidden';
@@ -31,12 +30,12 @@ export default class ControlPane extends Component {
     const value = entry.getIn(['data', fieldName]);
     const metadata = fieldsMetaData.get(fieldName);
     const errors = fieldsErrors.get(fieldName);
-    const labelClass = errors ? styles.labelWithError : styles.label;
+    const labelClass = errors ? 'nc-controlPane-label nc-controlPane-labelWithError' : 'nc-controlPane-label';
     if (entry.size === 0 || entry.get('partial') === true) return null;
     return (
-      <div className={styles.control}>
+      <div className="nc-controlPane-control">
         <label className={labelClass} htmlFor={fieldName}>{field.get('label')}</label>
-        <ul className={styles.errors}>
+        <ul className="nc-controlPane-errors">
           {
             errors && errors.map(error => (
               typeof error === 'string' && <li key={error.trim().replace(/[^a-z0-9]+/gi, '-')}>{error}</li>
@@ -66,13 +65,13 @@ export default class ControlPane extends Component {
     }
 
     return (
-      <div>
+      <div className="nc-controlPane-root">
         {
           fields.map((field, i) => {
             if (isHidden(field)) {
               return null;
             }
-            return <div key={i} className={styles.widget}>{this.controlFor(field)}</div>;
+            return <div key={i} className="nc-controlPane-widget">{this.controlFor(field)}</div>;
           })
         }
       </div>