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

refactor: improve css2json and apply-css loaders

Browse Source 
optimize vendor chunks
This commit is contained in:
Igor Randjelovic
2020-11-20 22:49:53 +01:00
parent 288444c05c
commit b1bc2640db
4 changed files with 57 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/webpack5/src/loaders/apply-css-loader/index.ts
View File

@@ -1,35 +1,34 @@
import { dedent } from 'ts-dedent';
const cssLoaderWarning = dedent`
The apply-css-loader requires the file to be pre-processed by css-loader.
Make sure css-loader is applied before apply-css-loader.
The apply-css-loader requires the file to be pre-processed by either css-loader or css2json-loader.
Make sure the appropriate loader is applied before apply-css-loader.
`;
function hasCssLoader(loaders: any[], loaderIndex: number) {
return loaders
?.slice(loaderIndex)
.some(({ path }) => path.includes('css-loader'));
}
export default function loader(content, map) {
// if (this.request.match(/\/app\.(css|scss|less|sass)$/)) {
// return content;
// }
const hasLoader = (loader: string) => {
return this.loaders
?.slice(this.loaderIndex)
.some(({ path }) => path.includes(loader));
};
// Emit a warning if the file was not processed by the css-loader.
if (!hasCssLoader(this.loaders, this.loaderIndex)) {
this.emitWarning(new Error(cssLoaderWarning));
}
content = dedent`
/* CSS START */
if (hasLoader('apply-css-loader')) {
// add a tag to the applied css
const tag =
this.mode === 'development'
? `, ${JSON.stringify(this.resourcePath)}`
: '';
content = dedent`
${content}
/* CSS END */
/* APPLY CSS */
const { addTaggedAdditionalCSS } = require("@nativescript/core/ui/styling/style-scope");
addTaggedAdditionalCSS(___CSS2JSON_LOADER_EXPORT___${tag})
`;
} else if (hasLoader('css-loader')) {
content = dedent`
${content}
// apply css
const { Application } = require("@nativescript/core");
require("@nativescript/core/ui/styling/style-scope");
if (___CSS_LOADER_EXPORT___ && typeof ___CSS_LOADER_EXPORT___.forEach === "function") {
___CSS_LOADER_EXPORT___.forEach(cssExport => {
if (cssExport.length > 1 && cssExport[1]) {
@@ -39,6 +38,9 @@ export default function loader(content, map) {
});
}
`;
} else {
this.emitWarning(new Error(cssLoaderWarning));
}
this.callback(null, content, map);
}

11
packages/webpack5/src/loaders/css2json-loader/index.ts
View File

@@ -1,5 +1,6 @@
import { parse, Import, Stylesheet } from 'css';
import { urlToRequest } from 'loader-utils';
import { dedent } from 'ts-dedent';
const betweenQuotesPattern = /('|")(.*?)\1/;
const unpackUrlPattern = /url\(([^\)]+)\)/;
@@ -33,9 +34,17 @@ export default function loader(content: string, map: any) {
// map.mappings = map.mappings.replace(/;{2,}/, '')
const code = dedent`
/* CSS2JSON */
${dependencies.join('\n')}
const ___CSS2JSON_LOADER_EXPORT___ = ${str}
export default ___CSS2JSON_LOADER_EXPORT___
`;
this.callback(
null,
`${dependencies.join('\n')}module.exports = ${str};`,
code, //`${dependencies.join('\n')}module.exports = ${str};`,
null
);
}