Imported CSS is not compiled/transformed

[alex-ketch]

Stencil version:

 @stencil/core@v1.13.0
 @stencil/core@v1.13.1-0

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When importing CSS files, Stencil compiler does not always process each file, creating bundles with with raw/unprocessed CSS.
Given a component using importUrls for two separate CSS with identical contents, the dist generated stylesheets contain different content.
Sometimes with the contents of the file being imported, and sometimes just the raw import text (e.g. @import "~tachyons";)

I also saw hints of race conditions, as sometimes file A would be processed, and sometimes file B.

Screenshot shows results of a single build, and results of two input files (app-root.css and app-root.alt.css)

Expected behavior:

All files being imported by Stencil components should be processed using any plugins, and content inlined in the generated files.
In case there are issues importing or processing files, the compiler should throw an error and fail the build.

Steps to reproduce:

A repository for reproducing the issue can be found here: https://github.com/alex-ketch/stenciljs-postcss-import-issue

Other information:

Possibly related issues:

• --next and v1.10.x doesn't import css #2292
• --next does not import ionic css #2300
• CSS imports broken with Stencil >v1.10.0 stencil-community/stencil-postcss#25

[alex-ketch]

Made some progress in identifying the issue in getCssImports that might be causing this bug.

stencil/src/compiler/style/css-imports.ts

Lines 116 to 134 in 39c0a99

	export const getCssImports = async (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx, filePath: string, styleText: string) => {
	const imports: d.CssImportData[] = [];
	if (!styleText.includes('@import')) {
	// no @import at all, so don't bother
	return imports;
	}
	styleText = stripCssComments(styleText);
	const dir = dirname(filePath);
	const importeeExt = filePath.split('.').pop().toLowerCase();
	let r: RegExpExecArray;
	while ((r = IMPORT_RE.exec(styleText))) {
	const cssImportData: d.CssImportData = {
	srcImport: r[0],
	url: r[4].replace(/[\"\'\)]/g, ''),
	};

---

Based on the issue reproduction fork, the getCssImports function is called for each CSS file being imported, once with app-root.css and then app-root.alt.css.

However in the while loop (line 129) a stale value of filePath is used during the second call.
This means that the styleText for the second import is never updated, resulting in outputting an uncompiled stylesheet.

In summary:

• First call
  • getCssImports(filePath: app-root.css)
  • while loop filePath = app-root.css
• Second call
  • getCssImports(filePath: app-root.alt.css)
  • while loop filePath = app-root.css <- stale value from the first call is used