fix: svelte and css2json-loader

packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap

@@ -20,8 +20,7 @@ exports[`svelte configuration for android 1`] = `
     symlinks: true,
     alias: {
       '~': '<TODO>appFullPath',
-      '@': '<TODO>appFullPath',
+      '@': '<TODO>appFullPath'
-      svelte: 'svelte-native'
     },
     extensions: [
       '.android.svelte',
@@ -62,10 +61,7 @@ exports[`svelte configuration for android 1`] = `
                 sourceMap: true,
                 declaration: false
               },
-              getCustomTransformers: function () { /* omitted long function */ },
+              getCustomTransformers: function () { /* omitted long function */ }
-              appendTsSuffixTo: [
-                '\\\\\\\\.svelte$'
-              ]
             }
           }
         ]
@@ -123,19 +119,22 @@ exports[`svelte configuration for android 1`] = `
       /* config.module.rule('svelte') */
       {
         test: /\\\\.svelte$/,
+        exclude: [
+          /node_modules/
+        ],
         use: [
           /* config.module.rule('svelte').use('svelte-loader-hot') */
           {
             loader: 'svelte-loader-hot',
             options: {
-              dev: false,
+              dev: true,
               preprocess: [
                 undefined,
                 {
                   markup: function () { /* omitted long function */ }
                 }
               ],
-              hotReload: false,
+              hotReload: true,
               hotOptions: {
                 injectCss: false,
                 'native': true
@@ -258,8 +257,7 @@ exports[`svelte configuration for ios 1`] = `
     symlinks: true,
     alias: {
       '~': '<TODO>appFullPath',
-      '@': '<TODO>appFullPath',
+      '@': '<TODO>appFullPath'
-      svelte: 'svelte-native'
     },
     extensions: [
       '.ios.svelte',
@@ -300,10 +298,7 @@ exports[`svelte configuration for ios 1`] = `
                 sourceMap: true,
                 declaration: false
               },
-              getCustomTransformers: function () { /* omitted long function */ },
+              getCustomTransformers: function () { /* omitted long function */ }
-              appendTsSuffixTo: [
-                '\\\\\\\\.svelte$'
-              ]
             }
           }
         ]
@@ -361,19 +356,22 @@ exports[`svelte configuration for ios 1`] = `
       /* config.module.rule('svelte') */
       {
         test: /\\\\.svelte$/,
+        exclude: [
+          /node_modules/
+        ],
         use: [
           /* config.module.rule('svelte').use('svelte-loader-hot') */
           {
             loader: 'svelte-loader-hot',
             options: {
-              dev: false,
+              dev: true,
               preprocess: [
                 undefined,
                 {
                   markup: function () { /* omitted long function */ }
                 }
               ],
-              hotReload: false,
+              hotReload: true,
               hotOptions: {
                 injectCss: false,
                 'native': true

packages/webpack5/src/configuration/svelte.ts

@@ -1,9 +1,10 @@
-import base from './base';
-import { env as _env, IWebpackEnv } from '../index';
-import Config from 'webpack-chain';
-import { getPlatform, getProjectRootPath } from '../helpers/project';
-import { merge } from 'webpack-merge';
 import svelteNativePreprocessor from 'svelte-native-preprocessor';
+import Config from 'webpack-chain';
+
+import { env as _env, IWebpackEnv } from '../index';
+import { getPlatform, getProjectRootPath } from '../helpers/project';
+import base from './base';
+import { error } from '../helpers/log';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
@@ -20,46 +21,39 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 	config.module
 		.rule('svelte')
 		.test(/\.svelte$/)
+		.exclude.add(/node_modules/)
+		.end()
 		.use('svelte-loader-hot')
 		.loader('svelte-loader-hot')
 		.tap((options) => {
 			return {
 				...options,
-				dev: production,
+				dev: !production,
-				preprocess: [getSvelteConfig()?.preprocess, svelteNativePreprocessor()],
+				preprocess: [getSvelteConfigPreprocessor(), svelteNativePreprocessor()],
-				hotReload: production,
+				hotReload: !production,
 				hotOptions: {
 					injectCss: false,
 					native: true,
 				},
 			};
-		})
-		.end();
-
-	// set up ts support in svelte files
-	config.module
-		.rule('ts')
-		.use('ts-loader')
-		.loader('ts-loader')
-		.tap((options = {}) => {
-			return merge(options, {
-				appendTsSuffixTo: ['\\.svelte$'],
 		});
-		});
-
-	// add an alias for svelte, since some plugins may try to import it
-	config.resolve.alias.set('svelte', 'svelte-native');
 
 	return config;
 }
 
-function getSvelteConfig(): { preprocess: any } | null {
+function getSvelteConfigPreprocessor(): any {
+	const config = getSvelteConfig();
+
+	return config?.preprocess;
+}
+
+function getSvelteConfig(): { preprocess: any } | undefined {
 	try {
 		const resolvedPath = require.resolve(`./svelte.config.js`, {
 			paths: [getProjectRootPath()],
 		});
 		return require(resolvedPath);
-	} catch (e) {
+	} catch (err) {
-		return null;
+		error('Could not find svelte.config.js.', err);
 	}
 }

packages/webpack5/src/configuration/vue.ts

@@ -26,8 +26,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 				...options,
 				compiler: require('nativescript-vue-template-compiler'),
 			};
-		})
+		});
-		.end();
 
 	// set up ts support in vue files
 	config.module

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

@@ -16,20 +16,11 @@ export default function loader(content: string, map: any) {
 	// todo: revise if this is necessary
 	// todo: perhaps use postCSS and just build imports into a single file?
 	let dependencies = [];
-	getImportRules(ast)
+	getAndRemoveImportRules(ast)
 		.map(extractUrlFromRule)
 		.map(createRequireUri)
 		.forEach(({ uri, requireURI }) => {
-			dependencies.push(
+			dependencies.push(`require("${requirePrefix}${requireURI}")`);
-				`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));
@@ -60,6 +51,15 @@ function getImportRules(ast: Stylesheet): Import[] {
 	);
 }
 
+function getAndRemoveImportRules(ast: Stylesheet): Import[] {
+	const imports = getImportRules(ast);
+	ast.stylesheet.rules = ast.stylesheet.rules.filter(
+		(rule) => rule.type !== 'import'
+	);
+
+	return imports;
+}
+
 /**
  * Extracts the url from import rule (ex. `url("./platform.css")`)
  */