postcss-bundler : do not shift up @import statements (#1161)

plugin-packs/postcss-bundler/.tape.mjs

@@ -25,7 +25,7 @@ const testCases = {
 	},
 	'ignore': {
 		message: "ignores incorrect syntax",
-		warnings: 3,
+		warnings: 4,
 	},
 	'regexp': {
 		message: "regexp sanity checks",
@@ -45,28 +45,25 @@ const testCases = {
 	}
 
 	switch (dirent.path.split(path.sep).join(path.posix.sep)) {
-		case 'test/css-import-tests/003-should-fail/001-core-features/before-other-styles/002':
-			testCases[key].warnings = 1;
-			break;
 		case 'test/css-import-tests/002-sub-features/004-at-supports/007':
 			testCases[key].warnings = 1;
 			break;
-		case 'test/css-import-tests/002-sub-features/003-at-layer/011':
+		case 'test/css-import-tests/002-sub-features/001-data-urls/004':
 			testCases[key].warnings = 1;
 			break;
-		case 'test/css-import-tests/002-sub-features/001-data-urls/004':
+		case 'test/css-import-tests/001-core-features/url-fragments/004':
 			testCases[key].warnings = 1;
 			break;
-		case 'test/css-import-tests/001-core-features/namespace/002':
+		case 'test/css-import-tests/001-core-features/url-fragments/005':
 			testCases[key].warnings = 1;
 			break;
-		case 'test/css-import-tests/001-core-features/before-other-styles/001':
+		case 'test/css-import-tests/001-core-features/forwards-compat/004':
 			testCases[key].warnings = 1;
 			break;
-		case 'test/css-import-tests/001-core-features/before-other-styles/002':
+		case 'test/css-import-tests/002-sub-features/003-at-layer/013':
 			testCases[key].warnings = 1;
 			break;
-		case 'test/css-import-tests/001-core-features/url-fragments/004':
+		case 'test/css-import-tests/002-sub-features/004-at-supports/012':
 			testCases[key].warnings = 1;
 			break;
 		default:

plugin-packs/postcss-bundler/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Bundler
 
+### Unreleased (patch)
+
+- Fix layer statements that precede `@import` statements which link to external resources
+
 ### 1.0.6
 
 _October 5, 2023_

plugin-packs/postcss-bundler/dist/postcss-import/lib/apply-conditions.d.ts

@@ -1,3 +1,3 @@
 import type { AtRule, AtRuleProps } from 'postcss';
-import { Statement } from './statement';
-export declare function applyConditions(bundle: Array<Statement>, atRule: (defaults?: AtRuleProps) => AtRule): void;
+import { Stylesheet } from './statement';
+export declare function applyConditions(stylesheet: Stylesheet, atRule: (defaults?: AtRuleProps) => AtRule): void;

plugin-packs/postcss-bundler/dist/postcss-import/lib/apply-styles.d.ts

@@ -1,3 +1,3 @@
 import type { Document, Root } from 'postcss';
-import { Statement } from './statement';
-export declare function applyStyles(bundle: Array<Statement>, styles: Root | Document): void;
+import { Stylesheet } from './statement';
+export declare function applyStyles(stylesheet: Stylesheet, styles: Root | Document): void;

plugin-packs/postcss-bundler/dist/postcss-import/lib/base64-encoded-import.d.ts

@@ -0,0 +1,2 @@
+import { Condition } from './conditions';
+export declare function base64EncodedConditionalImport(prelude: string, conditions: Array<Condition>): string;

plugin-packs/postcss-bundler/dist/postcss-import/lib/parse-styles.d.ts

@@ -1,4 +1,4 @@
 import type { Document, Postcss, Result, Root, AtRule } from 'postcss';
-import { Statement } from './statement';
+import { Stylesheet } from './statement';
 import { Condition } from './conditions';
-export declare function parseStyles(result: Result, styles: Root | Document, importingNode: AtRule | null, conditions: Array<Condition>, from: Array<string>, postcss: Postcss): Promise<Statement[]>;
+export declare function parseStyles(result: Result, styles: Root | Document, importingNode: AtRule | null, conditions: Array<Condition>, from: Array<string>, postcss: Postcss): Promise<Stylesheet>;

plugin-packs/postcss-bundler/dist/postcss-import/lib/parse-statements.d.ts → plugin-packs/postcss-bundler/dist/postcss-import/lib/parse-stylesheet.d.ts

@@ -1,4 +1,4 @@
 import type { AtRule, Document, Result, Root } from 'postcss';
 import { Condition } from './conditions';
-import { Statement } from './statement';
-export declare function parseStatements(result: Result, styles: Root | Document, importingNode: AtRule | null, conditions: Array<Condition>, from: Array<string>): Array<Statement>;
+import { Stylesheet } from './statement';
+export declare function parseStylesheet(result: Result, styles: Root | Document, importingNode: AtRule | null, conditions: Array<Condition>, from: Array<string>): Stylesheet;

plugin-packs/postcss-bundler/dist/postcss-import/lib/post-process.d.ts

@@ -0,0 +1,3 @@
+import type { AtRule, AtRuleProps } from 'postcss';
+import { Stylesheet } from './statement';
+export declare function postProcess(stylesheet: Stylesheet, atRule: (defaults?: AtRuleProps) => AtRule): void;

plugin-packs/postcss-bundler/dist/postcss-import/lib/statement.d.ts

@@ -1,34 +1,38 @@
 import type { AtRule, ChildNode, Warning } from 'postcss';
 import { Condition } from './conditions';
-export type Statement = ImportStatement | CharsetStatement | NodesStatement | Warning;
+export type Stylesheet = {
+    charset?: AtRule;
+    statements: Array<Statement>;
+};
+export type Statement = ImportStatement | PreImportStatement | NodesStatement | Warning;
 export type NodesStatement = {
-    type: string;
+    type: 'nodes';
     nodes: Array<ChildNode>;
     conditions: Array<Condition>;
     from: Array<string>;
     parent?: Statement;
     importingNode: AtRule | null;
 };
-export type CharsetStatement = {
-    type: string;
+export type ImportStatement = {
+    type: 'import';
+    uri: string;
+    fullUri: string;
     node: AtRule;
     conditions: Array<Condition>;
     from: Array<string>;
     parent?: Statement;
+    stylesheet?: Stylesheet;
     importingNode: AtRule | null;
 };
-export type ImportStatement = {
-    type: string;
-    uri: string;
-    fullUri: string;
-    node: AtRule;
+export type PreImportStatement = {
+    type: 'pre-import';
+    node: ChildNode;
     conditions: Array<Condition>;
     from: Array<string>;
     parent?: Statement;
-    children?: Array<Statement>;
     importingNode: AtRule | null;
 };
 export declare function isWarning(stmt: Statement): stmt is Warning;
 export declare function isNodesStatement(stmt: Statement): stmt is NodesStatement;
-export declare function isCharsetStatement(stmt: Statement): stmt is CharsetStatement;
 export declare function isImportStatement(stmt: Statement): stmt is ImportStatement;
+export declare function isPreImportStatement(stmt: Statement): stmt is PreImportStatement;

plugin-packs/postcss-bundler/src/postcss-import/index.ts

@@ -2,6 +2,7 @@ import type { PluginCreator } from 'postcss';
 import { parseStyles } from './lib/parse-styles';
 import { applyConditions } from './lib/apply-conditions';
 import { applyStyles } from './lib/apply-styles';
+import { postProcess } from './lib/post-process';
 
 /** postcss-bundler plugin options */
 export type pluginOptions = never;
@@ -19,6 +20,8 @@ const creator: PluginCreator<pluginOptions> = () => {
 				postcss,
 			);
 
+			postProcess(bundle, atRule);
+
 			applyConditions(bundle, atRule);
 			applyStyles(bundle, styles);
 		},

plugin-packs/postcss-bundler/src/postcss-import/lib/apply-conditions.ts

@@ -1,34 +1,15 @@
 import type { AtRule, AtRuleProps } from 'postcss';
-import { Statement, isCharsetStatement, isImportStatement, isWarning } from './statement';
-import { formatImportPrelude } from './format-import-prelude';
+import { Stylesheet, isImportStatement, isPreImportStatement, isWarning } from './statement';
+import { base64EncodedConditionalImport } from './base64-encoded-import';
 
-export function applyConditions(bundle: Array<Statement>, atRule: (defaults?: AtRuleProps) => AtRule) {
-	bundle.forEach((stmt, index) => {
-		if (isWarning(stmt) || isCharsetStatement(stmt) || !stmt.conditions?.length) {
+export function applyConditions(stylesheet: Stylesheet, atRule: (defaults?: AtRuleProps) => AtRule) {
+	stylesheet.statements.forEach((stmt, index) => {
+		if (isWarning(stmt) || isPreImportStatement(stmt) || !stmt.conditions?.length) {
 			return;
 		}
 
 		if (isImportStatement(stmt)) {
-			stmt.conditions.reverse();
-			const first = stmt.conditions.pop()!;
-			let params = `${stmt.fullUri} ${formatImportPrelude(
-				first.layer,
-				first.media,
-				first.supports,
-			)}`;
-
-			for (const condition of stmt.conditions) {
-				params = `'data:text/css;base64,${Buffer.from(
-					`@import ${params}`,
-				).toString('base64')}' ${formatImportPrelude(
-					condition.layer,
-					condition.media,
-					condition.supports,
-				)}`;
-			}
-
-			stmt.node.params = params;
-
+			stmt.node.params = base64EncodedConditionalImport(stmt.fullUri, stmt.conditions);
 			return;
 		}
 
@@ -98,7 +79,7 @@ export function applyConditions(bundle: Array<Statement>, atRule: (defaults?: At
 		// wrap new rules with media query and/or layer at rule
 		innerAtRule.append(nodes);
 
-		bundle[index] = {
+		stylesheet.statements[index] = {
 			type: 'nodes',
 			nodes: [outerAtRule],
 			conditions: stmt.conditions,

plugin-packs/postcss-bundler/src/postcss-import/lib/apply-styles.ts

@@ -1,16 +1,21 @@
 import type { Document, Root } from 'postcss';
-import { Statement, isCharsetStatement, isImportStatement } from './statement';
+import { Stylesheet, isImportStatement, isNodesStatement } from './statement';
 
-export function applyStyles(bundle: Array<Statement>, styles: Root | Document) {
+export function applyStyles(stylesheet: Stylesheet, styles: Root | Document) {
 	styles.nodes = [];
 
+	if (stylesheet.charset) {
+		stylesheet.charset.parent = undefined;
+		styles.append(stylesheet.charset);
+	}
+
 	// Strip additional statements.
-	bundle.forEach(stmt => {
-		if (isCharsetStatement(stmt) || isImportStatement(stmt)) {
+	stylesheet.statements.forEach((stmt) => {
+		if (isImportStatement(stmt)) {
 			stmt.node.parent = undefined;
 			styles.append(stmt.node);
-		} else if (stmt.type === 'nodes') {
-			stmt.nodes.forEach(node => {
+		} else if (isNodesStatement(stmt)) {
+			stmt.nodes.forEach((node) => {
 				node.parent = undefined;
 				styles.append(node);
 			});

plugin-packs/postcss-bundler/src/postcss-import/lib/base64-encoded-import.ts

@@ -0,0 +1,29 @@
+import { Condition } from './conditions';
+import { formatImportPrelude } from './format-import-prelude';
+
+// Base64 encode an import with conditions
+// The order of conditions is important and is interleaved with cascade layer declarations
+// Each group of conditions and cascade layers needs to be interpreted in order
+// To achieve this we create a list of base64 encoded imports, where each import contains a stylesheet with another import.
+// Each import can define a single group of conditions and a single cascade layer.
+export function base64EncodedConditionalImport(prelude: string, conditions: Array<Condition>): string {
+	conditions.reverse();
+	const first = conditions.pop()!;
+	let params = `${prelude} ${formatImportPrelude(
+		first.layer,
+		first.media,
+		first.supports,
+	)}`;
+
+	for (const condition of conditions) {
+		params = `'data:text/css;base64,${Buffer.from(
+			`@import ${params}`,
+		).toString('base64')}' ${formatImportPrelude(
+			condition.layer,
+			condition.media,
+			condition.supports,
+		)}`;
+	}
+
+	return params;
+}

plugin-packs/postcss-bundler/src/postcss-import/lib/parse-at-import.ts

@@ -69,6 +69,7 @@ export function parseAtImport(params: string) : false | { uri: string; fullUri:
 				}
 
 				if (
+					!uri &&
 					isTokenNode(childComponentValue) &&
 					childComponentValue.value[0] === TokenType.String
 				) {