chore: use scss

app.config.environment.dev.js

+'use strict'
+
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const { useHotReload, devtool } = require('cozy-scripts/config/webpack.vars')
+
+let plugins = [
+  new webpack.DefinePlugin({
+    __DEVELOPMENT__: true
+  })
+]
+
+// In development, the bar and cozy-client-js are provided automatically. We use the ProvidePlugin
+// since it allows us to use in production the cozy.bar and cozy.client declared by the <script />
+// line injected by the stack, while in development to have it "served" from
+// our node_modules
+const stackProvidedLibsConfig = {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development'),
+      __IS_ALPHA__: true,
+      __DEVELOPMENT__: true,
+      __STACK_ASSETS__: true,
+      __PIWIK_TRACKER_URL__: JSON.stringify('https://statweb.grandlyon.com/'),
+      __PIWIK_SITEID__: 0
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /cozy-bar(\/|\\)dist(\/|\\)cozy-bar\.min\.js$/,
+        // Automatically import the CSS if the JS is imported.
+        // imports-loader@0.8.0 works but imports-loader@1.0.0 does not
+        loader: 'imports-loader?css=./cozy-bar.min.css'
+      }
+    ]
+  }
+}
+
+const output = {}
+if (useHotReload) {
+  plugins = plugins.concat([new webpack.HotModuleReplacementPlugin()])
+  output.globalObject = 'this'
+}
+
+module.exports = merge(
+  {
+    devtool: devtool || 'cheap-module-eval-source-map',
+    mode: 'development',
+    externals: ['cozy'],
+    plugins,
+    output,
+    optimization: {
+      removeAvailableModules: false,
+      removeEmptyChunks: false
+    }
+  },
+  stackProvidedLibsConfig
+)

app.config.js

+'use strict'
+
+/**
+ * This file overrides the default cozy webpack config to specify a custom react config.
+ * This react config enables the use of TypeScript.
+ *
+ * @override node_modules/cozy-scripts/config/webpack.bundle.default.js
+ */
+
+const merge = require('webpack-merge')
+const {
+  environment,
+  target,
+  addAnalyzer
+} = require('cozy-scripts/config/webpack.vars')
+
+const configs = [
+  require('cozy-scripts/config/webpack.config.base'),
+  require('cozy-scripts/config/webpack.config.chunks'),
+  require('./app.config.react'), // Override the react config
+  require('cozy-scripts/config/webpack.config.cozy-ui'),
+  require('cozy-scripts/config/webpack.config.cozy-ui.react'),
+  require('cozy-scripts/config/webpack.config.intents'),
+  require('cozy-scripts/config/webpack.config.public'),
+  require('cozy-scripts/config/webpack.config.pictures'),
+  require('cozy-scripts/config/webpack.config.vendors'),
+  require('cozy-scripts/config/webpack.config.manifest'),
+  require('cozy-scripts/config/webpack.config.progress'),
+  addAnalyzer ? require('cozy-scripts/config/webpack.config.analyzer') : null,
+  require('./app.config.services'), // Override the services config
+  require(`cozy-scripts/config/webpack.target.${target}`)
+]
+
+if (environment === 'production') {
+  configs.push(require('./app.config.environment.prod'))
+} else {
+  configs.push(require('./app.config.environment.dev'))
+}
+
+// module.exports = merge.apply(null, configs)
+// eslint-disable-next-line prefer-spread
+module.exports = [merge.apply(null, configs)] // cozy builder expects an array

app.config.react.js

+'use strict'
+
+/**
+ * This file overrides the default react webpack config.
+ * This react config enables the use of TypeScript.
+ *
+ * @override node_modules/cozy-scripts/config/webpack.config.react.js
+ */
+
+const webpack = require('webpack')
+const path = require('path')
+const { useHotReload } = require('cozy-scripts/config/webpack.vars')
+const CopyPlugin = require('copy-webpack-plugin')
+const CTS = require('cozy-scripts/utils/constants.js')
+const babelConf = require('./babel.config')
+
+process.env[CTS.ENTRY_EXT] = '.tsx' // Replaces .jsx
+
+module.exports = {
+  resolve: {
+    extensions: ['.jsx', '.tsx', '.ts', '.scss'] // Add TS extensions
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/, // Add TS extensions
+        exclude: /node_modules(\/|\\)(?!(cozy-ui))/,
+        loader: require.resolve('cozy-scripts/node_modules/babel-loader'), // Add full path
+        options: {
+          cacheDirectory: 'node_modules/.cache/babel-loader/react',
+          presets: babelConf.presets,
+          plugins: useHotReload ? babelConf.plugins : []
+        }
+      },
+      {
+        test: path.resolve(__dirname, 'node_modules/uglify-js/tools/node.js'),
+        loader: 'null-loader'
+      },
+      {
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader']
+      }
+    ]
+  },
+  // Necessary for cozy-ui during Preact -> React apps transition
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: `./src/targets/vendor/assets/icon.svg`,
+          to: 'public/'
+        },
+        {
+          from: `./src/targets/vendor/assets/favicon*`,
+          to: 'public/',
+          flatten: true
+        },
+        {
+          from: `./src/targets/vendor/assets/apple-touch-icon.png`,
+          to: 'public/apple-touch-icon.png'
+        }
+      ]
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        USE_REACT: 'true'
+      }
+    })
+  ]
+}

app.config.services.js

