Skip to content

Commit 6d085c4

Browse files
ocombeocombe
committed
fix: support pre-bundled preview
1 parent 18c91e1 commit 6d085c4

12 files changed

+239
-49
lines changed

‎angular/envs/angular-v13-env/webpack-config.factory.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ async function getWebpackConfig(
127127
sourceMap: angularOptions.sourceMap ?? true,
128128
outputHashing: angularOptions.outputHashing ?? (setup === BundlerSetup.Build ? OutputHashing.All : OutputHashing.None),
129129
watch: setup === BundlerSetup.Serve,
130-
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])],
130+
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', '@teambit/preview', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])],
131131
};
132132

133133
const normalizedWorkspaceRoot = normalize(workspaceRoot);

‎angular/envs/angular-v13-env/webpack/module-rules.config.ts

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import { generateStyleLoaders } from '@teambit/webpack.modules.generate-style-loaders';
2+
import * as stylesRegexps from '@teambit/webpack.modules.style-regexps';
3+
import { merge } from 'lodash';
4+
import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';
5+
import RemarkFrontmatter from 'remark-frontmatter';
6+
import RemarkHTML from 'remark-html';
7+
import RemarkPrism from 'remark-prism';
8+
import { RuleSetRule } from 'webpack';
9+
10+
const postCssConfig = {
11+
// Necessary for external CSS imports to work
12+
// https://github.com/facebook/create-react-app/issues/2677
13+
ident: 'postcss',
14+
plugins: [
15+
// eslint-disable-next-line global-require
16+
require.resolve('postcss-flexbugs-fixes'),
17+
// eslint-disable-next-line global-require
18+
require('postcss-preset-env')({
19+
autoprefixer: {
20+
flexbox: 'no-2009',
21+
},
22+
stage: 3,
23+
}),
24+
// Adds PostCSS Normalize as the reset css with default options,
25+
// so that it honors browserslist config in package.json
26+
// which in turn lets users customize the target behavior as per their needs.
27+
// require.resolve('postcss-normalize'),
28+
],
29+
};
30+
31+
const styleLoaderPath = require.resolve('style-loader');
32+
33+
// Source maps are resource heavy and can cause out of memory issue for large source files.
34+
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
35+
36+
export function getModuleRulesConfig(isEnvProduction: boolean): RuleSetRule[] {
37+
const baseStyleLoadersOptions = {
38+
injectingLoader: styleLoaderPath,
39+
cssLoaderPath: require.resolve('css-loader'),
40+
postCssLoaderPath: require.resolve('postcss-loader'),
41+
postCssConfig
42+
};
43+
44+
return [
45+
{
46+
test: /\.m?js/,
47+
resolve: {
48+
fullySpecified: false
49+
}
50+
},
51+
{
52+
// "oneOf" will traverse all following loaders until one will
53+
// match the requirements. When no loader matches it will fall
54+
// back to the "file" loader at the end of the loader list.
55+
oneOf: [
56+
// MDX support
57+
{
58+
test: /\.md$/,
59+
use: [
60+
{
61+
loader: 'html-loader'
62+
},
63+
{
64+
loader: 'remark-loader',
65+
options: {
66+
removeFrontMatter: false,
67+
remarkOptions: {
68+
plugins: [RemarkPrism, RemarkHTML, RemarkFrontmatter]
69+
}
70+
}
71+
}
72+
]
73+
},
74+
// "postcss" loader applies autoprefixer to our CSS.
75+
// "css" loader resolves paths in CSS and adds assets as dependencies.
76+
// "style" loader turns CSS into JS modules that inject <style> tags.
77+
// In production, we use MiniCSSExtractPlugin to extract that CSS
78+
// to a file, but in development "style" loader enables hot editing
79+
// of CSS.
80+
// By default we support CSS Modules with the extension .module.css
81+
{
82+
test: stylesRegexps.cssNoModulesRegex,
83+
use: generateStyleLoaders(
84+
merge({}, baseStyleLoadersOptions, {
85+
cssLoaderOpts: {
86+
importLoaders: 1,
87+
sourceMap: isEnvProduction || shouldUseSourceMap,
88+
},
89+
})
90+
),
91+
// Don't consider CSS imports dead code even if the
92+
// containing package claims to have no side effects.
93+
// Remove this when webpack adds a warning or an error for this.
94+
// See https://github.com/webpack/webpack/issues/6571
95+
sideEffects: true,
96+
},
97+
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
98+
// using the extension .module.css
99+
{
100+
test: stylesRegexps.cssModuleRegex,
101+
use: generateStyleLoaders(
102+
merge({}, baseStyleLoadersOptions, {
103+
cssLoaderOpts: {
104+
importLoaders: 1,
105+
sourceMap: isEnvProduction || shouldUseSourceMap,
106+
modules: {
107+
getLocalIdent: getCSSModuleLocalIdent
108+
}
109+
},
110+
shouldUseSourceMap: isEnvProduction || shouldUseSourceMap
111+
})
112+
)
113+
},
114+
// Adds support for CSS Modules, but using SASS
115+
// using the extension .module.scss or .module.sass
116+
{
117+
test: stylesRegexps.sassModuleRegex,
118+
use: generateStyleLoaders(
119+
merge({}, baseStyleLoadersOptions, {
120+
cssLoaderOpts: {
121+
importLoaders: 3,
122+
sourceMap: isEnvProduction || shouldUseSourceMap,
123+
modules: {
124+
getLocalIdent: getCSSModuleLocalIdent
125+
}
126+
},
127+
shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,
128+
preProcessOptions: {
129+
resolveUrlLoaderPath: require.resolve('resolve-url-loader'),
130+
preProcessorPath: require.resolve('sass-loader')
131+
}
132+
})
133+
)
134+
}
135+
]
136+
}
137+
];
138+
}

