use styled-components to replace scss

Author: ianwang

.babelrc

@@ -4,6 +4,7 @@
   ],
   "plugins": [
     "inline-dotenv",
+    "styled-components",
     ["module-resolver", {
       "root": ["./src"]
     }]

next.config.js

@@ -5,7 +5,6 @@ const assetPrefix = ASSET_HOST || ''
 
 module.exports = {
   assetPrefix,
-  target: 'serverless',
   webpack: (config, { dev }) => {
     config.output.publicPath = `${assetPrefix}${config.output.publicPath}`
 
@@ -18,21 +17,6 @@ module.exports = {
       }))
     }
 
-    config.module.rules.push({
-      test: /\.scss/,
-      use: [{
-        loader: 'emit-file-loader',
-        options: {
-          name: 'dist/[path][name].[ext]'
-        }
-      },
-      'babel-loader',
-      'styled-jsx-css-loader', {
-        loader: 'sass-loader',
-        options: { sourceMap: dev }
-      }]
-    })
-
     return config
   }
 }

package.json

@@ -9,16 +9,16 @@
     "next": "^8.1.0",
     "next-redux-wrapper": "^2.1.0",
     "next-routes": "^1.4.2",
-    "node-sass": "^4.9.3",
-    "normalize-scss": "^7.0.1",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-helmet": "^5.2.0",
     "react-redux": "^6.0.0",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^4.2.0",
+    "styled-reset": "^2.0.13"
   },
   "name": "nextjs-redux-starter",
   "version": "1.0.0",
@@ -28,7 +28,6 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.0.0",
-    "babel-loader": "^8.0.5",
     "babel-plugin-inline-dotenv": "^1.1.2",
     "babel-plugin-module-resolver": "^3.2.0",
     "enzyme": "^3.9.0",
@@ -43,7 +42,6 @@
     "sass-loader": "^7.1.0",
     "snazzy": "^8.0.0",
     "standard": "^12.0.1",
-    "styled-jsx-css-loader": "^0.3.0",
     "webpack-bundle-analyzer": "^3.3.2"
   },
   "scripts": {

pages/_app.js

@@ -1,10 +1,21 @@
 import withRedux from 'next-redux-wrapper'
+import { ThemeProvider, createGlobalStyle } from 'styled-components'
+import reset from 'styled-reset'
 import { withRouter } from 'next/router'
 import { Provider } from 'react-redux'
 import App, { Container } from 'next/app'
 import Layout from 'components/Layout'
 import createStore from 'store/createStore'
 
+const GlobalStyle = createGlobalStyle`
+  ${reset}
+`
+const theme = {
+  colors: {
+    primary: '#003648'
+  }
+}
+
 class MyApp extends App {
   static async getInitialProps ({ Component, ctx }) {
     return {
@@ -17,11 +28,14 @@ class MyApp extends App {
     const { Component, pageProps, store, router } = this.props
     return (
       <Container>
-        <Provider store={store}>
-          <Layout>
-            <Component router={router} {...pageProps} />
-          </Layout>
-        </Provider>
+        <ThemeProvider theme={theme}>
+          <Provider store={store}>
+            <GlobalStyle />
+            <Layout>
+              <Component router={router} {...pageProps} />
+            </Layout>
+          </Provider>
+        </ThemeProvider>
       </Container>
     )
   }

pages/_document.js

@@ -1,14 +1,32 @@
 import Document, { Head, Main, NextScript } from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
 import Helmet from 'react-helmet'
-import styles from 'styles/base.scss'
 
 // from https://github.com/zeit/next.js/edit/canary/examples/with-react-helmet/pages/_document.js
 export default class extends Document {
-  static async getInitialProps (...args) {
-    const documentProps = await super.getInitialProps(...args)
-    // see https://github.com/nfl/react-helmet#server-usage for more information
-    // 'head' was occupied by 'renderPage().head', we cannot use it
-    return { ...documentProps, helmet: Helmet.renderStatic() }
+  static async getInitialProps (ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+        })
+
+      const documentProps = await Document.getInitialProps(ctx)
+      return {
+        ...documentProps,
+        helmet: Helmet.renderStatic(),
+        styles: (
+          <>
+            {documentProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        )
+      }
+    } finally {
+      sheet.seal()
+    }
   }
 
   get helmetHtmlAttrComponents () {
@@ -44,7 +62,6 @@ export default class extends Document {
           { this.helmetHeadComponents }
         </Head>
         <body {...this.helmetBodyAttrComponents}>
-          <style>{styles}</style>
           <Main />
           <NextScript />
         </body>

src/components/SearchResults.js

@@ -1,27 +1,42 @@
 import React from 'react'
+import styled from 'styled-components'
 import { Map } from 'immutable'
 import PropTypes from 'prop-types'
-import styles from 'styles/SearchResults.scss'
+
+const Container = styled.div`
+  width: 300px;
+  padding: 1em;
+  margin: 1em auto;
+`
+const Item = styled.li`
+  background: #eee;
+  padding: 4px 12px;
+  :hover {
+    a {
+      color: #eee;
+    }
+    background: ${props => props.theme.colors.primary};
+  }
+`
 
 const REPO_COUNT = 10
 const SearchResults = ({ repos }) => {
   return (
-    <div className='container'>
+    <Container>
       <h2>Top { REPO_COUNT } { repos.get('lang') } repos</h2>
       <small>{ repos.get('totalCount').toLocaleString() } repos found</small>
       <ul>
         {
           repos.get('items').take(REPO_COUNT).map(item => (
-            <li key={item.get('id')}>
+            <Item key={item.get('id')}>
               <a href={item.get('htmlUrl')} target='_blank'>
                 { item.get('name') }
               </a>
-            </li>
+            </Item>
           ))
         }
       </ul>
-      <style jsx>{styles}</style>
-    </div>
+    </Container>
   )
 }