Skip to content

Commit

Permalink
feat(web): upgrade to postcss v8 (#4277)
Browse files Browse the repository at this point in the history 
* feat(web): upgrade to postcss v8

* fix(web): update usage of updated postcss plugin

* fix(web): account for change in postcss-loader behaviour with additional loader
  • Loading branch information
@JamesHenry
JamesHenry committed Feb 3, 2021
1 parent 06f84b3 commit 132eb71
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 166 deletions.
8 changes: 4 additions & 4 deletions package.json
View file
Expand Up @@ -199,9 +199,9 @@
"open": "6.4.0",
"opn": "^5.3.0",
"parse5": "4.0.0",
"postcss": "7.0.27",
"postcss-import": "12.0.1",
"postcss-loader": "3.0.0",
"postcss": "8.2.4",
"postcss-import": "14.0.0",
"postcss-loader": "4.2.0",
"precise-commits": "1.0.2",
"prettier": "2.2.1",
"pretty-quick": "^2.0.1",
Expand All @@ -219,7 +219,7 @@
"rollup-plugin-filesize": "^9.0.0",
"rollup-plugin-local-resolve": "1.0.7",
"rollup-plugin-peer-deps-external": "2.2.2",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-typescript2": "^0.27.1",
"rxjs": "6.6.3",
"rxjs-for-await": "0.0.2",
Expand Down
8 changes: 4 additions & 4 deletions packages/web/package.json
View file
Expand Up @@ -79,9 +79,9 @@
"parse5": "4.0.0",
"open": "6.4.0",
"opn": "^5.3.0",
"postcss": "7.0.27",
"postcss-import": "12.0.1",
"postcss-loader": "3.0.0",
"postcss": "8.2.4",
"postcss-import": "14.0.0",
"postcss-loader": "4.2.0",
"raw-loader": "3.1.0",
"rxjs": "^6.5.4",
"rxjs-for-await": "0.0.2",
Expand All @@ -92,7 +92,7 @@
"rollup-plugin-filesize": "^9.0.0",
"rollup-plugin-local-resolve": "^1.0.7",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-typescript2": "^0.27.1",
"sass": "^1.26.3",
"sass-loader": "8.0.2",
Expand Down
99 changes: 53 additions & 46 deletions packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts
View file
Expand Up @@ -46,35 +46,41 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
// Determine hashing format.
const hashFormat = getOutputHashFormat(buildOptions.outputHashing as string);

const postcssPluginCreator = function (loader: webpack.loader.LoaderContext) {
return [
postcssImports({
resolve: (url: string) => (url.startsWith('~') ? url.substr(1) : url),
load: (filename: string) => {
return new Promise<string>((resolve, reject) => {
loader.fs.readFile(filename, (err: Error, data: Buffer) => {
if (err) {
reject(err);
const postcssOptionsCreator = (sourceMap: boolean) => {
return (loader: webpack.loader.LoaderContext) => ({
map: sourceMap && {
inline: true,
annotation: false,
},
plugins: [
postcssImports({
resolve: (url: string) => (url.startsWith('~') ? url.substr(1) : url),
load: (filename: string) => {
return new Promise<string>((resolve, reject) => {
loader.fs.readFile(filename, (err: Error, data: Buffer) => {
if (err) {
reject(err);

return;
}
return;
}

const content = data.toString();
resolve(content);
const content = data.toString();
resolve(content);
});
});
});
},
}),
PostcssCliResources({
baseHref: buildOptions.baseHref,
deployUrl: buildOptions.deployUrl,
resourcesOutputPath: buildOptions.resourcesOutputPath,
loader,
rebaseRootRelative: buildOptions.rebaseRootRelativeCssUrls,
filename: `[name]${hashFormat.file}.[ext]`,
}),
autoprefixer(),
];
},
}),
PostcssCliResources({
baseHref: buildOptions.baseHref,
deployUrl: buildOptions.deployUrl,
resourcesOutputPath: buildOptions.resourcesOutputPath,
loader,
rebaseRootRelative: buildOptions.rebaseRootRelativeCssUrls,
filename: `[name]${hashFormat.file}.[ext]`,
}),
autoprefixer(),
],
});
};

// use includePaths from appConfig
Expand Down Expand Up @@ -188,26 +194,31 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
];

// load component css as raw strings
const componentsSourceMap = !!(
cssSourceMap &&
// Never use component css sourcemap when style optimizations are on.
// It will just increase bundle size without offering good debug experience.
!buildOptions.optimization.styles &&
// Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
// for component css.
!buildOptions.sourceMap.hidden
);

const rules: webpack.RuleSetRule[] = baseRules.map(({ test, use }) => ({
exclude: globalStylePaths,
test,
use: [
{ loader: require.resolve('raw-loader') },
// Including RawCssLoader here because per v4.x release notes for postcss-loader under breaking changes:
// "loader output only CSS, so you need to use css-loader/file-loader/raw-loader to inject code inside bundle"
RawCssLoader,
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'embedded',
plugins: postcssPluginCreator,
sourceMap:
cssSourceMap &&
// Never use component css sourcemap when style optimizations are on.
// It will just increase bundle size without offering good debug experience.
!buildOptions.optimization.styles &&
// Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
// for component css.
!buildOptions.sourceMap.hidden
? 'inline'
: false,
postcssOptions: {
implementation: require('postcss'),
postcssOptions: postcssOptionsCreator(componentsSourceMap),
},
},
},
...(use as webpack.Loader[]),
Expand All @@ -216,6 +227,8 @@ export function getStylesConfig(wco: WebpackConfigOptions) {

// load global css as css files
if (globalStylePaths.length > 0) {
const globalSourceMap = !!cssSourceMap && !buildOptions.sourceMap.hidden;

rules.push(
...baseRules.map(({ test, use }) => {
return {
Expand All @@ -229,14 +242,8 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
{
loader: require.resolve('postcss-loader'),
options: {
ident: buildOptions.extractCss ? 'extracted' : 'embedded',
plugins: postcssPluginCreator,
sourceMap:
cssSourceMap &&
!buildOptions.extractCss &&
!buildOptions.sourceMap.hidden
? 'inline'
: cssSourceMap,
implementation: require('postcss'),
postcssOptions: postcssOptionsCreator(globalSourceMap),
},
},
...(use as webpack.Loader[]),
Expand Down

0 comments on commit 132eb71

Please sign in to comment.