feat: css loading

packages/webpack5/src/loaders/apply-css-loader/index.ts

@@ -0,0 +1,44 @@
+import { dedent } from 'ts-dedent';
+
+const cssLoaderWarning = dedent`
+	The apply-css-loader requires the file to be pre-processed by css-loader.
+	Make sure css-loader is applied before apply-css-loader.
+`;
+
+function hasCssLoader(loaders: any[], loaderIndex: number) {
+	return loaders
+		?.slice(loaderIndex)
+		.some(({ path }) => path.includes('css-loader'));
+}
+
+export default function loader(content, map) {
+	// if (this.request.match(/\/app\.(css|scss|less|sass)$/)) {
+	// 	return content;
+	// }
+
+	// Emit a warning if the file was not processed by the css-loader.
+	if (!hasCssLoader(this.loaders, this.loaderIndex)) {
+		this.emitWarning(new Error(cssLoaderWarning));
+	}
+
+	content = dedent`
+		/* CSS START */
+		${content}
+		/* CSS END */
+
+		/* APPLY CSS */
+		const { Application } = require("@nativescript/core");
+		require("@nativescript/core/ui/styling/style-scope");
+
+		if (___CSS_LOADER_EXPORT___ && typeof ___CSS_LOADER_EXPORT___.forEach === "function") {
+			___CSS_LOADER_EXPORT___.forEach(cssExport => {
+				if (cssExport.length > 1 && cssExport[1]) {
+					// applying the second item of the export as it contains the css contents
+					Application.addCss(cssExport[1]);
+				}
+			});
+		}
+	`;
+
+	this.callback(null, content, map);
+}

packages/webpack5/src/loaders/css2json-loader/index.ts

@@ -1 +1,72 @@
-//
+import { parse, Import, Stylesheet } from 'css';
+import { urlToRequest } from 'loader-utils';
+
+const betweenQuotesPattern = /('|")(.*?)\1/;
+const unpackUrlPattern = /url\(([^\)]+)\)/;
+const inlineLoader = '!css2json-loader?useForImports!';
+
+export default function loader(content: string, map: any) {
+	const options = this.getOptions() || {};
+	const inline = !!options.useForImports;
+	const requirePrefix = inline ? inlineLoader : '';
+
+	const ast = parse(content);
+
+	let dependencies = [];
+	getImportRules(ast)
+		.map(extractUrlFromRule)
+		.map(createRequireUri)
+		.forEach(({ uri, requireURI }) => {
+			dependencies.push(
+				`global.registerModule("${uri}", () => require("${requirePrefix}${requireURI}"));`
+			);
+
+			// Call registerModule with requireURI to handle cases like @import "~@nativescript/theme/css/blue.css";
+			if (uri !== requireURI) {
+				dependencies.push(
+					`global.registerModule("${requireURI}", () => require("${requirePrefix}${requireURI}"));`
+				);
+			}
+		});
+
+	const str = JSON.stringify(ast, (k, v) => (k === 'position' ? undefined : v));
+
+	// map.mappings = map.mappings.replace(/;{2,}/, '')
+
+	this.callback(
+		null,
+		`${dependencies.join('\n')}module.exports = ${str};`,
+		null
+	);
+}
+
+function getImportRules(ast: Stylesheet): Import[] {
+	if (!ast || (<any>ast).type !== 'stylesheet' || !ast.stylesheet) {
+		return [];
+	}
+	return <Import[]>(
+		ast.stylesheet.rules.filter(
+			(rule) => rule.type === 'import' && (<any>rule).import
+		)
+	);
+}
+
+/**
+ * Extracts the url from import rule (ex. `url("./platform.css")`)
+ */
+function extractUrlFromRule(importRule: Import): string {
+	const urlValue = importRule.import;
+
+	const unpackedUrlMatch = urlValue.match(unpackUrlPattern);
+	const unpackedValue = unpackedUrlMatch ? unpackedUrlMatch[1] : urlValue;
+
+	const quotesMatch = unpackedValue.match(betweenQuotesPattern);
+	return quotesMatch ? quotesMatch[2] : unpackedValue;
+}
+
+function createRequireUri(uri): { uri: string; requireURI: string } {
+	return {
+		uri: uri,
+		requireURI: urlToRequest(uri),
+	};
+}