Skip to content

Commit 4cf83eb

Browse files
clydinalan-agius4
authored andcommitted
fix(@angular-devkit/build-angular): use all style language watch files in esbuild builder
A recent change to better support Tailwind CSS in watch mode unintentionally caused part of the watch files list for stylesheets to be ignored when Tailwind and/or autoprefixer were required to be executed. This resulted in rebuilds occurring but all stylesheet changes were not fully propagated to the development server. This has now been corrected.
1 parent f42f101 commit 4cf83eb

File tree

2 files changed

+29
-16
lines changed

2 files changed

+29
-16
lines changed

packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.ts

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ async function compileString(
232232
options: StylesheetPluginOptions,
233233
): Promise<OnLoadResult> {
234234
try {
235-
const result = await postcssProcessor.process(data, {
235+
const postcssResult = await postcssProcessor.process(data, {
236236
from: filename,
237237
to: filename,
238238
map: options.sourcemap && {
@@ -241,11 +241,15 @@ async function compileString(
241241
},
242242
});
243243

244-
const rawWarnings = result.warnings();
245-
let warnings;
244+
const loadResult: OnLoadResult = {
245+
contents: postcssResult.css,
246+
loader: 'css',
247+
};
248+
249+
const rawWarnings = postcssResult.warnings();
246250
if (rawWarnings.length > 0) {
247251
const lineMappings = new Map<string, string[] | null>();
248-
warnings = rawWarnings.map((warning) => {
252+
loadResult.warnings = rawWarnings.map((warning) => {
249253
const file = warning.node.source?.input.file;
250254
if (file === undefined) {
251255
return { text: warning.text };
@@ -269,28 +273,22 @@ async function compileString(
269273
});
270274
}
271275

272-
let watchFiles;
273-
for (const resultMessage of result.messages) {
276+
for (const resultMessage of postcssResult.messages) {
274277
if (resultMessage.type === 'dependency' && typeof resultMessage['file'] === 'string') {
275-
watchFiles ??= [];
276-
watchFiles.push(resultMessage['file']);
278+
loadResult.watchFiles ??= [];
279+
loadResult.watchFiles.push(resultMessage['file']);
277280
} else if (
278281
resultMessage.type === 'dir-dependency' &&
279282
typeof resultMessage['dir'] === 'string' &&
280283
typeof resultMessage['glob'] === 'string'
281284
) {
282-
watchFiles ??= [];
285+
loadResult.watchFiles ??= [];
283286
const dependencies = await glob(resultMessage['glob'], { cwd: resultMessage['dir'] });
284-
watchFiles.push(...dependencies);
287+
loadResult.watchFiles.push(...dependencies);
285288
}
286289
}
287290

288-
return {
289-
contents: result.css,
290-
loader: 'css',
291-
warnings,
292-
watchFiles,
293-
};
291+
return loadResult;
294292
} catch (error) {
295293
postcss ??= (await import('postcss')).default;
296294
if (error instanceof postcss.CssSyntaxError) {

tests/legacy-cli/e2e/tests/basic/rebuild.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,4 +158,19 @@ export default async function () {
158158
throw new Error('Expected component CSS to update.');
159159
}
160160
}
161+
162+
await Promise.all([
163+
waitForAnyProcessOutputToMatch(validBundleRegEx),
164+
writeMultipleFiles({
165+
'src/styles.css': 'div { color: green; }',
166+
}),
167+
]);
168+
169+
{
170+
const response = await fetch(`http://localhost:${port}/styles.css`);
171+
const body = await response.text();
172+
if (!body.match(/color:\s?green/)) {
173+
throw new Error('Expected component CSS to update.');
174+
}
175+
}
161176
}

0 commit comments

Comments
 (0)