We'd like for the CSS to control the layout all the way down to JS-powered generated content, like galerie.html.
Right now, CSS (Sass) dimensions are duplicated in generators/src/_utils/settings.js, then required from generators/src/gallery/index.js (and others).
We'd like to reuse Sass variables to dynamically compute the appropriate thumbnails' width, but we cannot do that client-side as there are no more .scss files to parse (only CSS), no support for CSS module and no way to use node-sass anyway. It simply can't be done with gallery/index.js -> galerie.html.
Therefore, gallery/index.js should be fed with a hard-coded, pre-computed value for the thumbnails' width.
In order to do so, Webpack should:
extract relevant CSS variables from Sass through a settings/_settings.export.scss exposing a CSS module — basically like so;
compute the thumbnails' width based on those variables, using the Shell Plugin (onBuildStart);
write the result to a JS config file (using some kind of JS templating; could be a simple search & replace).
The resulting JS file then may be required by gallery/index.js (and others), not minding whether code is running server-side or client-side.
We'd like for the CSS to control the layout all the way down to JS-powered generated content, like galerie.html.
Right now, CSS (Sass) dimensions are duplicated in generators/src/_utils/settings.js, then required from generators/src/gallery/index.js (and others).
We'd like to reuse Sass variables to dynamically compute the appropriate thumbnails' width, but we cannot do that client-side as there are no more .scss files to parse (only CSS), no support for CSS module and no way to use node-sass anyway. It simply can't be done with gallery/index.js -> galerie.html.
Therefore, gallery/index.js should be fed with a hard-coded, pre-computed value for the thumbnails' width.
In order to do so, Webpack should:
onBuildStart);The resulting JS file then may be required by gallery/index.js (and others), not minding whether code is running server-side or client-side.