build: update cerebro core (#591)

* build(electron): migrate to electron v20

re #590

* build(electron-builder): update electron builder to v23

re #590

* chore: rename to cssmodules

* build(webpack): migrate to webpack 5

re #590

app/main/components/Cerebro/index.js

@@ -22,7 +22,7 @@ import * as searchActions from 'main/actions/search'
 import MainInput from '../MainInput'
 import ResultsList from '../ResultsList'
 import StatusBar from '../StatusBar'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const remote = process.type === 'browser'
   ? { getCurrentWindow: BrowserWindow.getFocusedWindow }

app/main/components/MainInput/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 class MainInput extends Component {
   focus() {

app/main/components/ResultsList/Row/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { SmartIcon } from '@cerebroapp/cerebro-ui'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 class Row extends Component {
   classNames() {

app/main/components/ResultsList/index.js

@@ -4,14 +4,14 @@ import { VirtualScroll } from 'react-virtualized'
 import { RESULT_HEIGHT } from 'main/constants/ui'
 
 import Row from './Row'
-import styles from './styles.css'
-
+import styles from './styles.module.css'
 
 class ResultsList extends Component {
   constructor(props) {
     super(props)
     this.rowRenderer = this.rowRenderer.bind(this)
   }
+
   rowRenderer({ index }) {
     const result = this.props.results[index]
     const attrs = {
@@ -20,7 +20,7 @@ class ResultsList extends Component {
       // In some cases action should be executed and window should be closed
       // In some cases we should autocomplete value
       selected: index === this.props.selected,
-      onSelect: event => this.props.onSelect(result, event),
+      onSelect: (event) => this.props.onSelect(result, event),
       // Move selection to item under cursor
       onMouseMove: (event) => {
         const { selected, mainInputFocused, onItemHover } = this.props
@@ -38,6 +38,7 @@ class ResultsList extends Component {
     }
     return <Row {...attrs} />
   }
+
   renderPreview() {
     const selected = this.props.results[this.props.selected]
     if (!selected.getPreview) {
@@ -50,8 +51,11 @@ class ResultsList extends Component {
     }
     return preview
   }
+
   render() {
-    const { results, selected, visibleResults, mainInputFocused } = this.props
+    const {
+      results, selected, visibleResults, mainInputFocused
+    } = this.props
     const classNames = [
       styles.resultsList,
       mainInputFocused ? styles.focused : styles.unfocused
@@ -72,7 +76,7 @@ class ResultsList extends Component {
           width={(results[selected] !== undefined && results[selected].getPreview) ? 250 : 10000}
           scrollToIndex={selected}
           // Needed to force update of VirtualScroll
-          titles={results.map(result => result.title)}
+          titles={results.map((result) => result.title)}
           // Disable accesebility of VirtualScroll by tab
           tabIndex={null}
         />

app/main/components/StatusBar/index.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
-const StatusBar = ({ value }) => (
-  <div className={styles.statusBar}>{value}</div>
-)
+function StatusBar({ value }) {
+  return <div className={styles.statusBar}>{value}</div>
+}
 
 StatusBar.propTypes = {
   value: PropTypes.string

app/plugins/core/plugins/Preview/Settings.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import config from 'lib/config'
 import FormItem from './FormItem'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -37,7 +37,7 @@ export default class Settings extends Component {
         key={key}
         label={label || key}
         value={value}
-        onChange={newValue => this.changeSetting(this.props.name, key, newValue)}
+        onChange={(newValue) => this.changeSetting(this.props.name, key, newValue)}
         {...restProps}
       />
     )

app/plugins/core/plugins/Preview/index.js

@@ -8,7 +8,7 @@ import ReactMarkdown from 'react-markdown'
 import ActionButton from './ActionButton.js'
 import Settings from './Settings'
 import getReadme from '../getReadme'
-import styles from './styles.css'
+import styles from './styles.module.css'
 import * as format from '../format'
 
 const isRelative = (src) => !src.match(/^(https?:|data:)/)

app/plugins/core/plugins/StatusBar/index.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
-const StatusBar = ({ value }) => (
-  <div className={styles.statusBar}>{value}</div>
-)
+function StatusBar({ value }) {
+  return <div className={styles.statusBar}>{value}</div>
+}
 
 StatusBar.propTypes = {
   value: PropTypes.string.isRequired

app/plugins/core/settings/Settings/Hotkey.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const ASCII = {
   188: '44',

app/plugins/core/settings/Settings/index.js

@@ -5,7 +5,7 @@ import loadThemes from 'lib/loadThemes'
 
 import Hotkey from './Hotkey'
 import countries from './countries'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const {
   Select, Checkbox, Wrapper, Text

package.json

@@ -151,12 +151,12 @@
     "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
     "commitizen": "4.2.5",
-    "copy-webpack-plugin": "6.4.0",
+    "copy-webpack-plugin": "11.0.0",
     "cross-env": "7.0.3",
-    "css-loader": "5.2.7",
+    "css-loader": "6.7.1",
     "cz-conventional-changelog": "3.3.0",
-    "electron": "19.0.14",
-    "electron-builder": "22.14.13",
+    "electron": "20.1.1",
+    "electron-builder": "23.3.3",
     "eslint": "8.23.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-plugin-import": "2.26.0",
@@ -168,14 +168,14 @@
     "husky": "8.0.1",
     "jest": "27.5.1",
     "lodash-webpack-plugin": "0.11.6",
-    "mini-css-extract-plugin": "1.6.2",
+    "mini-css-extract-plugin": "2.6.1",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.16",
-    "postcss-loader": "4.2.0",
+    "postcss-loader": "7.0.1",
     "postcss-nested": "5.0.6",
-    "style-loader": "2.0.0",
+    "style-loader": "3.3.1",
     "url-loader": "4.1.1",
-    "webpack": "4.46.0",
+    "webpack": "5.74.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-middleware": "5.3.3",
     "webpack-hot-middleware": "2.25.2",

webpack.config.base.js

@@ -16,7 +16,7 @@ module.exports = {
       exclude: /node_modules/
     }, {
       test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
-      use: ['url-loader']
+      type: 'asset/inline'
     }]
   },
   output: {
@@ -36,7 +36,7 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [{
         from: 'app/main/css/themes/*',
-        to: './main/css/themes/[name].[ext]'
+        to: './main/css/themes/[name][ext]'
       }]
     })
   ],

webpack.config.development.js

@@ -30,33 +30,26 @@ const config = {
       ...baseConfig.module.rules,
 
       {
-        test: /global\.css$/,
-        use: [
-          'style-loader',
-          'css-loader?sourceMap'
-        ]
-      },
-
-      {
-        test: /^((?!global).)*\.css$/,
+        test: /\.css$/,
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
-              import: true,
-              modules: {
-                localIdentName: '[name]__[local]___[hash:base64:5]',
-                // auto: true,
-              },
-              esModule: false,
+              modules: true,
               sourceMap: true,
               importLoaders: 1,
-            }
+            },
           },
-          'postcss-loader'
-        ]
-      }
+          'postcss-loader',
+        ],
+        include: /\.module\.s?(c|a)ss$/,
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
+        exclude: /\.module\.css$/,
+      },
     ]
   },
 

webpack.config.electron.js

@@ -18,10 +18,5 @@ module.exports = {
     filename: './main.js'
   },
 
-  target: 'electron-main',
-
-  node: {
-    __dirname: false,
-    __filename: false
-  },
+  target: 'electron-main'
 }

webpack.config.production.js

@@ -28,30 +28,26 @@ const config = {
       ...baseConfig.module.rules,
 
       {
-        test: /global\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
-      },
-
-      {
-        test: /^((?!global).)*\.css$/,
+        test: /\.css$/,
         use: [
           { loader: MiniCssExtractPlugin.loader },
           {
             loader: 'css-loader',
             options: {
-              import: true,
-              modules: {
-                localIdentName: '[name]__[local]___[hash:base64:5]',
-                // auto: true,
-              },
-              esModule: false,
+              modules: true,
               sourceMap: true,
               importLoaders: 1,
-            }
+            },
           },
-          { loader: 'postcss-loader' }
-        ]
-      }
+          'postcss-loader',
+        ],
+        include: /\.module\.css$/,
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+        exclude: /\.module\.css$/,
+      },
     ]
   },