javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 18:12:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(webpack|angular): styleUrls with platform suffixes

Browse Source
This commit is contained in:
Igor Randjelovic
2021-04-15 20:51:02 +02:00
parent f861be06b3
commit 759f05a53a
2 changed files with 44 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap
View File

@ -112,7 +112,7 @@ exports[`angular configuration for android 1`] = `
{
test: /\\\\.css$/,
exclude: [
/\\\\.component\\\\.css$/
/\\\\.component(\\\\.\\\\w+)?\\\\.css$/
],
use: [
/* config.module.rule('css').use('apply-css-loader') */
@ -140,7 +140,7 @@ exports[`angular configuration for android 1`] = `
{
test: /\\\\.scss$/,
exclude: [
/\\\\.component\\\\.scss$/
/\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
],
use: [
/* config.module.rule('scss').use('apply-css-loader') */
@ -197,7 +197,7 @@ exports[`angular configuration for android 1`] = `
},
/* config.module.rule('css|component') */
{
test: /\\\\.component\\\\.css$/,
test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
use: [
/* config.module.rule('css|component').use('raw-loader') */
{
@ -207,7 +207,7 @@ exports[`angular configuration for android 1`] = `
},
/* config.module.rule('scss|component') */
{
test: /\\\\.component\\\\.scss$/,
test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
use: [
/* config.module.rule('scss|component').use('raw-loader') */
{
@ -331,6 +331,7 @@ exports[`angular configuration for android 1`] = `
{
tsConfigPath: '__jest__/tsconfig.json',
mainPath: '__jest__/src/app.js',
hostReplacementPaths: function () { /* omitted long function */ },
platformTransformers: [
function () { /* omitted long function */ }
]
@ -460,7 +461,7 @@ exports[`angular configuration for ios 1`] = `
{
test: /\\\\.css$/,
exclude: [
/\\\\.component\\\\.css$/
/\\\\.component(\\\\.\\\\w+)?\\\\.css$/
],
use: [
/* config.module.rule('css').use('apply-css-loader') */
@ -488,7 +489,7 @@ exports[`angular configuration for ios 1`] = `
{
test: /\\\\.scss$/,
exclude: [
/\\\\.component\\\\.scss$/
/\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
],
use: [
/* config.module.rule('scss').use('apply-css-loader') */
@ -545,7 +546,7 @@ exports[`angular configuration for ios 1`] = `
},
/* config.module.rule('css|component') */
{
test: /\\\\.component\\\\.css$/,
test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
use: [
/* config.module.rule('css|component').use('raw-loader') */
{
@ -555,7 +556,7 @@ exports[`angular configuration for ios 1`] = `
},
/* config.module.rule('scss|component') */
{
test: /\\\\.component\\\\.scss$/,
test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
use: [
/* config.module.rule('scss|component').use('raw-loader') */
{
@ -679,6 +680,7 @@ exports[`angular configuration for ios 1`] = `
{
tsConfigPath: '__jest__/tsconfig.json',
mainPath: '__jest__/src/app.js',
hostReplacementPaths: function () { /* omitted long function */ },
platformTransformers: [
function () { /* omitted long function */ }
]

40
packages/webpack5/src/configuration/angular.ts
View File

@ -1,14 +1,17 @@
import Config from 'webpack-chain';
import { existsSync } from 'fs';
import { extname } from 'path';
import { getEntryPath, getPlatformName } from '../helpers/platform';
import { getProjectFilePath } from '../helpers/project';
import { env as _env, IWebpackEnv } from '../index';
import { getEntryPath } from '../helpers/platform';
import base from './base';
export default function (config: Config, env: IWebpackEnv = _env): Config {
base(config, env);
const platform = getPlatformName();
const tsConfigPath = [
getProjectFilePath('tsconfig.app.json'),
getProjectFilePath('tsconfig.json'),
@ -43,12 +46,15 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
.loader('raw-loader');
// exclude component css files from the normal css rule
config.module.rule('css').exclude.add(/\.component\.css$/);
config.module
.rule('css')
.exclude// exclude *.component.{platform}.css
.add(/\.component(\.\w+)?\.css$/);
// and instead use raw-loader, since that's what angular expects
config.module
.rule('css|component')
.test(/\.component\.css$/)
.test(/\.component(\.\w+)?\.css$/)
.use('raw-loader')
.loader('raw-loader');
@ -59,12 +65,15 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
.get('options');
// exclude component css files from the normal css rule
config.module.rule('scss').exclude.add(/\.component\.scss$/);
config.module
.rule('scss')
.exclude// exclude *.component.{platform}.scss
.add(/\.component(\.\w+)?\.scss$/);
// and instead use raw-loader, since that's what angular expects
config.module
.rule('scss|component')
.test(/\.component\.scss$/)
.test(/\.component(\.\w+)?\.scss$/)
.use('raw-loader')
.loader('raw-loader')
.end()
@ -79,6 +88,25 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
{
tsConfigPath,
mainPath: getEntryPath(),
hostReplacementPaths(path: string) {
const ext = extname(path);
const platformExt = `.${platform}${ext}`;
// already includes a platform specific extension - ignore
if (path.includes(platformExt)) {
return path;
}
const platformPath = path.replace(ext, platformExt);
// check if the same file exists with a platform suffix and return if it does.
if (existsSync(platformPath)) {
// console.log(`[hostReplacementPaths] resolving "${path}" to "${platformPath}"`);
return platformPath;
}
// just return the original path otherwise
return path;
},
platformTransformers: [require('../transformers/NativeClass').default],
},
]);
@ -110,7 +138,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
return config;
}
function getAngularCompilerPlugin() {
function getAngularCompilerPlugin(): any {
const { AngularCompilerPlugin } = require('@ngtools/webpack');
return AngularCompilerPlugin;
}