Add the PlatformFSPlugin, remove ExtractTextPlugin, use latest css-loader, snapshot the app.css

PanayotCankov · PanayotCankov · commit 77830024a3c0 · 2017-10-25T10:24:49.000+03:00
diff --git a/dependencyManager.js b/dependencyManager.js
@@ -63,7 +63,7 @@ function getRequiredDeps(packageJson) {
         "webpack-sources": "~1.0.1",
         "copy-webpack-plugin": "~4.0.1",
         "raw-loader": "~0.5.1",
-        "nativescript-css-loader": "~0.26.0",
+        "css-loader": "~0.28.7",
         "nativescript-worker-loader": "~0.8.1",
         "resolve-url-loader": "~2.1.0",
         "extract-text-webpack-plugin": "~3.0.0",
@@ -97,9 +97,9 @@ function resolveAngularDeps(usedDependencies) {
             "@ngtools/webpack": "1.2.13",
         });
     } else {
-          Object.assign(depsToAdd, {
+        Object.assign(depsToAdd, {
             "typescript": "~2.3.4",
-            "@ngtools/webpack": "~1.6.0",
+            "@ngtools/webpack": "1.8.0-rc.3",
         });
     }
 
diff --git a/plugins/PlatformFSPlugin.js b/plugins/PlatformFSPlugin.js
@@ -13,7 +13,7 @@ function PlatformFSPlugin({platform, platforms, ignore}) {
     })).map(({endsWithSuffix, contains}) => baseFileName =>
         baseFileName.endsWith(endsWithSuffix) ||
         baseFileName.indexOf(contains) != -1);
