Setup CSS-modules (#965)

* Example usage with "Balance" component * Introduce sass and sass-variables * Remove "connect" from balance component
vacuumlabs · Apr 30, 2021 · 6af281f · 6af281f
1 parent f3faaa7
commit 6af281f
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 122 deletions.
diff --git a/app/declaration.d.ts b/app/declaration.d.ts
@@ -0,0 +1,9 @@
+declare module '*.scss' {
+  const content: Record<string, string>
+  export default content
+}
+
+declare module '*.svg' {
+  const content: any
+  export default content
+}
diff --git a/app/frontend/components/common/balance.module.scss b/app/frontend/components/common/balance.module.scss
@@ -0,0 +1,55 @@
+@import '../../variables.scss';
+
+.balanceRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.balanceTitle {
+  margin-bottom: 0;
+}
+
+.refreshButton {
+  padding: 10px 24px 10px 58px;
+  position: relative;
+
+  &::before {
+    content: '';
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    position: absolute;
+    left: 24px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../public/assets/refresh_button_symbol.svg');
+  }
+
+  &:hover::before {
+    background-image: url('../../../public/assets/refresh_button_symbol_active.svg');
+  }
+
+  @media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-desktop-small) {
+    text-indent: -9999em;
+    padding-left: 24px;
+
+    &::before {
+      left: 0;
+      right: 0;
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-mobile) {
+    text-indent: -9999em;
+    padding-left: 24px;
+
+    &::before {
+      left: 0;
+      right: 0;
+    }
+  }
+}
diff --git a/app/frontend/components/common/balance.tsx b/app/frontend/components/common/balance.tsx
@@ -1,55 +1,54 @@
 import {h} from 'preact'
 import printAda from '../../helpers/printAda'
 import Conversions from './conversions'
-import {State, getActiveAccountInfo} from '../../state'
+import {getActiveAccountInfo} from '../../state'
 import {AdaIcon} from './svg'
 import actions from '../../actions'
-import {connect} from '../../libs/unistore/preact'
+import {useSelector, useActions} from '../../helpers/connect'
 import {Lovelace} from '../../types'
+import styles from './balance.module.scss'
 
-interface Props {
-  balance: Lovelace
-  reloadWalletInfo: (state: any) => void
-  conversionRates: any
-}
-
-const Balance = ({balance, reloadWalletInfo, conversionRates}: Props) => (
-  <div className="balance card">
-    <h2 className="card-title balance-title">Available balance</h2>
-    <div className="balance-row">
-      <div className="balance-amount" data-cy="SendBalanceAmount">
-        {isNaN(Number(balance)) ? balance : `${printAda(balance)}`}
-        <AdaIcon />
+const Balance = () => {
+  const {reloadWalletInfo} = useActions(actions)
+  const {conversionRates, balance} = useSelector((state) => ({
+    conversionRates: state.conversionRates && state.conversionRates.data,
+    balance: getActiveAccountInfo(state).balance as Lovelace,
+  }))
+  return (
+    <div className="balance card">
+      <h2 className={`card-title ${styles.balanceTitle}`}>Available balance</h2>
+      <div className={styles.balanceRow}>
+        <div className="balance-amount" data-cy="SendBalanceAmount">
+          {isNaN(Number(balance)) ? balance : `${printAda(balance)}`}
+          <AdaIcon />
+        </div>
+        <button
+          className={`button secondary balance ${styles.refreshButton}`}
+          onClick={reloadWalletInfo}
+        >
+          Refresh
+        </button>
       </div>
-      <button className="button secondary balance refresh" onClick={reloadWalletInfo}>
-        Refresh
-      </button>
+      {conversionRates && <Conversions balance={balance} conversionRates={conversionRates} />}
+      {/* <div className="buy-ada-partner-wrapper">
+        <a
+          className="button primary outline buy-ada-partner-link"
+          href="https://exchange.adalite.io/"
+          target="_blank"
+        >
+          Buy/Sell ADA
+        </a>
+        <span className="buy-ada-partner-logo">
+          Powered by
+          <img
+            className="buy-ada-partner-logo-img"
+            src="assets/coinswitch-logo.svg"
+            alt="CoinSwitch logo"
+          />
+        </span>
+      </div> */}
     </div>
-    {conversionRates && <Conversions balance={balance} conversionRates={conversionRates} />}
-    {/* <div className="buy-ada-partner-wrapper">
-      <a
-        className="button primary outline buy-ada-partner-link"
-        href="https://exchange.adalite.io/"
-        target="_blank"
-      >
-        Buy/Sell ADA
-      </a>
-      <span className="buy-ada-partner-logo">
-        Powered by
-        <img
-          className="buy-ada-partner-logo-img"
-          src="assets/coinswitch-logo.svg"
-          alt="CoinSwitch logo"
-        />
-      </span>
-    </div> */}
-  </div>
-)
+  )
+}
 
-export default connect(
-  (state: State) => ({
-    conversionRates: state.conversionRates && state.conversionRates.data,
-    balance: getActiveAccountInfo(state).balance,
-  }),
-  actions
-)(Balance)
+export default Balance
diff --git a/app/frontend/variables.scss b/app/frontend/variables.scss
@@ -0,0 +1,4 @@
+$breakpoint-mobile: 767px;
+$breakpoint-tablet: 1024px;
+$breakpoint-desktop-small: 1112px;
+$breakpoint-desktop-large: 1366px;
diff --git a/app/public/css/0-767px.css b/app/public/css/0-767px.css
@@ -79,16 +79,6 @@
     font-size: 14px;
   }
 
