Skip to content

Commit

Permalink
chore: compile style-loader dep (#21355)
Browse files Browse the repository at this point in the history 
This PR compiles `style-loader` to resolve a peer dep warning.

---

Closes #21359
  • Loading branch information
@Timer
Timer committed Jan 20, 2021
1 parent 0d0db45 commit 55b8502
Show file tree
Hide file tree
Showing 9 changed files with 770 additions and 10 deletions.
1 change: 1 addition & 0 deletions packages/next/build/webpack-config.ts
View file
Expand Up @@ -875,6 +875,7 @@ export default async function getBaseWebpackConfig(
'next-serverless-loader',
'noop-loader',
'next-plugin-loader',
'next-style-loader',
].reduce((alias, loader) => {
// using multiple aliases to replace `resolveLoader.modules`
alias[loader] = path.join(__dirname, 'webpack', 'loaders', loader)
Expand Down
2 changes: 1 addition & 1 deletion packages/next/build/webpack/config/blocks/css/loaders/client.ts
View file
Expand Up @@ -10,7 +10,7 @@ export function getClientStyleLoader({
}): webpack.RuleSetUseItem {
return isDevelopment
? {
loader: require.resolve('style-loader'),
loader: 'next-style-loader',
options: {
// By default, style-loader injects CSS into the bottom
// of <head>. This causes ordering problems between dev
Expand Down
20 changes: 20 additions & 0 deletions packages/next/build/webpack/loaders/next-style-loader/LICENSE
View file
@@ -0,0 +1,20 @@
Copyright JS Foundation and other contributors

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
345 changes: 345 additions & 0 deletions packages/next/build/webpack/loaders/next-style-loader/index.js
View file
@@ -0,0 +1,345 @@
import loaderUtils from 'next/dist/compiled/loader-utils'
import path from 'path'
import { validate } from 'next/dist/compiled/schema-utils3'
import isEqualLocals from './runtime/isEqualLocals'

const schema = {
type: 'object',
properties: {
injectType: {
description:
'Allows to setup how styles will be injected into DOM (https://github.com/webpack-contrib/style-loader#injecttype).',
enum: [
'styleTag',
'singletonStyleTag',
'lazyStyleTag',
'lazySingletonStyleTag',
'linkTag',
],
},
attributes: {
description:
'Adds custom attributes to tag (https://github.com/webpack-contrib/style-loader#attributes).',
type: 'object',
},
insert: {
description:
'Inserts `<style>`/`<link>` at the given position (https://github.com/webpack-contrib/style-loader#insert).',
anyOf: [
{
type: 'string',
},
{
instanceof: 'Function',
},
],
},
base: {
description:
'Sets module ID base for DLLPlugin (https://github.com/webpack-contrib/style-loader#base).',
type: 'number',
},
esModule: {
description:
'Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).',
type: 'boolean',
},
},
additionalProperties: false,
}

const loaderApi = () => {}

loaderApi.pitch = function loader(request) {
const options = loaderUtils.getOptions(this)

validate(schema, options, {
name: 'Style Loader',
baseDataPath: 'options',
})

const insert =
typeof options.insert === 'undefined'
? '"head"'
: typeof options.insert === 'string'
? JSON.stringify(options.insert)
: options.insert.toString()
const injectType = options.injectType || 'styleTag'
const esModule =
typeof options.esModule !== 'undefined' ? options.esModule : false

delete options.esModule

switch (injectType) {
case 'linkTag': {
const hmrCode = this.hot
? `
if (module.hot) {
module.hot.accept(
${loaderUtils.stringifyRequest(this, `!!${request}`)},
function() {
${
esModule
? 'update(content);'
: `content = require(${loaderUtils.stringifyRequest(
this,
`!!${request}`
)});
content = content.__esModule ? content.default : content;
update(content);`
}
}
);
module.hot.dispose(function() {
update();
});
}`
: ''

return `${
esModule
? `import api from ${loaderUtils.stringifyRequest(
this,
`!${path.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`
)};
import content from ${loaderUtils.stringifyRequest(
this,
`!!${request}`
)};`
: `var api = require(${loaderUtils.stringifyRequest(
this,
`!${path.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`
)});
var content = require(${loaderUtils.stringifyRequest(
this,
`!!${request}`
)});
content = content.__esModule ? content.default : content;`
}
var options = ${JSON.stringify(options)};
options.insert = ${insert};
var update = api(content, options);
${hmrCode}
${esModule ? 'export default {}' : ''}`
}

case 'lazyStyleTag':
case 'lazySingletonStyleTag': {
const isSingleton = injectType === 'lazySingletonStyleTag'

const hmrCode = this.hot
? `
if (module.hot) {
if (!content.locals || module.hot.invalidate) {
var isEqualLocals = ${isEqualLocals.toString()};
var oldLocals = content.locals;
module.hot.accept(
${loaderUtils.stringifyRequest(this, `!!${request}`)},
function () {
${
esModule
? `if (!isEqualLocals(oldLocals, content.locals)) {
module.hot.invalidate();
return;
}
oldLocals = content.locals;
if (update && refs > 0) {
update(content);
}`
: `content = require(${loaderUtils.stringifyRequest(
this,
`!!${request}`
)});
content = content.__esModule ? content.default : content;
if (!isEqualLocals(oldLocals, content.locals)) {
module.hot.invalidate();
return;
}
oldLocals = content.locals;
if (update && refs > 0) {
update(content);
}`
}
}
)
}
module.hot.dispose(function() {
if (update) {
update();
}
});
}`
: ''

return `${
esModule
? `import api from ${loaderUtils.stringifyRequest(
this,
`!${path.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`
)};
import content from ${loaderUtils.stringifyRequest(
this,
`!!${request}`
)};`
: `var api = require(${loaderUtils.stringifyRequest(
this,
`!${path.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`
)});
var content = require(${loaderUtils.stringifyRequest(
this,
`!!${request}`
)});
content = content.__esModule ? content.default : content;
if (typeof content === 'string') {
content = [[module.id, content, '']];
}`
}
var refs = 0;
var update;
var options = ${JSON.stringify(options)};
options.insert = ${insert};
options.singleton = ${isSingleton};
var exported = {};
exported.locals = content.locals || {};
exported.use = function() {
if (!(refs++)) {
update = api(content, options);
}
return exported;
};
exported.unuse = function() {
if (refs > 0 && !--refs) {
update();
update = null;
}
};
${hmrCode}
${esModule ? 'export default' : 'module.exports ='} exported;`
}

case 'styleTag':
case 'singletonStyleTag':
default: {
const isSingleton = injectType === 'singletonStyleTag'

const hmrCode = this.hot
? `
if (module.hot) {
if (!content.locals || module.hot.invalidate) {
var isEqualLocals = ${isEqualLocals.toString()};
var oldLocals = content.locals;
module.hot.accept(
${loaderUtils.stringifyRequest(this, `!!${request}`)},
function () {
${
esModule
? `if (!isEqualLocals(oldLocals, content.locals)) {
module.hot.invalidate();
return;
}
oldLocals = content.locals;
update(content);`
: `content = require(${loaderUtils.stringifyRequest(
this,
`!!${request}`
)});
content = content.__esModule ? content.default : content;
if (typeof content === 'string') {
content = [[module.id, content, '']];
}
if (!isEqualLocals(oldLocals, content.locals)) {
module.hot.invalidate();
return;
}
oldLocals = content.locals;
update(content);`
}
}
)
}
module.hot.dispose(function() {
update();
});
}`
: ''

return `${
esModule
? `import api from ${loaderUtils.stringifyRequest(
this,
`!${path.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`
)};
import content from ${loaderUtils.stringifyRequest(
this,
`!!${request}`
)};`
: `var api = require(${loaderUtils.stringifyRequest(
this,
`!${path.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`
)});
var content = require(${loaderUtils.stringifyRequest(
this,
`!!${request}`
)});
content = content.__esModule ? content.default : content;
if (typeof content === 'string') {
content = [[module.id, content, '']];
}`
}
var options = ${JSON.stringify(options)};
options.insert = ${insert};
options.singleton = ${isSingleton};
var update = api(content, options);
${hmrCode}
${esModule ? 'export default' : 'module.exports ='} content.locals || {};`
}
}
}

module.exports = loaderApi

0 comments on commit 55b8502

Please sign in to comment.