Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

support override main css file

Browse source
This commit is contained in:
Bruno Windels 2021-03-25 18:54:10 +01:00
parent cd615265f8
commit 2a0045bed7
2 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
doc/SKINNING.md
View file

@ -1,4 +1,4 @@
# Skinning # Replacing javascript files
Any source file can be replaced at build time by mapping the path in a JSON file passed in to the build command, e.g. `yarn build --override-imports customizations.json`. The file should be written like so: Any source file can be replaced at build time by mapping the path in a JSON file passed in to the build command, e.g. `yarn build --override-imports customizations.json`. The file should be written like so:
@ -10,3 +10,13 @@ Any source file can be replaced at build time by mapping the path in a JSON file
The paths are relative to the location of the mapping file, but the mapping file should be in a parent directory of the files you want to replace. The paths are relative to the location of the mapping file, but the mapping file should be in a parent directory of the files you want to replace.
You should see a "replacing x with y" line (twice actually, for the normal and legacy build). You should see a "replacing x with y" line (twice actually, for the normal and legacy build).
# Injecting CSS
You can override the location of the main css file with the `--override-css <file>` option to the build script. The default is `src/platform/web/ui/css/main.css`, which you probably want to import from your custom css file like so:
```css
@import url('src/platform/web/ui/css/main.css');
/* additions */
```

12
scripts/build.mjs
View file

@ -51,9 +51,10 @@ const parameters = new commander.Command();
parameters parameters
.option("--modern-only", "don't make a legacy build") .option("--modern-only", "don't make a legacy build")
.option("--override-imports <json file>", "pass in a file to override import paths, see doc/SKINNING.md") .option("--override-imports <json file>", "pass in a file to override import paths, see doc/SKINNING.md")
.option("--override-css <main css file>", "pass in an alternative main css file")
parameters.parse(process.argv); parameters.parse(process.argv);
async function build({modernOnly, overrideImports}) { async function build({modernOnly, overrideImports, overrideCss}) {
// get version number // get version number
const version = JSON.parse(await fs.readFile(path.join(projectDir, "package.json"), "utf8")).version; const version = JSON.parse(await fs.readFile(path.join(projectDir, "package.json"), "utf8")).version;
let importOverridesMap; let importOverridesMap;
@ -90,7 +91,7 @@ async function build({modernOnly, overrideImports}) {
// creates the directories where the theme css bundles are placed in, // creates the directories where the theme css bundles are placed in,
// and writes to assets, so the build bundles can translate them, so do it first // and writes to assets, so the build bundles can translate them, so do it first
await copyThemeAssets(themes, assets); await copyThemeAssets(themes, assets);
await buildCssBundles(buildCssLegacy, themes, assets); await buildCssBundles(buildCssLegacy, themes, assets, overrideCss);
await buildManifest(assets); await buildManifest(assets);
// all assets have been added, create a hash from all assets name to cache unhashed files like index.html // all assets have been added, create a hash from all assets name to cache unhashed files like index.html
assets.addToHashForAll("index.html", devHtml); assets.addToHashForAll("index.html", devHtml);
@ -311,8 +312,11 @@ async function buildServiceWorker(swSource, version, globalHash, assets) {
await assets.writeUnhashed("sw.js", swSource); await assets.writeUnhashed("sw.js", swSource);
} }
async function buildCssBundles(buildFn, themes, assets) { async function buildCssBundles(buildFn, themes, assets, mainCssFile = null) {
const bundleCss = await buildFn(path.join(cssSrcDir, "main.css")); if (!mainCssFile) {
mainCssFile = path.join(cssSrcDir, "main.css");
}
const bundleCss = await buildFn(mainCssFile);
await assets.write(`hydrogen.css`, bundleCss); await assets.write(`hydrogen.css`, bundleCss);
for (const theme of themes) { for (const theme of themes) {
const themeRelPath = `themes/${theme}/`; const themeRelPath = `themes/${theme}/`;