source: trip-planner-front/node_modules/@angular-devkit/build-angular/src/webpack/configs/styles.js@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 20.1 KB
Line 
1"use strict";
2/**
3 * @license
4 * Copyright Google LLC All Rights Reserved.
5 *
6 * Use of this source code is governed by an MIT-style license that can be
7 * found in the LICENSE file at https://angular.io/license
8 */
9var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
10 if (k2 === undefined) k2 = k;
11 Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
12}) : (function(o, m, k, k2) {
13 if (k2 === undefined) k2 = k;
14 o[k2] = m[k];
15}));
16var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
17 Object.defineProperty(o, "default", { enumerable: true, value: v });
18}) : function(o, v) {
19 o["default"] = v;
20});
21var __importStar = (this && this.__importStar) || function (mod) {
22 if (mod && mod.__esModule) return mod;
23 var result = {};
24 if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
25 __setModuleDefault(result, mod);
26 return result;
27};
28Object.defineProperty(exports, "__esModule", { value: true });
29exports.getStylesConfig = void 0;
30const fs = __importStar(require("fs"));
31const path = __importStar(require("path"));
32const sass_service_1 = require("../../sass/sass-service");
33const build_browser_features_1 = require("../../utils/build-browser-features");
34const environment_options_1 = require("../../utils/environment-options");
35const plugins_1 = require("../plugins");
36const esbuild_executor_1 = require("../plugins/esbuild-executor");
37const helpers_1 = require("../utils/helpers");
38function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
39 const entryPoints = {};
40 const noInjectNames = [];
41 const paths = [];
42 if (styleEntrypoints.length === 0) {
43 return { entryPoints, noInjectNames, paths };
44 }
45 for (const style of helpers_1.normalizeExtraEntryPoints(styleEntrypoints, 'styles')) {
46 let resolvedPath = path.resolve(root, style.input);
47 if (!fs.existsSync(resolvedPath)) {
48 try {
49 resolvedPath = require.resolve(style.input, { paths: [root] });
50 }
51 catch { }
52 }
53 if (!preserveSymlinks) {
54 resolvedPath = fs.realpathSync(resolvedPath);
55 }
56 // Add style entry points.
57 if (entryPoints[style.bundleName]) {
58 entryPoints[style.bundleName].push(resolvedPath);
59 }
60 else {
61 entryPoints[style.bundleName] = [resolvedPath];
62 }
63 // Add non injected styles to the list.
64 if (!style.inject) {
65 noInjectNames.push(style.bundleName);
66 }
67 // Add global css paths.
68 paths.push(resolvedPath);
69 }
70 return { entryPoints, noInjectNames, paths };
71}
72// eslint-disable-next-line max-lines-per-function
73function getStylesConfig(wco) {
74 var _a, _b, _c;
75 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
76 const postcssImports = require('postcss-import');
77 const postcssPresetEnv = require('postcss-preset-env');
78 const { root, buildOptions } = wco;
79 const extraPlugins = [];
80 extraPlugins.push(new plugins_1.AnyComponentStyleBudgetChecker(buildOptions.budgets));
81 const cssSourceMap = buildOptions.sourceMap.styles;
82 // Determine hashing format.
83 const hashFormat = helpers_1.getOutputHashFormat(buildOptions.outputHashing);
84 // use includePaths from appConfig
85 const includePaths = (_c = (_b = (_a = buildOptions.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths) === null || _b === void 0 ? void 0 : _b.map((p) => path.resolve(root, p))) !== null && _c !== void 0 ? _c : [];
86 // Process global styles.
87 const { entryPoints, noInjectNames, paths: globalStylePaths, } = resolveGlobalStyles(buildOptions.styles, root, !!buildOptions.preserveSymlinks);
88 if (noInjectNames.length > 0) {
89 // Add plugin to remove hashes from lazy styles.
90 extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
91 }
92 if (globalStylePaths.some((p) => p.endsWith('.styl'))) {
93 wco.logger.warn('Stylus usage is deprecated and will be removed in a future major version. ' +
94 'To opt-out of the deprecated behaviour, please migrate to another stylesheet language.');
95 }
96 let sassImplementation;
97 try {
98 sassImplementation = require('node-sass');
99 wco.logger.warn(`'node-sass' usage is deprecated and will be removed in a future major version. ` +
100 `To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.`);
101 }
102 catch {
103 sassImplementation = new sass_service_1.SassWorkerImplementation();
104 extraPlugins.push({
105 apply(compiler) {
106 compiler.hooks.shutdown.tap('sass-worker', () => {
107 sassImplementation === null || sassImplementation === void 0 ? void 0 : sassImplementation.close();
108 });
109 },
110 });
111 }
112 const assetNameTemplate = helpers_1.assetNameTemplateFactory(hashFormat);
113 const extraPostcssPlugins = [];
114 // Attempt to setup Tailwind CSS
115 // A configuration file can exist in the project or workspace root
116 const tailwindConfigFile = 'tailwind.config.js';
117 let tailwindConfigPath;
118 for (const basePath of [wco.projectRoot, wco.root]) {
119 const fullPath = path.join(basePath, tailwindConfigFile);
120 if (fs.existsSync(fullPath)) {
121 tailwindConfigPath = fullPath;
122 break;
123 }
124 }
125 // Only load Tailwind CSS plugin if configuration file was found.
126 // This acts as a guard to ensure the project actually wants to use Tailwind CSS.
127 // The package may be unknowningly present due to a third-party transitive package dependency.
128 if (tailwindConfigPath) {
129 let tailwindPackagePath;
130 try {
131 tailwindPackagePath = require.resolve('tailwindcss', { paths: [wco.root] });
132 }
133 catch {
134 const relativeTailwindConfigPath = path.relative(wco.root, tailwindConfigPath);
135 wco.logger.warn(`Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
136 ` but the 'tailwindcss' package is not installed.` +
137 ` To enable Tailwind CSS, please install the 'tailwindcss' package.`);
138 }
139 if (tailwindPackagePath) {
140 if (process.env['TAILWIND_MODE'] === undefined) {
141 process.env['TAILWIND_MODE'] = buildOptions.watch ? 'watch' : 'build';
142 }
143 extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
144 }
145 }
146 const { supportedBrowsers } = new build_browser_features_1.BuildBrowserFeatures(wco.projectRoot);
147 const postcssPresetEnvPlugin = postcssPresetEnv({
148 browsers: supportedBrowsers,
149 autoprefixer: true,
150 stage: 3,
151 });
152 const postcssOptionsCreator = (inlineSourcemaps, extracted) => {
153 // eslint-disable-next-line @typescript-eslint/no-explicit-any
154 const optionGenerator = (loader) => ({
155 map: inlineSourcemaps
156 ? {
157 inline: true,
158 annotation: false,
159 }
160 : undefined,
161 plugins: [
162 postcssImports({
163 resolve: (url) => (url.startsWith('~') ? url.substr(1) : url),
164 load: (filename) => {
165 return new Promise((resolve, reject) => {
166 loader.fs.readFile(filename, (err, data) => {
167 if (err) {
168 reject(err);
169 return;
170 }
171 const content = data.toString();
172 resolve(content);
173 });
174 });
175 },
176 }),
177 plugins_1.PostcssCliResources({
178 baseHref: buildOptions.baseHref,
179 deployUrl: buildOptions.deployUrl,
180 resourcesOutputPath: buildOptions.resourcesOutputPath,
181 loader,
182 filename: assetNameTemplate,
183 emitFile: buildOptions.platform !== 'server',
184 extracted,
185 }),
186 ...extraPostcssPlugins,
187 postcssPresetEnvPlugin,
188 ],
189 });
190 // postcss-loader fails when trying to determine configuration files for data URIs
191 optionGenerator.config = false;
192 return optionGenerator;
193 };
194 // load component css as raw strings
195 const componentsSourceMap = !!(cssSourceMap &&
196 // Never use component css sourcemap when style optimizations are on.
197 // It will just increase bundle size without offering good debug experience.
198 !buildOptions.optimization.styles.minify &&
199 // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
200 // for component css.
201 !buildOptions.sourceMap.hidden);
202 if (buildOptions.extractCss) {
203 // extract global css from js files into own css file.
204 extraPlugins.push(new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }));
205 if (!buildOptions.hmr) {
206 // don't remove `.js` files for `.css` when we are using HMR these contain HMR accept codes.
207 // suppress empty .js files in css only entry points.
208 extraPlugins.push(new plugins_1.SuppressExtractedTextChunksWebpackPlugin());
209 }
210 }
211 const postCss = require('postcss');
212 const postCssLoaderPath = require.resolve('postcss-loader');
213 const componentStyleLoaders = [
214 {
215 loader: postCssLoaderPath,
216 options: {
217 implementation: postCss,
218 postcssOptions: postcssOptionsCreator(componentsSourceMap, false),
219 },
220 },
221 ];
222 const globalStyleLoaders = [
223 buildOptions.extractCss
224 ? {
225 loader: MiniCssExtractPlugin.loader,
226 }
227 : require.resolve('style-loader'),
228 {
229 loader: require.resolve('css-loader'),
230 options: {
231 url: false,
232 sourceMap: !!cssSourceMap,
233 },
234 },
235 {
236 loader: postCssLoaderPath,
237 options: {
238 implementation: postCss,
239 postcssOptions: postcssOptionsCreator(false, buildOptions.extractCss),
240 sourceMap: !!cssSourceMap,
241 },
242 },
243 ];
244 const extraMinimizers = [];
245 if (buildOptions.optimization.styles.minify) {
246 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
247 const esbuild = new esbuild_executor_1.EsbuildExecutor();
248 const cssnanoOptions = {
249 preset: [
250 'default',
251 {
252 // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
253 svgo: false,
254 // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
255 calc: false,
256 // Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
257 cssDeclarationSorter: false,
258 // Workaround for Critters as it doesn't work when `@media all {}` is minified to `@media {}`.
259 // TODO: Remove once they move to postcss.
260 minifyParams: !buildOptions.optimization.styles.inlineCritical,
261 },
262 ],
263 };
264 const globalBundlesRegExp = new RegExp(`^(${Object.keys(entryPoints).join('|')})(\.[0-9a-f]{20})?.css$`);
265 const target = transformSupportedBrowsersToTargets(supportedBrowsers);
266 extraMinimizers.push(
267 // Component styles use esbuild which is faster and generates smaller files on average.
268 // esbuild does not yet support style sourcemaps but component style sourcemaps are not
269 // supported by the CLI when style minify is enabled.
270 new CssMinimizerPlugin({
271 // Component styles retain their original file name
272 test: /\.(?:css|scss|sass|less|styl)$/,
273 exclude: globalBundlesRegExp,
274 parallel: false,
275 minify: async (data) => {
276 const [[sourcefile, input]] = Object.entries(data);
277 const { code, warnings } = await esbuild.transform(input, {
278 loader: 'css',
279 minify: true,
280 sourcefile,
281 target,
282 });
283 return {
284 code,
285 warnings: warnings.length > 0
286 ? await esbuild.formatMessages(warnings, { kind: 'warning' })
287 : [],
288 };
289 },
290 }),
291 // Global styles use cssnano since sourcemap support is required even when minify
292 // is enabled. Once esbuild supports style sourcemaps this can be changed.
293 // esbuild stylesheet source map support issue: https://github.com/evanw/esbuild/issues/519
294 new CssMinimizerPlugin({
295 test: /\.css$/,
296 include: globalBundlesRegExp,
297 parallel: environment_options_1.maxWorkers,
298 minify: [CssMinimizerPlugin.cssnanoMinify],
299 minimizerOptions: cssnanoOptions,
300 }));
301 }
302 const styleLanguages = [
303 {
304 extensions: ['css'],
305 use: [],
306 },
307 {
308 extensions: ['scss'],
309 use: [
310 {
311 loader: require.resolve('resolve-url-loader'),
312 options: {
313 sourceMap: cssSourceMap,
314 },
315 },
316 {
317 loader: require.resolve('sass-loader'),
318 options: {
319 implementation: sassImplementation,
320 sourceMap: true,
321 sassOptions: {
322 // Prevent use of `fibers` package as it no longer works in newer Node.js versions
323 fiber: false,
324 // bootstrap-sass requires a minimum precision of 8
325 precision: 8,
326 includePaths,
327 // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
328 // Ex: /* autoprefixer grid: autoplace */
329 // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
330 outputStyle: 'expanded',
331 // Silences compiler warnings from 3rd party stylesheets
332 quietDeps: !buildOptions.verbose,
333 verbose: buildOptions.verbose,
334 },
335 },
336 },
337 ],
338 },
339 {
340 extensions: ['sass'],
341 use: [
342 {
343 loader: require.resolve('resolve-url-loader'),
344 options: {
345 sourceMap: cssSourceMap,
346 },
347 },
348 {
349 loader: require.resolve('sass-loader'),
350 options: {
351 implementation: sassImplementation,
352 sourceMap: true,
353 sassOptions: {
354 // Prevent use of `fibers` package as it no longer works in newer Node.js versions
355 fiber: false,
356 indentedSyntax: true,
357 // bootstrap-sass requires a minimum precision of 8
358 precision: 8,
359 includePaths,
360 // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
361 // Ex: /* autoprefixer grid: autoplace */
362 // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
363 outputStyle: 'expanded',
364 // Silences compiler warnings from 3rd party stylesheets
365 quietDeps: !buildOptions.verbose,
366 verbose: buildOptions.verbose,
367 },
368 },
369 },
370 ],
371 },
372 {
373 extensions: ['less'],
374 use: [
375 {
376 loader: require.resolve('less-loader'),
377 options: {
378 implementation: require('less'),
379 sourceMap: cssSourceMap,
380 lessOptions: {
381 javascriptEnabled: true,
382 paths: includePaths,
383 },
384 },
385 },
386 ],
387 },
388 {
389 extensions: ['styl'],
390 use: [
391 {
392 loader: require.resolve('stylus-loader'),
393 options: {
394 sourceMap: cssSourceMap,
395 stylusOptions: {
396 compress: false,
397 sourceMap: { comment: false },
398 paths: includePaths,
399 },
400 },
401 },
402 ],
403 },
404 ];
405 return {
406 entry: entryPoints,
407 module: {
408 rules: styleLanguages.map(({ extensions, use }) => ({
409 test: new RegExp(`\\.(?:${extensions.join('|')})$`, 'i'),
410 rules: [
411 // Setup processing rules for global and component styles
412 {
413 oneOf: [
414 // Component styles are all styles except defined global styles
415 {
416 exclude: globalStylePaths,
417 use: componentStyleLoaders,
418 type: 'asset/source',
419 },
420 // Global styles are only defined global styles
421 {
422 include: globalStylePaths,
423 use: globalStyleLoaders,
424 },
425 ],
426 },
427 { use },
428 ],
429 })),
430 },
431 optimization: {
432 minimizer: extraMinimizers,
433 },
434 plugins: extraPlugins,
435 };
436}
437exports.getStylesConfig = getStylesConfig;
438function transformSupportedBrowsersToTargets(supportedBrowsers) {
439 const transformed = [];
440 // https://esbuild.github.io/api/#target
441 const esBuildSupportedBrowsers = new Set(['safari', 'firefox', 'edge', 'chrome', 'ios']);
442 for (const browser of supportedBrowsers) {
443 let [browserName, version] = browser.split(' ');
444 // browserslist uses the name `ios_saf` for iOS Safari whereas esbuild uses `ios`
445 if (browserName === 'ios_saf') {
446 browserName = 'ios';
447 // browserslist also uses ranges for iOS Safari versions but only the lowest is required
448 // to perform minimum supported feature checks. esbuild also expects a single version.
449 [version] = version.split('-');
450 }
451 if (browserName === 'ie') {
452 transformed.push('edge12');
453 }
454 else if (esBuildSupportedBrowsers.has(browserName)) {
455 if (browserName === 'safari' && version === 'TP') {
456 // esbuild only supports numeric versions so `TP` is converted to a high number (999) since
457 // a Technology Preview (TP) of Safari is assumed to support all currently known features.
458 version = '999';
459 }
460 transformed.push(browserName + version);
461 }
462 }
463 return transformed.length ? transformed : undefined;
464}
Note: See TracBrowser for help on using the repository browser.