-  .button.secondary.refresh {
-    text-indent: -9999em;
-    padding-left: 24px;
-  }
-
-  .button.secondary.refresh::before {
-    left: 0;
-    right: 0;
-  }
-
   .button.secondary.withdraw {
     text-indent: -9999em;
     padding-left: 24px;

diff --git a/app/public/css/1024-1112px.css b/app/public/css/1024-1112px.css
@@ -1,14 +1,4 @@
 @media screen and (min-width: 1024px) and (max-width: 1112px) {
-  .button.secondary.refresh {
-    text-indent: -9999em;
-    padding-left: 24px;
-  }
-
-  .button.secondary.refresh::before {
-    left: 0;
-    right: 0;
-  }
-
   .button.secondary.withdraw {
     text-indent: -9999em;
     padding-left: 24px;

diff --git a/app/public/css/styles.css b/app/public/css/styles.css
@@ -388,30 +388,6 @@ p.hey {
   line-height: 24px;
 }
 
-.button.secondary.refresh {
-  padding: 10px 24px 10px 58px;
-  position: relative;
-}
-
-.button.secondary.refresh::before {
-  content: '';
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  position: absolute;
-  left: 24px;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  width: 20px;
-  height: 20px;
-  background-image: url('../assets/refresh_button_symbol.svg');
-}
-
-.button.secondary.refresh:hover::before {
-  background-image: url('../assets/refresh_button_symbol_active.svg');
-}
-
 .button.secondary.withdraw {
   padding: 10px 24px 10px 58px;
   position: relative;
@@ -2455,16 +2431,6 @@ li.main-tab input + label.selected:after {
 
 /* BALANCE */
 
-.balance-title {
-  margin-bottom: 0;
-}
-
-.balance-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .balance-amount {
   display: flex;
   font-size: 32px;

diff --git a/package.json b/package.json
@@ -84,9 +84,12 @@
     "file-loader": "^6.2.0",
     "husky": "^3.0.0",
     "lint-staged": "^9.2.0",
+    "mini-css-extract-plugin": "^1.5.0",
     "prettier": "^1.19.1",
     "prettier-eslint-cli": "^5.0.0",
     "release-it": "^13.6.2",
+    "sass": "^1.32.11",
+    "sass-loader": "^10.1.1",
     "style-loader": "^2.0.0",
     "ts-loader": "^6.2.1",
     "typescript": "3.9.2",

diff --git a/server/index.js b/server/index.js
@@ -121,6 +121,7 @@ app.get('*', (req, res) => {
           <link rel="stylesheet" type="text/css" href="css/768-1024px.css">
           <link rel="stylesheet" type="text/css" href="css/1024-1112px.css">
           <link rel="icon" type="image/ico" href="assets/favicon.ico">
+          ${isProd ? '<link rel="stylesheet" type="text/css" href="css/modules.css">' : ''}
           ${
   backendConfig.ADALITE_TREZOR_CONNECT_URL
     ? `<script src="${backendConfig.ADALITE_TREZOR_CONNECT_URL}"></script>`

diff --git a/webpack.build.config.js b/webpack.build.config.js
@@ -1,12 +1,12 @@
 const webpack = require('webpack')
 const glob = require('glob')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const env = process.env.NODE_ENV
 const isProd = env === 'production'
 
 let entry = [
   'babel-regenerator-runtime', // babel-regenerator-runtime is required for ledger
-  './app/frontend/walletApp.js',
 ]
 if (!isProd) {
   /*
@@ -30,15 +30,18 @@ if (!isProd) {
   entry = entry.concat(cssPathnames)
   entry.push('webpack-hot-middleware/client?path=/__webpack_hmr')
 }
+// This one must be after global css, so that css-modules which are imported from js
+// can override global css
+entry.push('./app/frontend/walletApp.js')
 
 module.exports = {
   entry,
   output: {
-    filename: 'frontend.bundle.js',
+    filename: 'js/frontend.bundle.js',
     libraryTarget: 'var',
     library: 'CardanoFrontend',
-    path: `${__dirname}/app/dist/js`,
-    publicPath: '/js/',
+    path: `${__dirname}/app/dist`,
+    publicPath: '/',
   },
   optimization: {
     minimize: false,
@@ -59,9 +62,32 @@ module.exports = {
         loader: 'ts-loader',
         exclude: /node_modules/,
       },
+      // For hot reloading of globally injected css
       {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        test: /^((?!\.module).)*\.css$/,
+        use: [!isProd && 'style-loader', 'css-loader'].filter(Boolean),
+      },
+      {
+        test: /\.module\.scss$/,
+        use: [
+          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]__[hash:base64:5]',
+              },
+              sourceMap: !isProd,
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: !isProd,
+            },
+          },
+        ],
       },
       {
         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
@@ -110,5 +136,8 @@ module.exports = {
   },
   plugins: [
     !isProd && new webpack.HotModuleReplacementPlugin(),
+    isProd && new MiniCssExtractPlugin({
+      filename: 'css/modules.css',
+    }),
   ].filter(Boolean),
 }