‎angular/envs/angular-v13-env/webpack/webpack5.build.config.ts

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { BitDedupeModuleResolvePlugin, WebpackConfig } from '@bitdev/angular.dev-services.webpack';
22
import { fallbacks, fallbacksAliases, fallbacksProvidePluginConfig } from '@teambit/webpack';
33
import { sep } from 'path';
4-
import RemarkFrontmatter from 'remark-frontmatter';
5-
import RemarkHTML from 'remark-html';
6-
import RemarkPrism from 'remark-prism';
74
import webpack from 'webpack';
5+
import { getModuleRulesConfig } from './module-rules.config';
86

97
export function webpack5BuildConfigFactory(
108
entryFiles: string[],
@@ -46,25 +44,7 @@ export function webpack5BuildConfigFactory(
4644
},
4745

4846
module: {
49-
rules: [
50-
{
51-
test: /\.md$/,
52-
use: [
53-
{
54-
loader: 'html-loader',
55-
},
56-
{
57-
loader: 'remark-loader',
58-
options: {
59-
removeFrontMatter: false,
60-
remarkOptions: {
61-
plugins: [RemarkPrism, RemarkHTML, RemarkFrontmatter],
62-
},
63-
},
64-
},
65-
],
66-
},
67-
],
47+
rules: getModuleRulesConfig(true),
6848
},
6949

7050
plugins: [

‎angular/envs/angular-v13-env/webpack/webpack5.serve.config.ts

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,8 @@ import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
1616
import getPublicUrlOrPath from 'react-dev-utils/getPublicUrlOrPath';
1717
import noopServiceWorkerMiddleware from 'react-dev-utils/noopServiceWorkerMiddleware';
1818
import redirectServedPath from 'react-dev-utils/redirectServedPathMiddleware';
19-
import RemarkFrontmatter from 'remark-frontmatter';
20-
import RemarkHTML from 'remark-html';
21-
import RemarkPrism from 'remark-prism';
2219
import { ProvidePlugin } from 'webpack';
20+
import { getModuleRulesConfig } from './module-rules.config';
2321

2422
const publicUrlOrPath = getPublicUrlOrPath(process.env.NODE_ENV === 'development', '/', '/public');
2523

@@ -163,25 +161,7 @@ export function webpack5ServeConfigFactory(
163161
},
164162

165163
module: {
166-
rules: [
167-
{
168-
test: /\.md$/,
169-
use: [
170-
{
171-
loader: 'html-loader',
172-
},
173-
{
174-
loader: 'remark-loader',
175-
options: {
176-
removeFrontMatter: false,
177-
remarkOptions: {
178-
plugins: [RemarkPrism, RemarkHTML, RemarkFrontmatter],
179-
},
180-
},
181-
},
182-
],
183-
},
184-
],
164+
rules: getModuleRulesConfig(false)
185165
},
186166

187167
plugins: [

‎angular/envs/angular-v14-env/webpack-config.factory.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ async function getWebpackConfig(
127127
sourceMap: angularOptions.sourceMap ?? true,
128128
outputHashing: angularOptions.outputHashing ?? (setup === BundlerSetup.Build ? OutputHashing.All : OutputHashing.None),
129129
watch: setup === BundlerSetup.Serve,
130-
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])]
130+
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', '@teambit/preview', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])]
131131
};
132132

