css2json-loader

The config can now be set to resolve .css files as:

module: {
  rules: [
    { test: /\.html$|\.xml$/, loader: "raw-loader" },
    { test: /\.css$/, loader: "nativescript-dev-webpack/css2json-loader" }
  ]
}

This will use the parser from tns-core-modules/css to parse the CSS content and convert it to a module that exports a JSON. The JSON generated is quite verbose so times should be carefully measured on real devices whether it is better to use this approach. For example our CSS parser may be able to parse the CSS theme faster than the JS module is loaded parsed etc.

PlatformSuffixPluing

The PlatformSuffixPluing is used like:

const PlatformSuffixPlugin = require("nativescript-dev-webpack/PlatformSuffixPlugin");
// ...
resolve: {
  plugins: [new PlatformSuffixPlugin(platform, ["ios", "android"])]
}

When a 'file' is resolved it checks if on the filesystem a file with a .platofrm. suffix exists, and if it does, resolves to it, otherwise resolves to the original file. This should eliminate the need to register extensions like [".android.ts", ".ts", ".android.css", ".css"] and use just [".ts", ".css"]. I've tested the approach in .js apps, we should further test this with Angular and TypeScript apps.

PlatformFSPlugin

This plugin is applied by adding:

        new PlatformFSPlugin({
            platform,
            platforms: ["android", "ios"],
            ignore: ["App_Resources"]
        })

This plugin is a preferred approach to the PlatformSuffixPluing as it will work on file system level, it will virtually filter the files from other platforms, and rename the files from the current platform. E.g. on the following tree:

app/
  app.css
  platform.android.css
  platform.ios.css

The webpack's compiler.inputFileSystem will map readdir, readFile, readJson etc. to behave for android as:

app/
  app.css
  platform.css (readFile will return the platform.android.css content for this one)

angular tooling with the RC works with this fs. Further the extensions doesn't need to be provided with [".android.ts", ".ts", ".android.css", ".css"] suffixes but use [".ts", ".css"] instead.

This also makes using web pack contexts easier, since when the files are enumerated their names will be properly mapped, for example:

function loadCss(path) { return require("~/" + path + ".css"); }

Will create internal map for app and platform to resolve to app/app.css and the app/platform.android.css, this can be used to express the vanilla {N} apps convention and put all CSS, XML and .ts/.js files within the app folder in such contexts.

It should be possible to use it to create a project with shared web, ios and android modules.