Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extract CSS Loaders into Separate Files (#10210)
- Loading branch information
Showing
6 changed files
with
160 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/next/build/webpack/config/blocks/css/loaders/client.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import webpack from 'webpack' | ||
| import MiniCssExtractPlugin from '../../../../plugins/mini-css-extract-plugin' | ||
|
|
||
| export function getClientStyleLoader({ | ||
| isDevelopment, | ||
| assetPrefix, | ||
| }: { | ||
| isDevelopment: boolean | ||
| assetPrefix: string | ||
| }): webpack.RuleSetUseItem { | ||
| return isDevelopment | ||
| ? { | ||
| loader: require.resolve('style-loader'), | ||
| options: { | ||
| // By default, style-loader injects CSS into the bottom | ||
| // of <head>. This causes ordering problems between dev | ||
| // and prod. To fix this, we render a <noscript> tag as | ||
| // an anchor for the styles to be placed before. These | ||
| // styles will be applied _before_ <style jsx global>. | ||
| insert: function(element: Node) { | ||
| // These elements should always exist. If they do not, | ||
| // this code should fail. | ||
| var anchorElement = document.querySelector( | ||
| '#__next_css__DO_NOT_USE__' | ||
| )! | ||
| var parentNode = anchorElement.parentNode! // Normally <head> | ||
|
|
||
| // Each style tag should be placed right before our | ||
| // anchor. By inserting before and not after, we do not | ||
| // need to track the last inserted element. | ||
| parentNode.insertBefore(element, anchorElement) | ||
|
|
||
| // Remember: this is development only code. | ||
| // | ||
| // After styles are injected, we need to remove the | ||
| // <style> tags that set `body { display: none; }`. | ||
| // | ||
| // We use `requestAnimationFrame` as a way to defer | ||
| // this operation since there may be multiple style | ||
| // tags. | ||
| ;(self.requestAnimationFrame || setTimeout)(function() { | ||
| for ( | ||
| var x = document.querySelectorAll('[data-next-hide-fouc]'), | ||
| i = x.length; | ||
| i--; | ||
|
|
||
| ) { | ||
| x[i].parentNode!.removeChild(x[i]) | ||
| } | ||
| }) | ||
| }, | ||
| }, | ||
| } | ||
| : { | ||
| loader: MiniCssExtractPlugin.loader, | ||
| options: { publicPath: `${assetPrefix}/_next/` }, | ||
| } | ||
| } |
File renamed without changes.
40 changes: 40 additions & 0 deletions
40
packages/next/build/webpack/config/blocks/css/loaders/global.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import postcss from 'postcss' | ||
| import webpack from 'webpack' | ||
| import { ConfigurationContext } from '../../../utils' | ||
| import { getClientStyleLoader } from './client' | ||
|
|
||
| export function getGlobalCssLoader( | ||
| ctx: ConfigurationContext, | ||
| postCssPlugins: postcss.AcceptedPlugin[] | ||
| ): webpack.RuleSetUseItem[] { | ||
| const loaders: webpack.RuleSetUseItem[] = [] | ||
|
|
||
| if (ctx.isClient) { | ||
| // Add appropriate development more or production mode style | ||
| // loader | ||
| loaders.push( | ||
| getClientStyleLoader({ | ||
| isDevelopment: ctx.isDevelopment, | ||
| assetPrefix: ctx.assetPrefix, | ||
| }) | ||
| ) | ||
| } | ||
|
|
||
| // Resolve CSS `@import`s and `url()`s | ||
| loaders.push({ | ||
| loader: require.resolve('css-loader'), | ||
| options: { importLoaders: 1, sourceMap: true }, | ||
| }) | ||
|
|
||
| // Compile CSS | ||
| loaders.push({ | ||
| loader: require.resolve('postcss-loader'), | ||
| options: { | ||
| ident: '__nextjs_postcss', | ||
| plugins: postCssPlugins, | ||
| sourceMap: true, | ||
| }, | ||
| }) | ||
|
|
||
| return loaders | ||
| } |
2 changes: 2 additions & 0 deletions
2
packages/next/build/webpack/config/blocks/css/loaders/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './global' | ||
| export * from './modules' |
56 changes: 56 additions & 0 deletions
56
packages/next/build/webpack/config/blocks/css/loaders/modules.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import postcss from 'postcss' | ||
| import webpack from 'webpack' | ||
| import { ConfigurationContext } from '../../../utils' | ||
| import { getClientStyleLoader } from './client' | ||
| import { getCssModuleLocalIdent } from './getCssModuleLocalIdent' | ||
|
|
||
| export function getCssModuleLoader( | ||
| ctx: ConfigurationContext, | ||
| postCssPlugins: postcss.AcceptedPlugin[] | ||
| ): webpack.RuleSetUseItem[] { | ||
| const loaders: webpack.RuleSetUseItem[] = [] | ||
|
|
||
| if (ctx.isClient) { | ||
| // Add appropriate development more or production mode style | ||
| // loader | ||
| loaders.push( | ||
| getClientStyleLoader({ | ||
| isDevelopment: ctx.isDevelopment, | ||
| assetPrefix: ctx.assetPrefix, | ||
| }) | ||
| ) | ||
| } | ||
|
|
||
| // Resolve CSS `@import`s and `url()`s | ||
| loaders.push({ | ||
| loader: require.resolve('css-loader'), | ||
| options: { | ||
| importLoaders: 1, | ||
| sourceMap: true, | ||
| onlyLocals: ctx.isServer, | ||
| modules: { | ||
| // Disallow global style exports so we can code-split CSS and | ||
| // not worry about loading order. | ||
| mode: 'pure', | ||
| // Generate a friendly production-ready name so it's | ||
| // reasonably understandable. The same name is used for | ||
| // development. | ||
| // TODO: Consider making production reduce this to a single | ||
| // character? | ||
| getLocalIdent: getCssModuleLocalIdent, | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| // Compile CSS | ||
| loaders.push({ | ||
| loader: require.resolve('postcss-loader'), | ||
| options: { | ||
| ident: '__nextjs_postcss', | ||
| plugins: postCssPlugins, | ||
| sourceMap: true, | ||
| }, | ||
| }) | ||
|
|
||
| return loaders | ||
| } |