-    this.isNotAlienPlatformFile = file => !alienPlatformFilters.some(basename(file));
+    this.isNotAlienPlatformFile = file => !alienPlatformFilters.some(filter => filter(basename(file)));
 
     const currentPlatformExt = `.${platform}`;
     this.trimPlatformSuffix = file => {
@@ -54,7 +54,7 @@ PlatformFSPlugin.prototype.mapFileSystem = function(fs) {
         get _readdirStorage() { return fs._readdirStorage; }
     };
 
-    ["readFile", "provide", "stat", "readJson"].forEach(mapPath);
+    ["readFile", "provide", "stat", "readJson", "readlink"].forEach(mapPath);
     ["readdir"].forEach(filterResultingFiles);
 
     return mappedFS;
diff --git a/prepublish/angular/getExtensions.js b/prepublish/angular/getExtensions.js
@@ -1,14 +1 @@
-module.exports = `
-// Resolve platform-specific modules like module.android.js
-function getExtensions(platform) {
-    return Object.freeze([
-        \`.\${platform}.ts\`,
-        \`.\${platform}.js\`,
-        ".aot.ts",
-        ".ts",
-        ".js",
-        ".css",
-        \`.\${platform}.css\`,
-    ]);
-}
-`;
+module.exports = `[ ".aot.ts", ".ts", ".js", ".css" ]`;
diff --git a/prepublish/angular/plugins.js b/prepublish/angular/plugins.js
@@ -6,11 +6,4 @@ module.exports = `
                 typeChecking: false
             }, ngToolsWebpackOptions)
         ),
-
-        // Resolve .ios.css and .android.css component stylesheets, and .ios.html and .android component views
-        new nsWebpack.UrlResolvePlugin({
-            platform: platform,
-            resolveStylesUrls: true,
-            resolveTemplateUrl: true
-        }),
 `;
diff --git a/prepublish/common/exports.js b/prepublish/common/exports.js
@@ -1,4 +1,4 @@
-module.exports = `
+module.exports = ({extensions}) => `
 const mainSheet = \`app.css\`;
 
 module.exports = env => {
@@ -20,7 +20,6 @@ module.exports = env => {
 
     const rules = getRules();
     const plugins = getPlugins(platform, env);
-    const extensions = getExtensions(platform);
 
     const config = {
         context: resolve("./app"),
@@ -33,7 +32,7 @@ module.exports = env => {
             filename: "[name].js",
         },
         resolve: {
-            extensions,
+            extensions: ${extensions},
 
             // Resolve {N} system modules from tns-core-modules
             modules: [
@@ -49,6 +48,11 @@ module.exports = env => {
             // and will enable us to work with symlinked packages during development.
             symlinks: false
         },
+        resolveLoader: {
+            // This will not follow symlinks to their original location,
+            // and will enable us to work with symlinked loaders during development.
+            symlinks: false
+        },
         node: {
             // Disable node shims that conflict with NativeScript
             "http": false,
diff --git a/prepublish/common/imports.js b/prepublish/common/imports.js
@@ -2,6 +2,7 @@ module.exports = `const { resolve, join  } = require("path");
 
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
+const { PlatformFSPlugin } = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
diff --git a/prepublish/common/plugins.js b/prepublish/common/plugins.js
@@ -1,6 +1,4 @@
 module.exports = `
-        new ExtractTextPlugin(mainSheet),
-
         // Vendor libs go to the vendor.js chunk
         new webpack.optimize.CommonsChunkPlugin({
             name: ["vendor"],
@@ -13,7 +11,6 @@ module.exports = `
 
         // Copy assets to out dir. Add your own globs as needed.
         new CopyWebpackPlugin([
-            { from: mainSheet },
             { from: "css/**" },
             { from: "fonts/**" },
             { from: "**/*.jpg" },
@@ -26,7 +23,7 @@ module.exports = `
             "./vendor",
             "./bundle",
         ]),
-        
+
         // Support for web workers since v3.2
         new NativeScriptWorkerPlugin(),
 
@@ -37,4 +34,12 @@ module.exports = `
             generateStatsFile: true,
             reportFilename: join(__dirname, "report", \`report.html\`),
             statsFilename: join(__dirname, "report", \`stats.json\`),
+        }),
+
+        // Setup compiler.inputFileSystem to map files to platform specific files when possible,
+        // as well as filter ios specific files when building android and the vice-versa.
+        new PlatformFSPlugin({
+            platform,
+            platforms: ["ios", "android"],
+            ignore: ["App_Resources"]
         }),`;
diff --git a/prepublish/common/rules.js b/prepublish/common/rules.js
@@ -8,17 +8,10 @@ module.exports = `
         // Root stylesheet gets extracted with bundled dependencies
         {
             test: new RegExp(mainSheet),
-            use: ExtractTextPlugin.extract([
-                {
-                    loader: "resolve-url-loader",
-                    options: { silent: true },
-                },
-                {
-                    loader: "nativescript-css-loader",
-                    options: { minimize: false }
-                },
-                "nativescript-dev-webpack/platform-css-loader",
-            ]),
+            use: [{
+                loader: "css-loader?url=false",
+                options: { url: false }
+            }],
         },
         // Other CSS files get bundled using the raw loader
         {
diff --git a/prepublish/index.js b/prepublish/index.js
@@ -12,8 +12,10 @@ function saveTemplate(target) {
 function buildTemplate(target) {
     let template = "";
 
+    const extensions = require(`./${target}/getExtensions`);
+
     template += getResource(target, "imports");
-    template += getResource(target, "exports");
+    template += getResource(target, "exports", { extensions });
     template += getResource(target, "getPlatform");
 
     const rules = getResource(target, "rules");
@@ -22,14 +24,16 @@ function buildTemplate(target) {
     const plugins = getResource(target, "plugins");
     template += pluginsBuilder(plugins);
 
-    template += require(`./${target}/getExtensions`);
-
     return template;
 };
 
-function getResource(target, resourceName) {
-    const common = require(`./common/${resourceName}`);
-    const maybeSpecific = tryRequire(`./${target}/${resourceName}`);
+function applyArgs(stringOrTemplateFunction, args) {
+    return typeof stringOrTemplateFunction === "function" ? stringOrTemplateFunction(args) : stringOrTemplateFunction;
+}
+
+function getResource(target, resourceName, args) {
+    let common = applyArgs(require(`./common/${resourceName}`), args);
+    const maybeSpecific = applyArgs(tryRequire(`./${target}/${resourceName}`), args);
 
     return merge(resourceName, common, maybeSpecific);
 }
diff --git a/prepublish/javascript/getExtensions.js b/prepublish/javascript/getExtensions.js
@@ -1,11 +1 @@
-module.exports = `
-// Resolve platform-specific modules like module.android.js
-function getExtensions(platform) {
-    return Object.freeze([
-        \`.\${platform}.js\`,
-        ".js",
-        ".css",
-        \`.\${platform}.css\`,
-    ]);
-}
-`;
+module.exports = `[ ".js", ".css" ]`;
diff --git a/prepublish/typescript/getExtensions.js b/prepublish/typescript/getExtensions.js
@@ -1,13 +1 @@
-module.exports = `
-// Resolve platform-specific modules like module.android.js
-function getExtensions(platform) {
-    return Object.freeze([
-        \`.\${platform}.ts\`,
-        \`.\${platform}.js\`,
-        ".ts",
-        ".js",
-        ".css",
-        \`.\${platform}.css\`,
-    ]);
-}
-`;
+module.exports = `[ ".ts", ".js", ".css" ]`;
diff --git a/templates/vendor.angular.ts b/templates/vendor.angular.ts
@@ -1,3 +1,8 @@
+import * as application from "application";
+import "ui/styling/style-scope";
+global.registerModule("app.css", () => require("~/app.css"));
+application.loadAppCss();
+
 require("./vendor-platform");
 
 require("reflect-metadata");
diff --git a/templates/vendor.nativescript.ts b/templates/vendor.nativescript.ts
@@ -1,3 +1,8 @@
+import * as application from "application";
+import "ui/styling/style-scope";
+global.registerModule("app.css", () => require("~/app.css"));
+application.loadAppCss();
+
 require("./vendor-platform");
 
 require("bundle-entry-points");
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
@@ -2,6 +2,7 @@ const { resolve, join  } = require("path");
 
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
+const { PlatformFSPlugin } = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
@@ -33,7 +34,6 @@ module.exports = env => {
 
     const rules = getRules();
     const plugins = getPlugins(platform, env);
-    const extensions = getExtensions(platform);
 
     const config = {
         context: resolve("./app"),
@@ -46,7 +46,7 @@ module.exports = env => {
             filename: "[name].js",
         },
         resolve: {
-            extensions,
+            extensions: [ ".aot.ts", ".ts", ".js", ".css" ],
 
             // Resolve {N} system modules from tns-core-modules
             modules: [
@@ -62,6 +62,11 @@ module.exports = env => {
             // and will enable us to work with symlinked packages during development.
             symlinks: false
         },
+        resolveLoader: {
+            // This will not follow symlinks to their original location,
+            // and will enable us to work with symlinked loaders during development.
+            symlinks: false
+        },
         node: {
             // Disable node shims that conflict with NativeScript
             "http": false,
@@ -105,17 +110,10 @@ function getRules() {
         // Root stylesheet gets extracted with bundled dependencies
         {
             test: new RegExp(mainSheet),
-            use: ExtractTextPlugin.extract([
-                {
-                    loader: "resolve-url-loader",
-                    options: { silent: true },
-                },
-                {
-                    loader: "nativescript-css-loader",
-                    options: { minimize: false }
-                },
-                "nativescript-dev-webpack/platform-css-loader",
-            ]),
+            use: [{
+                loader: "css-loader?url=false",
+                options: { url: false }
+            }],
         },
         // Other CSS files get bundled using the raw loader
         {
@@ -153,8 +151,6 @@ function getRules() {
 
 function getPlugins(platform, env) {
     let plugins = [
-        new ExtractTextPlugin(mainSheet),
-
         // Vendor libs go to the vendor.js chunk
         new webpack.optimize.CommonsChunkPlugin({
             name: ["vendor"],
@@ -167,7 +163,6 @@ function getPlugins(platform, env) {
 
         // Copy assets to out dir. Add your own globs as needed.
         new CopyWebpackPlugin([
-            { from: mainSheet },
             { from: "css/**" },
             { from: "fonts/**" },
             { from: "**/*.jpg" },
@@ -180,7 +175,7 @@ function getPlugins(platform, env) {
             "./vendor",
             "./bundle",
         ]),
-        
+
         // Support for web workers since v3.2
         new NativeScriptWorkerPlugin(),
 
@@ -193,6 +188,14 @@ function getPlugins(platform, env) {
             statsFilename: join(__dirname, "report", `stats.json`),
         }),
 
+        // Setup compiler.inputFileSystem to map files to platform specific files when possible,
+        // as well as filter ios specific files when building android and the vice-versa.
+        new PlatformFSPlugin({
+            platform,
+            platforms: ["ios", "android"],
+            ignore: ["App_Resources"]
+        }),
+
         // Angular AOT compiler
         new AotPlugin(
             Object.assign({
@@ -201,13 +204,6 @@ function getPlugins(platform, env) {
             }, ngToolsWebpackOptions)
         ),
 
-        // Resolve .ios.css and .android.css component stylesheets, and .ios.html and .android component views
-        new nsWebpack.UrlResolvePlugin({
-            platform: platform,
-            resolveStylesUrls: true,
-            resolveTemplateUrl: true
-        }),
-
     ];
 
     if (env.uglify) {
@@ -223,16 +219,3 @@ function getPlugins(platform, env) {
 
     return plugins;
 }
-
-// Resolve platform-specific modules like module.android.js
-function getExtensions(platform) {
-    return Object.freeze([
-        `.${platform}.ts`,
-        `.${platform}.js`,
-        ".aot.ts",
-        ".ts",
-        ".js",
-        ".css",
-        `.${platform}.css`,
-    ]);
-}
diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
