javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 02:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(webpack): angular component css handling (#9434)

Browse Source 
* feat: use raw-loader for all css but app.s?css

* feat: use angular css rules for entire app dir

Co-authored-by: Eduardo Speroni <edusperoni@gmail.com>
This commit is contained in:
Igor Randjelovic
2021-08-03 14:37:58 +02:00
committed by GitHub
parent 0a6f80a554
commit cb91cd8a3f
2 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,10 +123,7 @@ exports[`angular configuration for android 1`] = `
}, },
/* config.module.rule('css') */ /* config.module.rule('css') */
{ {
test: /\\\\.css$/, test: /app(\\\\.\\\\w+)?\\\\.css$/,
exclude: [
/\\\\.component(\\\\.\\\\w+)?\\\\.css$/
],
use: [ use: [
/* config.module.rule('css').use('apply-css-loader') */ /* config.module.rule('css').use('apply-css-loader') */
{ {
@ -151,10 +148,7 @@ exports[`angular configuration for android 1`] = `
}, },
/* config.module.rule('scss') */ /* config.module.rule('scss') */
{ {
test: /\\\\.scss$/, test: /app(\\\\.\\\\w+)?\\\\.scss$/,
exclude: [
/\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
],
use: [ use: [
/* config.module.rule('scss').use('apply-css-loader') */ /* config.module.rule('scss').use('apply-css-loader') */
{ {
@ -210,7 +204,10 @@ exports[`angular configuration for android 1`] = `
}, },
/* config.module.rule('css|component') */ /* config.module.rule('css|component') */
{ {
test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/, test: /\\\\.css$/,
exclude: [
/app(\\\\.\\\\w+)?\\\\.css$/
],
use: [ use: [
/* config.module.rule('css|component').use('raw-loader') */ /* config.module.rule('css|component').use('raw-loader') */
{ {
@ -220,7 +217,10 @@ exports[`angular configuration for android 1`] = `
}, },
/* config.module.rule('scss|component') */ /* config.module.rule('scss|component') */
{ {
test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/, test: /\\\\.scss$/,
exclude: [
/app(\\\\.\\\\w+)?\\\\.scss$/
],
use: [ use: [
/* config.module.rule('scss|component').use('raw-loader') */ /* config.module.rule('scss|component').use('raw-loader') */
{ {
@ -494,10 +494,7 @@ exports[`angular configuration for ios 1`] = `
}, },
/* config.module.rule('css') */ /* config.module.rule('css') */
{ {
test: /\\\\.css$/, test: /app(\\\\.\\\\w+)?\\\\.css$/,
exclude: [
/\\\\.component(\\\\.\\\\w+)?\\\\.css$/
],
use: [ use: [
/* config.module.rule('css').use('apply-css-loader') */ /* config.module.rule('css').use('apply-css-loader') */
{ {
@ -522,10 +519,7 @@ exports[`angular configuration for ios 1`] = `
}, },
/* config.module.rule('scss') */ /* config.module.rule('scss') */
{ {
test: /\\\\.scss$/, test: /app(\\\\.\\\\w+)?\\\\.scss$/,
exclude: [
/\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
],
use: [ use: [
/* config.module.rule('scss').use('apply-css-loader') */ /* config.module.rule('scss').use('apply-css-loader') */
{ {
@ -581,7 +575,10 @@ exports[`angular configuration for ios 1`] = `
}, },
/* config.module.rule('css|component') */ /* config.module.rule('css|component') */
{ {
test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/, test: /\\\\.css$/,
exclude: [
/app(\\\\.\\\\w+)?\\\\.css$/
],
use: [ use: [
/* config.module.rule('css|component').use('raw-loader') */ /* config.module.rule('css|component').use('raw-loader') */
{ {
@ -591,7 +588,10 @@ exports[`angular configuration for ios 1`] = `
}, },
/* config.module.rule('scss|component') */ /* config.module.rule('scss|component') */
{ {
test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/, test: /\\\\.scss$/,
exclude: [
/app(\\\\.\\\\w+)?\\\\.scss$/
],
use: [ use: [
/* config.module.rule('scss|component').use('raw-loader') */ /* config.module.rule('scss|component').use('raw-loader') */
{ {

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

@ -52,13 +52,18 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
// exclude component css files from the normal css rule // exclude component css files from the normal css rule
config.module config.module
.rule('css') .rule('css')
.exclude // exclude *.component.{platform}.css .include.add(resolve(getEntryDirPath(), 'app.css'))
.add(/\.component(\.\w+)?\.css$/); .add(resolve(getEntryDirPath(), `app.${platform}.css`))
.add(/node_modules/);
// and instead use raw-loader, since that's what angular expects // and instead use raw-loader, since that's what angular expects
config.module config.module
.rule('css|component') .rule('css|component')
.test(/\.component(\.\w+)?\.css$/) .exclude.add(resolve(getEntryDirPath(), 'app.css'))
.add(resolve(getEntryDirPath(), `app.${platform}.css`))
.add(/node_modules/)
.end()
.test(/\.css$/)
.use('raw-loader') .use('raw-loader')
.loader('raw-loader'); .loader('raw-loader');
@ -71,13 +76,18 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
// exclude component css files from the normal css rule // exclude component css files from the normal css rule
config.module config.module
.rule('scss') .rule('scss')
.exclude // exclude *.component.{platform}.scss .include.add(resolve(getEntryDirPath(), 'app.scss'))
.add(/\.component(\.\w+)?\.scss$/); .add(resolve(getEntryDirPath(), `app.${platform}.scss`))
.add(/node_modules/);
// and instead use raw-loader, since that's what angular expects // and instead use raw-loader, since that's what angular expects
config.module config.module
.rule('scss|component') .rule('scss|component')
.test(/\.component(\.\w+)?\.scss$/) .exclude.add(resolve(getEntryDirPath(), 'app.css'))
.add(resolve(getEntryDirPath(), `app.${platform}.css`))
.add(/node_modules/)
.end()
.test(/\.scss$/)
.use('raw-loader') .use('raw-loader')
.loader('raw-loader') .loader('raw-loader')
.end() .end()