133133
const normalizedWorkspaceRoot = normalize(workspaceRoot);

‎angular/envs/angular-v14-env/webpack/module-rules.config.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,29 @@ export function getModuleRulesConfig(isEnvProduction: boolean): RuleSetRule[] {
7171
}
7272
]
7373
},
74+
// "postcss" loader applies autoprefixer to our CSS.
75+
// "css" loader resolves paths in CSS and adds assets as dependencies.
76+
// "style" loader turns CSS into JS modules that inject <style> tags.
77+
// In production, we use MiniCSSExtractPlugin to extract that CSS
78+
// to a file, but in development "style" loader enables hot editing
79+
// of CSS.
80+
// By default we support CSS Modules with the extension .module.css
81+
{
82+
test: stylesRegexps.cssNoModulesRegex,
83+
use: generateStyleLoaders(
84+
merge({}, baseStyleLoadersOptions, {
85+
cssLoaderOpts: {
86+
importLoaders: 1,
87+
sourceMap: isEnvProduction || shouldUseSourceMap,
88+
},
89+
})
90+
),
91+
// Don't consider CSS imports dead code even if the
92+
// containing package claims to have no side effects.
93+
// Remove this when webpack adds a warning or an error for this.
94+
// See https://github.com/webpack/webpack/issues/6571
95+
sideEffects: true,
96+
},
7497
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
7598
// using the extension .module.css
7699
{

‎angular/envs/angular-v15-env/webpack-config.factory.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ async function getWebpackConfig(
124124
sourceMap: angularOptions.sourceMap ?? true,
125125
outputHashing: angularOptions.outputHashing ?? (setup === BundlerSetup.Build ? OutputHashing.All : OutputHashing.None),
126126
watch: setup === BundlerSetup.Serve,
127-
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])]
127+
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', '@teambit/preview', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])]
128128
};
129129

130130
const normalizedWorkspaceRoot = normalize(workspaceRoot);

‎angular/envs/angular-v15-env/webpack/module-rules.config.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,29 @@ export function getModuleRulesConfig(isEnvProduction: boolean): RuleSetRule[] {
7171
}
7272
]
7373
},
74+
// "postcss" loader applies autoprefixer to our CSS.
75+
// "css" loader resolves paths in CSS and adds assets as dependencies.
76+
// "style" loader turns CSS into JS modules that inject <style> tags.
77+
// In production, we use MiniCSSExtractPlugin to extract that CSS
78+
// to a file, but in development "style" loader enables hot editing
79+
// of CSS.
80+
// By default we support CSS Modules with the extension .module.css
81+
{
82+
test: stylesRegexps.cssNoModulesRegex,
83+
use: generateStyleLoaders(
84+
merge({}, baseStyleLoadersOptions, {
85+
cssLoaderOpts: {
86+
importLoaders: 1,
87+
sourceMap: isEnvProduction || shouldUseSourceMap,
88+
},
89+
})
90+
),
91+
// Don't consider CSS imports dead code even if the
92+
// containing package claims to have no side effects.
93+
// Remove this when webpack adds a warning or an error for this.
94+
// See https://github.com/webpack/webpack/issues/6571
95+
sideEffects: true,
96+
},
7497
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
7598
// using the extension .module.css
7699
{

‎angular/envs/angular-v16-env/webpack-config.factory.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ async function getWebpackConfig(
124124
sourceMap: angularOptions.sourceMap ?? true,
125125
outputHashing: angularOptions.outputHashing ?? (setup === BundlerSetup.Build ? OutputHashing.All : OutputHashing.None),
126126
watch: setup === BundlerSetup.Serve,
127-
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])]
127+
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', '@teambit/preview', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])]
128128
};
129129
const normalizedWorkspaceRoot = normalize(workspaceRoot);
130130
// used to load component config files, such as tailwind config, ...

