Skip to content

Commit b41941b

Browse files
Ibrahim-HaizelIbrahim-Haizel
committed
copy only frontend styles needed
1 parent 11f19c0 commit b41941b

File tree

7 files changed

+94
-46
lines changed

7 files changed

+94
-46
lines changed

‎scripts/copy-govuk-assets.js‎

Lines changed: 85 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,125 @@
22

33
// terminal command: node scripts/copy-govuk-assets.js
44

5-
import fs from 'fs';
6-
import { dirname, join } from 'path';
7-
import { fileURLToPath } from 'url';
5+
import fs from "fs";
6+
import { dirname, join } from "path";
7+
import { fileURLToPath } from "url";
88

99
const __filename = fileURLToPath(import.meta.url);
1010
const __dirname = dirname(__filename);
11-
const projectRoot = join(__dirname, '..');
11+
const projectRoot = join(__dirname, "..");
1212

1313
// Add components directory
1414
const dirs = [
15-
join(projectRoot, 'static/assets'),
16-
join(projectRoot, 'static/assets/images'),
17-
join(projectRoot, 'static/assets/fonts'),
18-
join(projectRoot, 'static/css'),
19-
join(projectRoot, 'static/js'),
20-
join(projectRoot, 'src/lib/components/js/components')
15+
join(projectRoot, "static/assets"),
16+
join(projectRoot, "static/assets/images"),
17+
join(projectRoot, "static/assets/fonts"),
18+
join(projectRoot, "static/css"),
19+
join(projectRoot, "static/js"),
20+
join(projectRoot, "src/lib/components/js/components"),
2121
];
2222