+/* eslint-disable @typescript-eslint/no-var-requires */
+'use strict'
+
+/**
+ * This file overrides the default services webpack config.
+ * This services config enables the use of TypeScript.
+ *
+ * @override node_modules/cozy-scripts/config/webpack.config.services.js
+ */
+
+const webpack = require('webpack')
+const path = require('path')
+const fs = require('fs-extra')
+const paths = require('cozy-scripts/utils/paths')
+const {
+  eslintFix,
+  makeFilename,
+  target
+} = require('cozy-scripts/config/webpack.vars')
+
+const servicesFolder = paths.appServicesFolder()
+const servicesPaths = fs.existsSync(servicesFolder)
+  ? fs.readdirSync(servicesFolder)
+  : []
+
+const servicesEntries = {}
+servicesPaths.forEach(file => {
+  if (!file.match(/^[^.]*.ts$/)) return
+  const filename = file.match(/^([^.]*).ts$/)[1]
+  servicesEntries[filename] = path.resolve(path.join(servicesFolder, file))
+})
+
+const config = {
+  __mergeStrategy: {
+    smart: false,
+    strategy: {
+      plugins: 'replace',
+      output: 'replace',
+      entry: 'replace',
+      optimization: 'replace',
+      module: 'replace',
+      externals: 'replace'
+    }
+  },
+  entry: servicesEntries,
+  output: {
+    path: paths.appServicesBuild(),
+    filename: `${makeFilename(false)}.js`
+  },
+  target: 'node',
+  optimization: {}, // reset optimization property
+  devtool: false,
+  externals: [], // reset externals property
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.ts$/,
+        loader: require.resolve('cozy-scripts/node_modules/eslint-loader'),
+        exclude: /node_modules/,
+        options: {
+          extends: ['cozy-app'],
+          fix: eslintFix,
+          emitWarning: true
+        }
+      },
+      {
+        test: path.resolve(__dirname, 'node_modules/uglify-js/tools/node.js'),
+        loader: 'null-loader'
+      },
+      {
+        test: /\.ts$/,
+        exclude: /(node_modules|cozy-(bar|client-js))/,
+        loader: require.resolve('cozy-scripts/node_modules/babel-loader'),
+        options: {
+          cacheDirectory: 'cozy-scripts/node_modules/.cache/babel-loader/node',
+          babelrc: false,
+          presets: [['cozy-app', { node: true, react: false }]]
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __TARGET__: JSON.stringify('services'),
+      __IS_ALPHA__: false
+    })
+  ]
+}
+
+/* We don't build services if no services and if on mobile build */
+const addServicesConfig =
+  target === 'browser' && Object.keys(servicesEntries).length
+
+// only for browser target (services are usable only on cozy-stack)
+module.exports = addServicesConfig ? { multiple: { services: config } } : {}

package.json

@@ -34,11 +34,14 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "babel-preset-cozy-app": "^2.0.4",
+    "copy-webpack-plugin": "6.4.1",
     "cozy-bar": "7.16.0",
     "eslint-config-cozy-app": "^5.2.0",
     "git-directory-deploy": "1.5.1",
     "react-hot-loader": "4.13.0",
     "react-test-renderer": "18.2.0",
+    "sass": "^1.49.11",
+    "sass-loader": "^8.0.0",
     "typescript": "^5.5.4"
   },
   "dependencies": {
@@ -51,6 +54,7 @@
     "cozy-logger": "^1.9.1",
     "cozy-scripts": "8.3.0",
     "cozy-ui": "^78.1.1",
+    "null-loader": "^4.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.4.5"

src/components/Actions/Actions.css

-.actions {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-}
-
-.bloc {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  justify-content: center;
-  padding: 1rem;
-  border-radius: 20px;
-  color: white;
-  font-weight: 700;
-}
-
-.progress {
-  background-color: var(--orange);
-}

src/components/Actions/Actions.scss

+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  .bloc {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    padding: 1rem;
+    border-radius: 20px;
+    color: white;
+    font-weight: 700;
+  }
+
+  .progress {
+    background-color: var(--orange);
+  }
+}

src/components/Actions/Actions.tsx

 import React from 'react'
-import './Actions.css'
+import './Actions.scss'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
 export const Actions = () => {

src/components/Dashboard/Dashboard.css

-.dashboard {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-}
-
-.bloc {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  padding: 1rem;
-  border-radius: 20px;
-  color: white;
-  font-weight: 700;
-}
-
-.meeting {
-  background-color: var(--orange);
-}
-
-.badge {
-  background-color: var(--yellow);
-}
-
-.axes {
-  background-color: var(--blue-light);
-  color: black;
-}
-
-.objectives {
-  background-color: var(--blue);
-}
-
-.actions {
-  background-color: var(--blue-dark);
-}

src/components/Dashboard/Dashboard.scss

+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  .bloc {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    padding: 1rem;
+    border-radius: 20px;
+    color: white;
+    font-weight: 700;
+  }
+
+  .meeting {
+    background-color: var(--orange);
+  }
+
+  .badge {
+    background-color: var(--yellow);
+  }
+
+  .axes {
+    background-color: var(--blue-light);
+    color: black;
+  }
+
+  .objectives {
+    background-color: var(--blue);
+  }
+
+  .actions {
+    background-color: var(--blue-dark);
+  }
+}

src/components/Dashboard/Dashboard.tsx

 import React, { useEffect } from 'react'
-import './Dashboard.css'
+import './Dashboard.scss'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
 export const Dashboard = () => {