‎angular/envs/angular-v16-env/webpack/module-rules.config.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,29 @@ export function getModuleRulesConfig(isEnvProduction: boolean): RuleSetRule[] {
7171
}
7272
]
7373
},
74+
// "postcss" loader applies autoprefixer to our CSS.
75+
// "css" loader resolves paths in CSS and adds assets as dependencies.
76+
// "style" loader turns CSS into JS modules that inject <style> tags.
77+
// In production, we use MiniCSSExtractPlugin to extract that CSS
78+
// to a file, but in development "style" loader enables hot editing
79+
// of CSS.
80+
// By default we support CSS Modules with the extension .module.css
81+
{
82+
test: stylesRegexps.cssNoModulesRegex,
83+
use: generateStyleLoaders(
84+
merge({}, baseStyleLoadersOptions, {
85+
cssLoaderOpts: {
86+
importLoaders: 1,
87+
sourceMap: isEnvProduction || shouldUseSourceMap,
88+
},
89+
})
90+
),
91+
// Don't consider CSS imports dead code even if the
92+
// containing package claims to have no side effects.
93+
// Remove this when webpack adds a warning or an error for this.
94+
// See https://github.com/webpack/webpack/issues/6571
95+
sideEffects: true,
96+
},
7497
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
7598
// using the extension .module.css
7699
{

‎angular/envs/angular-v17-env/webpack-config.factory.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ async function getWebpackConfig(
124124
sourceMap: angularOptions.sourceMap ?? true,
125125
outputHashing: angularOptions.outputHashing ?? (setup === BundlerSetup.Build ? OutputHashing.All : OutputHashing.None),
126126
watch: setup === BundlerSetup.Serve,
127-
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])]
127+
allowedCommonJsDependencies: ['dompurify', '@teambit/harmony', '@teambit/preview', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])]
128128
};
129129
const normalizedWorkspaceRoot = normalize(workspaceRoot);
130130
// used to load component config files, such as tailwind config, ...

‎angular/envs/angular-v17-env/webpack/module-rules.config.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,29 @@ export function getModuleRulesConfig(isEnvProduction: boolean): RuleSetRule[] {
7171
}
7272
]
7373
},
74+
// "postcss" loader applies autoprefixer to our CSS.
75+
// "css" loader resolves paths in CSS and adds assets as dependencies.
76+
// "style" loader turns CSS into JS modules that inject <style> tags.
77+
// In production, we use MiniCSSExtractPlugin to extract that CSS
78+
// to a file, but in development "style" loader enables hot editing
79+
// of CSS.
80+
// By default we support CSS Modules with the extension .module.css
81+
{
82+
test: stylesRegexps.cssNoModulesRegex,
83+
use: generateStyleLoaders(
84+
merge({}, baseStyleLoadersOptions, {
85+
cssLoaderOpts: {
86+
importLoaders: 1,
87+
sourceMap: isEnvProduction || shouldUseSourceMap,
88+
},
89+
})
90+
),
91+
// Don't consider CSS imports dead code even if the
92+
// containing package claims to have no side effects.
93+
// Remove this when webpack adds a warning or an error for this.
94+
// See https://github.com/webpack/webpack/issues/6571
95+
sideEffects: true,
96+
},
7497
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
7598
// using the extension .module.css
7699
{

0 commit comments

Comments
 (0)