23-
dirs.forEach(dir => {
24-
if (!fs.existsSync(dir)) {
25-
fs.mkdirSync(dir, { recursive: true });
26-
console.log(`Created directory: ${dir}`);
27-
}
23+
dirs.forEach((dir) => {
24+
if (!fs.existsSync(dir)) {
25+
fs.mkdirSync(dir, { recursive: true });
26+
console.log(`Created directory: ${dir}`);
27+
}
2828
});
2929

3030
// Source paths
31-
const govukPath = join(projectRoot, 'node_modules/govuk-frontend/dist/govuk');
31+
const govukPath = join(projectRoot, "node_modules/govuk-frontend/dist/govuk");
32+
const mojPath = join(projectRoot, "node_modules/@ministryofjustice/frontend");
3233

3334
// Copy function
3435
function copyDir(src, dest) {
35-
if (fs.existsSync(src)) {
36-
fs.cpSync(src, dest, { recursive: true });
37-
console.log(`Copied ${src} to ${dest}`);
38-
} else {
39-
console.warn(`Source directory not found: ${src}`);
40-
}
36+
if (fs.existsSync(src)) {
37+
fs.cpSync(src, dest, { recursive: true });
38+
console.log(`Copied ${src} to ${dest}`);
39+
} else {
40+
console.warn(`Source directory not found: ${src}`);
41+
}
4142
}
4243

4344
// Copy manifest.json
44-
const manifestSrc = join(govukPath, 'assets/manifest.json');
45-
const manifestDest = join(projectRoot, 'static/assets/manifest.json');
45+
const manifestSrc = join(govukPath, "assets/manifest.json");
46+
const manifestDest = join(projectRoot, "static/assets/manifest.json");
4647
if (fs.existsSync(manifestSrc)) {
47-
fs.copyFileSync(manifestSrc, manifestDest);
48-
console.log(`Copied manifest.json to ${manifestDest}`);
48+
fs.copyFileSync(manifestSrc, manifestDest);
49+
console.log(`Copied manifest.json to ${manifestDest}`);
4950
} else {
50-
console.warn(`manifest.json not found at ${manifestSrc}`);
51+
console.warn(`manifest.json not found at ${manifestSrc}`);
5152
}
5253

5354
// Copy images
5455
copyDir(
55-
join(govukPath, 'assets/images'),
56-
join(projectRoot, 'static/assets/images')
56+
join(govukPath, "assets/images"),
57+
join(projectRoot, "static/assets/images"),
5758
);
5859

5960
// Copy fonts
6061
copyDir(
61-
join(govukPath, 'assets/fonts'),
62-
join(projectRoot, 'static/assets/fonts')
62+
join(govukPath, "assets/fonts"),
63+
join(projectRoot, "static/assets/fonts"),
6364
);
6465

65-
// Copy CSS
66-
const cssSrc = join(govukPath, 'govuk-frontend.min.css');
67-
const cssDest = join(projectRoot, 'static/css/govuk-frontend.min.css');
68-
if (fs.existsSync(cssSrc)) {
69-
fs.copyFileSync(cssSrc, cssDest);
70-
console.log(`Copied CSS to ${cssDest}`);
66+
// Copy GOVUK CSS to BOTH locations
67+
const govukCssSrc = join(govukPath, "govuk-frontend.min.css");
68+
const govukCssDestStatic = join(
69+
projectRoot,
70+
"static/css/govuk-frontend.min.css",
71+
);
72+
const govukCssDestLib = join(
73+
projectRoot,
74+
"src/lib/styles/vendor/govuk-frontend.min.css",
75+
);
76+
77+
if (fs.existsSync(govukCssSrc)) {
78+
// Ensure static destination directory exists
79+
fs.mkdirSync(dirname(govukCssDestStatic), { recursive: true });
80+
fs.copyFileSync(govukCssSrc, govukCssDestStatic);
81+
console.log(`Copied GOVUK CSS to ${govukCssDestStatic}`);
82+
83+
// Ensure lib destination directory exists
84+
fs.mkdirSync(dirname(govukCssDestLib), { recursive: true });
85+
fs.copyFileSync(govukCssSrc, govukCssDestLib);
86+
console.log(`Copied GOVUK CSS to ${govukCssDestLib}`);
87+
} else {
88+
console.warn(`GOVUK CSS file not found at ${govukCssSrc}`);
89+
}
90+
91+
// Copy MOJ CSS to BOTH locations
92+
const mojCssSrc = join(mojPath, "moj/moj-frontend.min.css");
93+
const mojCssDestStatic = join(projectRoot, "static/css/moj-frontend.min.css");
94+
const mojCssDestLib = join(
95+
projectRoot,
96+
"src/lib/styles/vendor/moj-frontend.min.css",
97+
);
98+
99+
if (fs.existsSync(mojCssSrc)) {
100+
// Ensure static destination directory exists
101+
fs.mkdirSync(dirname(mojCssDestStatic), { recursive: true });
102+
fs.copyFileSync(mojCssSrc, mojCssDestStatic);
103+
console.log(`Copied MOJ CSS to ${mojCssDestStatic}`);
104+
105+
// Ensure lib destination directory exists
106+
fs.mkdirSync(dirname(mojCssDestLib), { recursive: true });
107+
fs.copyFileSync(mojCssSrc, mojCssDestLib);
108+
console.log(`Copied MOJ CSS to ${mojCssDestLib}`);
71109
} else {
72-
console.warn(`CSS file not found at ${cssSrc}`);
110+
console.warn(`MOJ CSS file not found at ${mojCssSrc}`);
111+
console.warn(
112+
`Please check the path in node_modules/@ministryofjustice/frontend`,
113+
);
73114
}
74115

75116
// Copy JavaScript
76-
const jsSrc = join(govukPath, 'govuk-frontend.min.js');
77-
const jsDest = join(projectRoot, 'static/js/govuk-frontend.min.js');
117+
const jsSrc = join(govukPath, "govuk-frontend.min.js");
118+
const jsDest = join(projectRoot, "static/js/govuk-frontend.min.js");
78119
if (fs.existsSync(jsSrc)) {
79-
fs.copyFileSync(jsSrc, jsDest);
80-
console.log(`Copied JavaScript to ${jsDest}`);
120+
fs.copyFileSync(jsSrc, jsDest);
121+
console.log(`Copied JavaScript to ${jsDest}`);
81122
} else {
82-
console.warn(`JavaScript file not found at ${jsSrc}`);
123+
console.warn(`JavaScript file not found at ${jsSrc}`);
83124
}
84125

85-
console.log('GOV.UK Frontend assets copy process completed!');
126+
console.log("GOV.UK Frontend assets copy process completed!");

‎scripts/generate-index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const exports = svelteFilesInComponents
5454
// Write the file only if there are no duplicates
5555
writeFileSync(
5656
indexFile,
57-
`// this file is auto-generated — do not edit by hand\nimport "$lib/app.css";\n\n${exports.join("\n")}\n`,
57+
`// this file is auto-generated — do not edit by hand\nimport "$lib/components_base.css";\n\n${exports.join("\n")}\n`,
5858
);
5959

6060
console.log(

‎src/lib/app.css‎ renamed to ‎src/app.css‎

File renamed without changes.

‎src/lib/components_base.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./styles/vendor/moj-frontend.min.css";
2+
@import "./styles/vendor/govuk-frontend.min.css";

‎src/lib/styles/vendor/govuk-frontend.min.css‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/styles/vendor/moj-frontend.min.css‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/routes/+layout.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import HeaderNav from "$lib/components/ui/HeaderNav.svelte";
55
import MobileNav from "$lib/components/ui/MobileNav.svelte";
66
import SideNav from "$lib/components/ui/SideNav.svelte";
7-
import "$lib/app.css";
7+
import "../app.css";
88
import type {
99
SideNavGroup,
1010
SideNavItem,

0 commit comments

Comments
 (0)