Shen ✅ @shen

@Gargron Can you tell me a bit about 's CSS buildchain, and how it works? I've never used webpack before, and I'm a bit confused by it. I realized I wrote myself into a corner this morning, and I actually would have to do server-side sass compilations of some sort, since I cannot cleanly replicate the lighten() and darken() functions in javascript.

· Web · 0 · 0

@Gargron I would be very grateful if you can provide me with an minimum example that compiles all the .scss files in /mastodon/tree/master/app/javascript/styles into common.css and default.css. This way I can replicate the tooling serverside.

@shen Well, there are the SCSS files, and when you run webpack, webpack converts them to CSS. You can run webpack in development like bin/webpack-dev-server (you get live reloads) or bin/webpack (just one time compilation), executing rake assets:precompile also executes webpack

@Gargron It looks like mastodon's webpack configuration are in mastodon/config/webpack/. Looking at production.js, however, I can't actually find the piece of code that takes the sass files and compiles them to default.css or common.css. Can you point me to the right webpack file?

@shen webpack defines "loaders" for various file types, e.g. there's a loader for scss files:

the way this works tho, this is used only for an entry point, e.g. some JS file does an import of a .scss file, beyond that the loader is not needed as all the other scss files are loaded within scss itself (@ import statements)

@shen and then webpack tends to generate everything into a single JS bundle, even css, so there is a special plugin that defines that css should be extracted into separate files:

@shen the final .css files are determined by chunking, and that's a bit arcane for me and has been made even more so by addition of themes, it's not code i wrote.

@Gargron Looking at webpack/loaders/sass.js and webpack/configuration.js, I'm still not quite sure where the "entry" point for the sass files are. Is it application.scss? If I clone everything in the app/javascript/styles folder, and run a minimal webpack sass loader on it, would I get output files that are functionally identical to common.css and default.css? Thank you so much for the answers!

@shen hm the entry points used to be each file within app/javascript/packs directory, I don't know how themes affected that

Maybe these people know: @bea @unarist @nightpool

@Gargron @shen @unarist @nightpool 😅

i'm afraid you've got the wrong girl

i have no clue

@gargron @shen @bea @unarist @nightpool i can help!!! i actually wrote the first version of the theme code (it may have been modified since)

@shen @gargron in config/webpack/shared.js, which is the code common between all build configurations of mastodon, one of the tasks of the file is creating a list of all "entry points", which are files/paths where webpack starts looking for things to package


@gargron @shen
the final value of the entry points array (module.exports.entry) comes from three sources:
- packPaths, which is loaded from the settings
- localePackPaths, which is from generateLocalPacks
- themePaths, which is created by loading the instance's config/themes.yml and reading out all of the paths in there

entryPacks is the preliminary entry point list, created from the first two. it's then merged with themePaths (after some modification) on line 35 of shared.js


@shen @gargron so to sum it all up and answer the original question, the SASS entry points are any files listed in config/themes.yml, which by default only has styles/application.scss

@gargron @shen and to clarify the relationship between entry points and chunks, i'm under the impression that there's one resulting pack generated for each entry point, but i'm fairly new to webpack and may be missing some details, especially regarding mastodon's specific pipeline

@chr @shen oh yeah there's at least one resulting bundle for each entrypoint, and then *additionally* there are chunks that are common to all packs, that's what "common" is (i think that's the only one?)

@chr @Gargron Thank you guys for helping me out with this. I figured out what webpack was doing with sass compilation, but after a few tests I realized it wasn't feasible to do server-side asset compilation, due to the latency involved. It takes at least a couple seconds for the compilation itself, followed by the internet round-trip, and the user experience would be horrible. I'm currently trying to implement chromatic lightening/darkening in javascript client side instead 😄

@gargron @shen @chr basically, you can run a minimal sass compiler on every file in themes.yml. Each theme is it's own pack and is processed as such by webpack.