Skip to content

Refactor: Refresh the CSS in dev mode #1814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
samuel-duhaime merged 1 commit into from
Feb 25, 2026
+95 −38
Merged

Refactor: Refresh the CSS in dev mode #1814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/transition-frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
"rimraf": "^6.1.2",
"sass": "^1.94.2",
"sass-loader": "^16.0.6",
"style-loader": "^4.0.0",
"ts-jest": "^29.4.6",
"ts-loader": "^9.5.4",
"ts-shader-loader": "^2.0.2",
Expand Down
121 changes: 86 additions & 35 deletions packages/transition-frontend/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ const configuration = require('chaire-lib-backend/lib/config/server.config');
// Extract from the config all options that we should not send to the frontend.
// The `{ ...config }` will be sent to the frontend
// TODO This won't be necessary once we have frontend and backend configuration separated
const { trRoutingCacheAllScenarios, routing, ...config } = configuration.default ? configuration.default : configuration;
const { trRoutingCacheAllScenarios, routing, ...config } = configuration.default
? configuration.default
: configuration;

// Public directory from which files are served
const publicDirectory = path.join(__dirname, '..', '..', 'public');
Expand All @@ -41,18 +43,29 @@ module.exports = (env) => {
const isProduction = process.env.NODE_ENV === 'production';

// Make sure all builds have different names if not a production bundle
const bundleFileName = isProduction ? `transition-${config.projectShortname}-bundle-${process.env.NODE_ENV}.[contenthash].js` : `transition-${config.projectShortname}-bundle-${process.env.NODE_ENV}.dev.js`;
const styleFileName = isProduction ? `transition-${config.projectShortname}-styles.[contenthash].css` : `transition-${config.projectShortname}-styles.dev.css`;
const bundleFileName = isProduction
? `transition-${config.projectShortname}-bundle-${process.env.NODE_ENV}.[contenthash].js`
: `transition-${config.projectShortname}-bundle-${process.env.NODE_ENV}.dev.js`;
const styleFileName = isProduction
? `transition-${config.projectShortname}-styles.[contenthash].css`
: `transition-${config.projectShortname}-styles.dev.css`;
// HTML main file name
const htmlFileName = path.join(`index-${config.projectShortname}.html`);

// In dev, style-loader injects CSS via <style> so SCSS changes apply after reload without a separate .css file
const styleLoader = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
const chaireLibFrontendRoot = path.dirname(require.resolve('chaire-lib-frontend/package.json'));
const transitionFrontendRoot = __dirname;

const languages = config.languages || ['fr', 'en'];
const languagesFilter = `/${languages.join('|')}/`;

// TODO Custom styles and locales should be set in config (#419, #420)
const customStylesFilePath = `${config.projectDir}/styles/styles.scss`;
const customLocalesFilePath = `${config.projectDir}/locales`;
const entry = fs.existsSync('./' + customStylesFilePath) ? [entryFileName, './' + customStylesFilePath] : [entryFileName];
const entry = fs.existsSync('./' + customStylesFilePath)
? [entryFileName, './' + customStylesFilePath]
: [entryFileName];
const includeDirectories = [
path.join(__dirname, 'lib'),

Expand All @@ -64,7 +77,7 @@ module.exports = (env) => {
// Controls which information to display (see https://webpack.js.org/configuration/stats/)
stats: {
errorDetails: true,
children: true,
children: true
},
node: {
// global will be deprecated at next major release, see where it is being used
Expand All @@ -78,15 +91,34 @@ module.exports = (env) => {
publicPath: '/dist/'
},
watchOptions: {
ignored: ['node_modules/**'],
// In dev, watch chaire-lib-frontend so CSS/TS changes trigger rebuild
// Exclude lib/styles from chaire-lib-frontend and transition-frontend since we use alias to point to src/styles
ignored: isProduction
? // In production, ignore all node_modules to avoid rebuilding the whole project
new RegExp('node_modules/')
: /* Ignore all node_modules except chaire-lib-frontend,
and also specifically ignore the lib/styles directory of chaire-lib-frontend and transition-frontend
(which we override via an alias to src/styles).
Paths are normalized and escaped: .replace(/\\/g,'/') for forward slashes and
.replace(/[.*+?^${}()|[\]\\]/g,'\\$&') escapes regex metacharacters (. * + ? ^ $ { } ( ) | [ ] \)
so the path is matched literally (e.g. paths with parentheses like "Program Files (x86)"). */
new RegExp(
Copy link
Collaborator

@tahini tahini Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe describe what each replace does? especially the last one.... .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}

Copy link
Contributor Author

@samuel-duhaime samuel-duhaime Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tahini Okay, done. :)

`(node_modules\\/(?!chaire-lib-frontend)|${path
.join(chaireLibFrontendRoot, 'lib', 'styles')
.replace(/\\/g, '/')
.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}|${path
.join(transitionFrontendRoot, 'lib', 'styles')
.replace(/\\/g, '/')
.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`
),
aggregateTimeout: 600
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
exclude: /node_modules/
},
{
use: 'json-loader',
Expand All @@ -104,7 +136,7 @@ module.exports = (env) => {
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
styleLoader, // In dev, style-loader injects CSS via <style> so SCSS changes apply after reload without a separate .css file
{
loader: 'css-loader',
options: {
Expand All @@ -124,7 +156,7 @@ module.exports = (env) => {
loader: '@alienfast/i18next-loader',
options: {
basenameAsNamespace: true,
overrides: (fs.existsSync('./' + customLocalesFilePath) ? ['../' + customLocalesFilePath] : [])
overrides: fs.existsSync('./' + customLocalesFilePath) ? ['../' + customLocalesFilePath] : []
}
}
]
Expand All @@ -133,32 +165,38 @@ module.exports = (env) => {
new CleanWebpackPlugin({
dry: !isProduction,
verbose: true,
cleanAfterEveryBuildPatterns: ['**/*', '!images/**', '!*.html'],
cleanAfterEveryBuildPatterns: ['**/*', '!images/**', '!*.html']
}),
new HtmlWebpackPlugin({
filename: htmlFileName,
template: path.join(publicDirectory, 'index.html'),
template: path.join(publicDirectory, 'index.html')
}),
new MiniCssExtractPlugin({
filename: styleFileName
}),
new webpack.DefinePlugin({
'process.env': {
'IS_BROWSER': JSON.stringify(true),
'HOST': JSON.stringify(process.env.HOST),
'TRROUTING_HOST': JSON.stringify(process.env.TRROUTING_HOST),
'PROJECT_SOURCE': JSON.stringify(process.env.PROJECT_SOURCE),
'IS_TESTING': JSON.stringify(process.env.NODE_ENV === 'test'),
'GOOGLE_API_KEY': JSON.stringify(process.env.GOOGLE_API_KEY),
'CUSTOM_RASTER_TILES_XYZ_URL': JSON.stringify(process.env.CUSTOM_RASTER_TILES_XYZ_URL || config.customRasterTilesXyzUrl),
'CUSTOM_RASTER_TILES_MIN_ZOOM': JSON.stringify(process.env.CUSTOM_RASTER_TILES_MIN_ZOOM || config.customRasterTilesMinZoom),
'CUSTOM_RASTER_TILES_MAX_ZOOM': JSON.stringify(process.env.CUSTOM_RASTER_TILES_MAX_ZOOM || config.customRasterTilesMaxZoom)
IS_BROWSER: JSON.stringify(true),
HOST: JSON.stringify(process.env.HOST),
TRROUTING_HOST: JSON.stringify(process.env.TRROUTING_HOST),
PROJECT_SOURCE: JSON.stringify(process.env.PROJECT_SOURCE),
IS_TESTING: JSON.stringify(process.env.NODE_ENV === 'test'),
GOOGLE_API_KEY: JSON.stringify(process.env.GOOGLE_API_KEY),
CUSTOM_RASTER_TILES_XYZ_URL: JSON.stringify(
process.env.CUSTOM_RASTER_TILES_XYZ_URL || config.customRasterTilesXyzUrl
),
CUSTOM_RASTER_TILES_MIN_ZOOM: JSON.stringify(
process.env.CUSTOM_RASTER_TILES_MIN_ZOOM || config.customRasterTilesMinZoom
),
CUSTOM_RASTER_TILES_MAX_ZOOM: JSON.stringify(
process.env.CUSTOM_RASTER_TILES_MAX_ZOOM || config.customRasterTilesMaxZoom
)
},
'__CONFIG__': JSON.stringify({
__CONFIG__: JSON.stringify({
...config
})
}),
new webpack.optimize.AggressiveMergingPlugin(),//Merge chunks
new webpack.optimize.AggressiveMergingPlugin(), //Merge chunks
new CompressionPlugin({
filename: '[path][base].gz[query]',
algorithm: 'gzip',
Expand All @@ -168,24 +206,37 @@ module.exports = (env) => {
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, new RegExp(languagesFilter)),
new webpack.ContextReplacementPlugin(/date\-fns[\/\\]/, new RegExp(languagesFilter)),
new CopyWebpackPlugin(
{
patterns: [
{
context: path.join(__dirname, 'lib', 'assets'),
from: '**/*',
to: '',
noErrorOnMissing: true
}
]
}
)
new CopyWebpackPlugin({
patterns: [
{
context: path.join(__dirname, 'lib', 'assets'),
from: '**/*',
to: '',
noErrorOnMissing: true
}
]
})
],
resolve: {
mainFields: ['browser', 'main', 'module'],
modules: ['node_modules'],
extensions: ['.json', '.js', '.ts', '.tsx'],
fallback: { path: false },
// In dev, read SCSS from chaire-lib-frontend and transition-frontend source so changes apply without running copy-files
alias: isProduction
? {}
: {
[path.join(chaireLibFrontendRoot, 'lib', 'styles')]: path.join(
chaireLibFrontendRoot,
'src',
'styles'
),
[path.join(transitionFrontendRoot, 'lib', 'styles')]: path.join(
transitionFrontendRoot,
'src',
'styles'
)
},
fallback: { path: false }
},
devtool: isProduction ? 'cheap-source-map' : 'eval-source-map',
devServer: {
Expand Down
11 changes: 8 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10359,9 +10359,9 @@ min-indent@^1.0.0:
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==

mini-css-extract-plugin@^2.9.4:
version "2.9.4"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.4.tgz#cafa1a42f8c71357f49cd1566810d74ff1cb0200"
integrity sha512-ZWYT7ln73Hptxqxk2DxPU9MmapXRhxkJD6tkSR04dnQxm8BGu2hzgKLugK5yySD97u/8yy7Ma7E76k9ZdvtjkQ==
version "2.10.0"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.10.0.tgz#d801a1f388f8fac7333c01b7c15c9222c811def4"
integrity sha512-540P2c5dYnJlyJxTaSloliZexv8rji6rY8FhQN+WF/82iHQfA23j/xtJx97L+mXOML27EqksSek/g4eK7jaL3g==
dependencies:
schema-utils "^4.0.0"
tapable "^2.2.1"
Expand Down Expand Up @@ -12853,6 +12853,11 @@ strnum@^2.1.0:
resolved "https://registry.yarnpkg.com/strnum/-/strnum-2.1.2.tgz#a5e00ba66ab25f9cafa3726b567ce7a49170937a"
integrity sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==

style-loader@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==

style-to-js@^1.0.0:
version "1.1.21"
resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.21.tgz#2908941187f857e79e28e9cd78008b9a0b3e0e8d"
Expand Down
Loading