From b66798474288526db5814b3b3e2f27d4f1d214f5 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Tue, 19 Jan 2021 15:35:08 -0500
Subject: [PATCH 1/5] chore: compile deps

---
 packages/next/compiled/style-loader/LICENSE   | 20 +++++++++++++++++++
 packages/next/compiled/style-loader/cjs.js    |  1 +
 .../next/compiled/style-loader/package.json   |  1 +
 packages/next/package.json                    |  2 +-
 packages/next/taskfile.js                     | 16 +++++++++++++++
 5 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 packages/next/compiled/style-loader/LICENSE
 create mode 100644 packages/next/compiled/style-loader/cjs.js
 create mode 100644 packages/next/compiled/style-loader/package.json

diff --git a/packages/next/compiled/style-loader/LICENSE b/packages/next/compiled/style-loader/LICENSE
new file mode 100644
index 0000000000000..8c11fc7289b75
--- /dev/null
+++ b/packages/next/compiled/style-loader/LICENSE
@@ -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.
diff --git a/packages/next/compiled/style-loader/cjs.js b/packages/next/compiled/style-loader/cjs.js
new file mode 100644
index 0000000000000..614c164c8684b
--- /dev/null
+++ b/packages/next/compiled/style-loader/cjs.js
@@ -0,0 +1 @@
+module.exports=function(){"use strict";var t={138:function(t){t.exports=JSON.parse('{"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}')},652:function(t,n,e){const o=e(547);t.exports=o.default},547:function(t,n,e){Object.defineProperty(n,"__esModule",{value:true});n.default=void 0;var o=_interopRequireDefault(e(622));var i=_interopRequireDefault(e(443));var s=_interopRequireDefault(e(286));var a=_interopRequireDefault(e(51));var r=_interopRequireDefault(e(138));function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}const l=()=>{};l.pitch=function loader(t){const n=i.default.getOptions(this);(0,s.default)(r.default,n,{name:"Style Loader",baseDataPath:"options"});const e=typeof n.insert==="undefined"?'"head"':typeof n.insert==="string"?JSON.stringify(n.insert):n.insert.toString();const l=n.injectType||"styleTag";const u=typeof n.esModule!=="undefined"?n.esModule:false;delete n.esModule;switch(l){case"linkTag":{const s=this.hot?`\nif (module.hot) {\n  module.hot.accept(\n    ${i.default.stringifyRequest(this,`!!${t}`)},\n    function() {\n     ${u?"update(content);":`content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n           content = content.__esModule ? content.default : content;\n\n           update(content);`}\n    }\n  );\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`:"";return`${u?`import api from ${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`)};\n            import content from ${i.default.stringifyRequest(this,`!!${t}`)};`:`var api = require(${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`)});\n            var content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n            content = content.__esModule ? content.default : content;`}\n\nvar options = ${JSON.stringify(n)};\n\noptions.insert = ${e};\n\nvar update = api(content, options);\n\n${s}\n\n${u?"export default {}":""}`}case"lazyStyleTag":case"lazySingletonStyleTag":{const s=l==="lazySingletonStyleTag";const r=this.hot?`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${a.default.toString()};\n    var oldLocals = content.locals;\n\n    module.hot.accept(\n      ${i.default.stringifyRequest(this,`!!${t}`)},\n      function () {\n        ${u?`if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              if (update && refs > 0) {\n                update(content);\n              }`:`content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n              content = content.__esModule ? content.default : content;\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              if (update && refs > 0) {\n                update(content);\n              }`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    if (update) {\n      update();\n    }\n  });\n}`:"";return`${u?`import api from ${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)};\n            import content from ${i.default.stringifyRequest(this,`!!${t}`)};`:`var api = require(${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)});\n            var content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.id, content, '']];\n            }`}\n\nvar refs = 0;\nvar update;\nvar options = ${JSON.stringify(n)};\n\noptions.insert = ${e};\noptions.singleton = ${s};\n\nvar exported = {};\n\nexported.locals = content.locals || {};\nexported.use = function() {\n  if (!(refs++)) {\n    update = api(content, options);\n  }\n\n  return exported;\n};\nexported.unuse = function() {\n  if (refs > 0 && !--refs) {\n    update();\n    update = null;\n  }\n};\n\n${r}\n\n${u?"export default":"module.exports ="} exported;`}case"styleTag":case"singletonStyleTag":default:{const s=l==="singletonStyleTag";const r=this.hot?`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${a.default.toString()};\n    var oldLocals = content.locals;\n\n    module.hot.accept(\n      ${i.default.stringifyRequest(this,`!!${t}`)},\n      function () {\n        ${u?`if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              update(content);`:`content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n              content = content.__esModule ? content.default : content;\n\n              if (typeof content === 'string') {\n                content = [[module.id, content, '']];\n              }\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              update(content);`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`:"";return`${u?`import api from ${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)};\n            import content from ${i.default.stringifyRequest(this,`!!${t}`)};`:`var api = require(${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)});\n            var content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.id, content, '']];\n            }`}\n\nvar options = ${JSON.stringify(n)};\n\noptions.insert = ${e};\noptions.singleton = ${s};\n\nvar update = api(content, options);\n\n${r}\n\n${u?"export default":"module.exports ="} content.locals || {};`}}};var u=l;n.default=u},51:function(t){function isEqualLocals(t,n){if(!t&&n||t&&!n){return false}var e;for(e in t){if(t[e]!==n[e]){return false}}for(e in n){if(!t[e]){return false}}return true}t.exports=isEqualLocals},443:function(t){t.exports=require("next/dist/compiled/loader-utils")},286:function(t){t.exports=require("next/dist/compiled/schema-utils3")},622:function(t){t.exports=require("path")}};var n={};function __nccwpck_require__(e){if(n[e]){return n[e].exports}var o=n[e]={exports:{}};var i=true;try{t[e](o,o.exports,__nccwpck_require__);i=false}finally{if(i)delete n[e]}return o.exports}__nccwpck_require__.ab=__dirname+"/";return __nccwpck_require__(652)}();
\ No newline at end of file
diff --git a/packages/next/compiled/style-loader/package.json b/packages/next/compiled/style-loader/package.json
new file mode 100644
index 0000000000000..6d26667791ae7
--- /dev/null
+++ b/packages/next/compiled/style-loader/package.json
@@ -0,0 +1 @@
+{"name":"style-loader","main":"cjs.js","author":"Tobias Koppers @sokra","license":"MIT"}
diff --git a/packages/next/package.json b/packages/next/package.json
index f42dbc3d52a34..8699e59bf8b8a 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -94,7 +94,6 @@
     "react-is": "16.13.1",
     "react-refresh": "0.8.3",
     "stream-browserify": "3.0.0",
-    "style-loader": "1.2.1",
     "styled-jsx": "3.3.2",
     "use-subscription": "1.5.1",
     "vm-browserify": "1.1.2",
@@ -223,6 +222,7 @@
     "source-map": "0.6.1",
     "string-hash": "1.1.3",
     "strip-ansi": "6.0.0",
+    "style-loader": "1.2.1",
     "taskr": "1.1.0",
     "terser": "5.5.1",
     "text-table": "0.2.0",
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 2f0279ff0dcc7..178e031cc850b 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -528,6 +528,21 @@ export async function ncc_strip_ansi(task, opts) {
     .target('compiled/strip-ansi')
 }
 // eslint-disable-next-line camelcase
+externals['style-loader'] = 'next/dist/compiled/style-loader'
+export async function ncc_style_loader(task, opts) {
+  await task
+    .source(opts.src || relative(__dirname, require.resolve('style-loader')))
+    .ncc({
+      packageName: 'style-loader',
+      externals: {
+        ...externals,
+        'schema-utils': 'next/dist/compiled/schema-utils3',
+      },
+      target: 'es5',
+    })
+    .target('compiled/style-loader')
+}
+// eslint-disable-next-line camelcase
 externals['terser'] = 'next/dist/compiled/terser'
 export async function ncc_terser(task, opts) {
   await task
@@ -705,6 +720,7 @@ export async function ncc(task) {
       'ncc_source_map',
       'ncc_string_hash',
       'ncc_strip_ansi',
+      'ncc_style_loader',
       'ncc_terser',
       'ncc_text_table',
       'ncc_thread_loader',

From 446ca8d93b4fa56c64bb588d9b5555b63e07de0d Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Tue, 19 Jan 2021 15:36:03 -0500
Subject: [PATCH 2/5] reference compiled loader

---
 packages/next/build/webpack/config/blocks/css/loaders/client.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/build/webpack/config/blocks/css/loaders/client.ts b/packages/next/build/webpack/config/blocks/css/loaders/client.ts
index f09e66c1f1d25..40f76e6992394 100644
--- a/packages/next/build/webpack/config/blocks/css/loaders/client.ts
+++ b/packages/next/build/webpack/config/blocks/css/loaders/client.ts
@@ -10,7 +10,7 @@ export function getClientStyleLoader({
 }): webpack.RuleSetUseItem {
   return isDevelopment
     ? {
-        loader: require.resolve('style-loader'),
+        loader: require.resolve('next/dist/compiled/style-loader'),
         options: {
           // By default, style-loader injects CSS into the bottom
           // of <head>. This causes ordering problems between dev

From f330a5160a21414b2a69060c3695ffcb9419287a Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Tue, 19 Jan 2021 16:22:58 -0500
Subject: [PATCH 3/5] test compile from source

---
 packages/next/compiled/style-loader/cjs.js | 2 +-
 packages/next/package.json                 | 2 +-
 packages/next/taskfile.js                  | 5 +++--
 yarn.lock                                  | 4 ++--
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/next/compiled/style-loader/cjs.js b/packages/next/compiled/style-loader/cjs.js
index 614c164c8684b..e88c67276a926 100644
--- a/packages/next/compiled/style-loader/cjs.js
+++ b/packages/next/compiled/style-loader/cjs.js
@@ -1 +1 @@
-module.exports=function(){"use strict";var t={138:function(t){t.exports=JSON.parse('{"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}')},652:function(t,n,e){const o=e(547);t.exports=o.default},547:function(t,n,e){Object.defineProperty(n,"__esModule",{value:true});n.default=void 0;var o=_interopRequireDefault(e(622));var i=_interopRequireDefault(e(443));var s=_interopRequireDefault(e(286));var a=_interopRequireDefault(e(51));var r=_interopRequireDefault(e(138));function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}const l=()=>{};l.pitch=function loader(t){const n=i.default.getOptions(this);(0,s.default)(r.default,n,{name:"Style Loader",baseDataPath:"options"});const e=typeof n.insert==="undefined"?'"head"':typeof n.insert==="string"?JSON.stringify(n.insert):n.insert.toString();const l=n.injectType||"styleTag";const u=typeof n.esModule!=="undefined"?n.esModule:false;delete n.esModule;switch(l){case"linkTag":{const s=this.hot?`\nif (module.hot) {\n  module.hot.accept(\n    ${i.default.stringifyRequest(this,`!!${t}`)},\n    function() {\n     ${u?"update(content);":`content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n           content = content.__esModule ? content.default : content;\n\n           update(content);`}\n    }\n  );\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`:"";return`${u?`import api from ${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`)};\n            import content from ${i.default.stringifyRequest(this,`!!${t}`)};`:`var api = require(${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`)});\n            var content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n            content = content.__esModule ? content.default : content;`}\n\nvar options = ${JSON.stringify(n)};\n\noptions.insert = ${e};\n\nvar update = api(content, options);\n\n${s}\n\n${u?"export default {}":""}`}case"lazyStyleTag":case"lazySingletonStyleTag":{const s=l==="lazySingletonStyleTag";const r=this.hot?`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${a.default.toString()};\n    var oldLocals = content.locals;\n\n    module.hot.accept(\n      ${i.default.stringifyRequest(this,`!!${t}`)},\n      function () {\n        ${u?`if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              if (update && refs > 0) {\n                update(content);\n              }`:`content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n              content = content.__esModule ? content.default : content;\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              if (update && refs > 0) {\n                update(content);\n              }`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    if (update) {\n      update();\n    }\n  });\n}`:"";return`${u?`import api from ${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)};\n            import content from ${i.default.stringifyRequest(this,`!!${t}`)};`:`var api = require(${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)});\n            var content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.id, content, '']];\n            }`}\n\nvar refs = 0;\nvar update;\nvar options = ${JSON.stringify(n)};\n\noptions.insert = ${e};\noptions.singleton = ${s};\n\nvar exported = {};\n\nexported.locals = content.locals || {};\nexported.use = function() {\n  if (!(refs++)) {\n    update = api(content, options);\n  }\n\n  return exported;\n};\nexported.unuse = function() {\n  if (refs > 0 && !--refs) {\n    update();\n    update = null;\n  }\n};\n\n${r}\n\n${u?"export default":"module.exports ="} exported;`}case"styleTag":case"singletonStyleTag":default:{const s=l==="singletonStyleTag";const r=this.hot?`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${a.default.toString()};\n    var oldLocals = content.locals;\n\n    module.hot.accept(\n      ${i.default.stringifyRequest(this,`!!${t}`)},\n      function () {\n        ${u?`if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              update(content);`:`content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n              content = content.__esModule ? content.default : content;\n\n              if (typeof content === 'string') {\n                content = [[module.id, content, '']];\n              }\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              update(content);`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`:"";return`${u?`import api from ${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)};\n            import content from ${i.default.stringifyRequest(this,`!!${t}`)};`:`var api = require(${i.default.stringifyRequest(this,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)});\n            var content = require(${i.default.stringifyRequest(this,`!!${t}`)});\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.id, content, '']];\n            }`}\n\nvar options = ${JSON.stringify(n)};\n\noptions.insert = ${e};\noptions.singleton = ${s};\n\nvar update = api(content, options);\n\n${r}\n\n${u?"export default":"module.exports ="} content.locals || {};`}}};var u=l;n.default=u},51:function(t){function isEqualLocals(t,n){if(!t&&n||t&&!n){return false}var e;for(e in t){if(t[e]!==n[e]){return false}}for(e in n){if(!t[e]){return false}}return true}t.exports=isEqualLocals},443:function(t){t.exports=require("next/dist/compiled/loader-utils")},286:function(t){t.exports=require("next/dist/compiled/schema-utils3")},622:function(t){t.exports=require("path")}};var n={};function __nccwpck_require__(e){if(n[e]){return n[e].exports}var o=n[e]={exports:{}};var i=true;try{t[e](o,o.exports,__nccwpck_require__);i=false}finally{if(i)delete n[e]}return o.exports}__nccwpck_require__.ab=__dirname+"/";return __nccwpck_require__(652)}();
\ No newline at end of file
+module.exports=(()=>{var n={410:(n,t,e)=>{const o=e(1);n.exports=o.default},1:(n,t,e)=>{"use strict";e.r(t);e.d(t,{default:()=>f});const o=require("path");var i=e.n(o);const s=require("next/dist/compiled/loader-utils");var r=e.n(s);const a=require("next/dist/compiled/schema-utils3");var l=e.n(a);var c=e(845);var u=e.n(c);const d=JSON.parse('{"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 p=()=>{};p.pitch=function loader(n){const t=r().getOptions(this);l()(d,t,{name:"Style Loader",baseDataPath:"options"});const e=typeof t.insert==="undefined"?'"head"':typeof t.insert==="string"?JSON.stringify(t.insert):t.insert.toString();const o=t.injectType||"styleTag";const s=typeof t.esModule!=="undefined"?t.esModule:false;delete t.esModule;switch(o){case"linkTag":{const o=this.hot?`\nif (module.hot) {\n  module.hot.accept(\n    ${r().stringifyRequest(this,`!!${n}`)},\n    function() {\n     ${s?"update(content);":`content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n           content = content.__esModule ? content.default : content;\n\n           update(content);`}\n    }\n  );\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`:"";return`${s?`import api from ${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`)};\n            import content from ${r().stringifyRequest(this,`!!${n}`)};`:`var api = require(${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`)});\n            var content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n            content = content.__esModule ? content.default : content;`}\n\nvar options = ${JSON.stringify(t)};\n\noptions.insert = ${e};\n\nvar update = api(content, options);\n\n${o}\n\n${s?"export default {}":""}`}case"lazyStyleTag":case"lazySingletonStyleTag":{const a=o==="lazySingletonStyleTag";const l=this.hot?`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${u().toString()};\n    var oldLocals = content.locals;\n\n    module.hot.accept(\n      ${r().stringifyRequest(this,`!!${n}`)},\n      function () {\n        ${s?`if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              if (update && refs > 0) {\n                update(content);\n              }`:`content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n              content = content.__esModule ? content.default : content;\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              if (update && refs > 0) {\n                update(content);\n              }`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    if (update) {\n      update();\n    }\n  });\n}`:"";return`${s?`import api from ${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)};\n            import content from ${r().stringifyRequest(this,`!!${n}`)};`:`var api = require(${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)});\n            var content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.id, content, '']];\n            }`}\n\nvar refs = 0;\nvar update;\nvar options = ${JSON.stringify(t)};\n\noptions.insert = ${e};\noptions.singleton = ${a};\n\nvar exported = {};\n\nexported.locals = content.locals || {};\nexported.use = function() {\n  if (!(refs++)) {\n    update = api(content, options);\n  }\n\n  return exported;\n};\nexported.unuse = function() {\n  if (refs > 0 && !--refs) {\n    update();\n    update = null;\n  }\n};\n\n${l}\n\n${s?"export default":"module.exports ="} exported;`}case"styleTag":case"singletonStyleTag":default:{const a=o==="singletonStyleTag";const l=this.hot?`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${u().toString()};\n    var oldLocals = content.locals;\n\n    module.hot.accept(\n      ${r().stringifyRequest(this,`!!${n}`)},\n      function () {\n        ${s?`if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              update(content);`:`content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n              content = content.__esModule ? content.default : content;\n\n              if (typeof content === 'string') {\n                content = [[module.id, content, '']];\n              }\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              update(content);`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`:"";return`${s?`import api from ${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)};\n            import content from ${r().stringifyRequest(this,`!!${n}`)};`:`var api = require(${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)});\n            var content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.id, content, '']];\n            }`}\n\nvar options = ${JSON.stringify(t)};\n\noptions.insert = ${e};\noptions.singleton = ${a};\n\nvar update = api(content, options);\n\n${l}\n\n${s?"export default":"module.exports ="} content.locals || {};`}}};const f=p},845:n=>{function isEqualLocals(n,t){if(!n&&t||n&&!t){return false}let e;for(e in n){if(n[e]!==t[e]){return false}}for(e in t){if(!n[e]){return false}}return true}n.exports=isEqualLocals}};var t={};function __nccwpck_require__(e){if(t[e]){return t[e].exports}var o=t[e]={exports:{}};var i=true;try{n[e](o,o.exports,__nccwpck_require__);i=false}finally{if(i)delete t[e]}return o.exports}(()=>{__nccwpck_require__.n=(n=>{var t=n&&n.__esModule?()=>n["default"]:()=>n;__nccwpck_require__.d(t,{a:t});return t})})();(()=>{__nccwpck_require__.d=((n,t)=>{for(var e in t){if(__nccwpck_require__.o(t,e)&&!__nccwpck_require__.o(n,e)){Object.defineProperty(n,e,{enumerable:true,get:t[e]})}}})})();(()=>{__nccwpck_require__.o=((n,t)=>Object.prototype.hasOwnProperty.call(n,t))})();(()=>{__nccwpck_require__.r=(n=>{if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(n,"__esModule",{value:true})})})();__nccwpck_require__.ab=__dirname+"/";return __nccwpck_require__(410)})();
\ No newline at end of file
diff --git a/packages/next/package.json b/packages/next/package.json
index 8699e59bf8b8a..e57a5a8bc680f 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -222,7 +222,7 @@
     "source-map": "0.6.1",
     "string-hash": "1.1.3",
     "strip-ansi": "6.0.0",
-    "style-loader": "1.2.1",
+    "style-loader": "webpack-contrib/style-loader#v1.2.1",
     "taskr": "1.1.0",
     "terser": "5.5.1",
     "text-table": "0.2.0",
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 178e031cc850b..5f80d72788fb8 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -531,14 +531,15 @@ export async function ncc_strip_ansi(task, opts) {
 externals['style-loader'] = 'next/dist/compiled/style-loader'
 export async function ncc_style_loader(task, opts) {
   await task
-    .source(opts.src || relative(__dirname, require.resolve('style-loader')))
+    .source(
+      opts.src || relative(__dirname, require.resolve('style-loader/src/cjs'))
+    )
     .ncc({
       packageName: 'style-loader',
       externals: {
         ...externals,
         'schema-utils': 'next/dist/compiled/schema-utils3',
       },
-      target: 'es5',
     })
     .target('compiled/style-loader')
 }
diff --git a/yarn.lock b/yarn.lock
index 3c5a8e927802c..49b7a8e420113 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14917,9 +14917,9 @@ style-inject@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
 
-style-loader@1.2.1:
+style-loader@webpack-contrib/style-loader#v1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"
+  resolved "https://codeload.github.com/webpack-contrib/style-loader/tar.gz/5520e687422eb422309cdd0231c3592048fa1247"
   dependencies:
     loader-utils "^2.0.0"
     schema-utils "^2.6.6"

From 654a96490f9185da453230c574bdfff1eb34d33c Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Tue, 19 Jan 2021 23:24:59 -0500
Subject: [PATCH 4/5] move to local

---
 packages/next/build/webpack-config.ts         |   1 +
 .../config/blocks/css/loaders/client.ts       |   2 +-
 .../webpack/loaders/next-style-loader/LICENSE |  20 +
 .../loaders/next-style-loader/index.js        | 345 ++++++++++++++++++
 .../runtime/injectStylesIntoLinkTag.js        |  75 ++++
 .../runtime/injectStylesIntoStyleTag.js       | 294 +++++++++++++++
 .../runtime/isEqualLocals.js                  |  33 ++
 packages/next/taskfile.js                     |  17 -
 8 files changed, 769 insertions(+), 18 deletions(-)
 create mode 100644 packages/next/build/webpack/loaders/next-style-loader/LICENSE
 create mode 100644 packages/next/build/webpack/loaders/next-style-loader/index.js
 create mode 100644 packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoLinkTag.js
 create mode 100644 packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js
 create mode 100644 packages/next/build/webpack/loaders/next-style-loader/runtime/isEqualLocals.js

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 873a0d1cc20dc..2ea65df283328 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -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)
diff --git a/packages/next/build/webpack/config/blocks/css/loaders/client.ts b/packages/next/build/webpack/config/blocks/css/loaders/client.ts
index 40f76e6992394..c8d5bdc0bfda5 100644
--- a/packages/next/build/webpack/config/blocks/css/loaders/client.ts
+++ b/packages/next/build/webpack/config/blocks/css/loaders/client.ts
@@ -10,7 +10,7 @@ export function getClientStyleLoader({
 }): webpack.RuleSetUseItem {
   return isDevelopment
     ? {
-        loader: require.resolve('next/dist/compiled/style-loader'),
+        loader: 'next-style-loader',
         options: {
           // By default, style-loader injects CSS into the bottom
           // of <head>. This causes ordering problems between dev
diff --git a/packages/next/build/webpack/loaders/next-style-loader/LICENSE b/packages/next/build/webpack/loaders/next-style-loader/LICENSE
new file mode 100644
index 0000000000000..8c11fc7289b75
--- /dev/null
+++ b/packages/next/build/webpack/loaders/next-style-loader/LICENSE
@@ -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.
diff --git a/packages/next/build/webpack/loaders/next-style-loader/index.js b/packages/next/build/webpack/loaders/next-style-loader/index.js
new file mode 100644
index 0000000000000..47f56028b9c3f
--- /dev/null
+++ b/packages/next/build/webpack/loaders/next-style-loader/index.js
@@ -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
diff --git a/packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoLinkTag.js b/packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoLinkTag.js
new file mode 100644
index 0000000000000..9616aaf388662
--- /dev/null
+++ b/packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoLinkTag.js
@@ -0,0 +1,75 @@
+const getTarget = (function getTarget() {
+  const memo = {}
+
+  return function memorize(target) {
+    if (typeof memo[target] === 'undefined') {
+      let styleTarget = document.querySelector(target)
+
+      // Special case to return head of iframe instead of iframe itself
+      if (
+        window.HTMLIFrameElement &&
+        styleTarget instanceof window.HTMLIFrameElement
+      ) {
+        try {
+          // This will throw an exception if access to iframe is blocked
+          // due to cross-origin restrictions
+          styleTarget = styleTarget.contentDocument.head
+        } catch (e) {
+          // istanbul ignore next
+          styleTarget = null
+        }
+      }
+
+      memo[target] = styleTarget
+    }
+
+    return memo[target]
+  }
+})()
+
+module.exports = (url, options) => {
+  options = options || {}
+  options.attributes =
+    typeof options.attributes === 'object' ? options.attributes : {}
+
+  if (typeof options.attributes.nonce === 'undefined') {
+    const nonce =
+      // eslint-disable-next-line no-undef
+      typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null
+
+    if (nonce) {
+      options.attributes.nonce = nonce
+    }
+  }
+
+  const link = document.createElement('link')
+
+  link.rel = 'stylesheet'
+  link.href = url
+
+  Object.keys(options.attributes).forEach((key) => {
+    link.setAttribute(key, options.attributes[key])
+  })
+
+  if (typeof options.insert === 'function') {
+    options.insert(link)
+  } else {
+    const target = getTarget(options.insert || 'head')
+
+    if (!target) {
+      throw new Error(
+        "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
+      )
+    }
+
+    target.appendChild(link)
+  }
+
+  return (newUrl) => {
+    if (typeof newUrl === 'string') {
+      link.href = newUrl
+    } else {
+      link.parentNode.removeChild(link)
+    }
+  }
+}
diff --git a/packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js b/packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js
new file mode 100644
index 0000000000000..12fcbb2c6f3ab
--- /dev/null
+++ b/packages/next/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js
@@ -0,0 +1,294 @@
+const isOldIE = (function isOldIE() {
+  let memo
+
+  return function memorize() {
+    if (typeof memo === 'undefined') {
+      // Test for IE <= 9 as proposed by Browserhacks
+      // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
+      // Tests for existence of standard globals is to allow style-loader
+      // to operate correctly into non-standard environments
+      // @see https://github.com/webpack-contrib/style-loader/issues/177
+      memo = Boolean(window && document && document.all && !window.atob)
+    }
+
+    return memo
+  }
+})()
+
+const getTarget = (function getTarget() {
+  const memo = {}
+
+  return function memorize(target) {
+    if (typeof memo[target] === 'undefined') {
+      let styleTarget = document.querySelector(target)
+
+      // Special case to return head of iframe instead of iframe itself
+      if (
+        window.HTMLIFrameElement &&
+        styleTarget instanceof window.HTMLIFrameElement
+      ) {
+        try {
+          // This will throw an exception if access to iframe is blocked
+          // due to cross-origin restrictions
+          styleTarget = styleTarget.contentDocument.head
+        } catch (e) {
+          // istanbul ignore next
+          styleTarget = null
+        }
+      }
+
+      memo[target] = styleTarget
+    }
+
+    return memo[target]
+  }
+})()
+
+const stylesInDom = []
+
+function getIndexByIdentifier(identifier) {
+  let result = -1
+
+  for (let i = 0; i < stylesInDom.length; i++) {
+    if (stylesInDom[i].identifier === identifier) {
+      result = i
+      break
+    }
+  }
+
+  return result
+}
+
+function modulesToDom(list, options) {
+  const idCountMap = {}
+  const identifiers = []
+
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i]
+    const id = options.base ? item[0] + options.base : item[0]
+    const count = idCountMap[id] || 0
+    const identifier = `${id} ${count}`
+
+    idCountMap[id] = count + 1
+
+    const index = getIndexByIdentifier(identifier)
+    const obj = {
+      css: item[1],
+      media: item[2],
+      sourceMap: item[3],
+    }
+
+    if (index !== -1) {
+      stylesInDom[index].references++
+      stylesInDom[index].updater(obj)
+    } else {
+      stylesInDom.push({
+        identifier,
+        updater: addStyle(obj, options),
+        references: 1,
+      })
+    }
+
+    identifiers.push(identifier)
+  }
+
+  return identifiers
+}
+
+function insertStyleElement(options) {
+  const style = document.createElement('style')
+  const attributes = options.attributes || {}
+
+  if (typeof attributes.nonce === 'undefined') {
+    const nonce =
+      // eslint-disable-next-line no-undef
+      typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null
+
+    if (nonce) {
+      attributes.nonce = nonce
+    }
+  }
+
+  Object.keys(attributes).forEach((key) => {
+    style.setAttribute(key, attributes[key])
+  })
+
+  if (typeof options.insert === 'function') {
+    options.insert(style)
+  } else {
+    const target = getTarget(options.insert || 'head')
+
+    if (!target) {
+      throw new Error(
+        "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
+      )
+    }
+
+    target.appendChild(style)
+  }
+
+  return style
+}
+
+function removeStyleElement(style) {
+  // istanbul ignore if
+  if (style.parentNode === null) {
+    return false
+  }
+
+  style.parentNode.removeChild(style)
+}
+
+/* istanbul ignore next  */
+const replaceText = (function replaceText() {
+  const textStore = []
+
+  return function replace(index, replacement) {
+    textStore[index] = replacement
+
+    return textStore.filter(Boolean).join('\n')
+  }
+})()
+
+function applyToSingletonTag(style, index, remove, obj) {
+  const css = remove
+    ? ''
+    : obj.media
+    ? `@media ${obj.media} {${obj.css}}`
+    : obj.css
+
+  // For old IE
+  /* istanbul ignore if  */
+  if (style.styleSheet) {
+    style.styleSheet.cssText = replaceText(index, css)
+  } else {
+    const cssNode = document.createTextNode(css)
+    const childNodes = style.childNodes
+
+    if (childNodes[index]) {
+      style.removeChild(childNodes[index])
+    }
+
+    if (childNodes.length) {
+      style.insertBefore(cssNode, childNodes[index])
+    } else {
+      style.appendChild(cssNode)
+    }
+  }
+}
+
+function applyToTag(style, options, obj) {
+  let css = obj.css
+  const media = obj.media
+  const sourceMap = obj.sourceMap
+
+  if (media) {
+    style.setAttribute('media', media)
+  } else {
+    style.removeAttribute('media')
+  }
+
+  if (sourceMap && typeof btoa !== 'undefined') {
+    css += `\n/*# sourceMappingURL=data:application/json;base64,${btoa(
+      unescape(encodeURIComponent(JSON.stringify(sourceMap)))
+    )} */`
+  }
+
+  // For old IE
+  /* istanbul ignore if  */
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css
+  } else {
+    while (style.firstChild) {
+      style.removeChild(style.firstChild)
+    }
+
+    style.appendChild(document.createTextNode(css))
+  }
+}
+
+let singleton = null
+let singletonCounter = 0
+
+function addStyle(obj, options) {
+  let style
+  let update
+  let remove
+
+  if (options.singleton) {
+    const styleIndex = singletonCounter++
+
+    style = singleton || (singleton = insertStyleElement(options))
+
+    update = applyToSingletonTag.bind(null, style, styleIndex, false)
+    remove = applyToSingletonTag.bind(null, style, styleIndex, true)
+  } else {
+    style = insertStyleElement(options)
+
+    update = applyToTag.bind(null, style, options)
+    remove = () => {
+      removeStyleElement(style)
+    }
+  }
+
+  update(obj)
+
+  return function updateStyle(newObj) {
+    if (newObj) {
+      if (
+        newObj.css === obj.css &&
+        newObj.media === obj.media &&
+        newObj.sourceMap === obj.sourceMap
+      ) {
+        return
+      }
+
+      update((obj = newObj))
+    } else {
+      remove()
+    }
+  }
+}
+
+module.exports = (list, options) => {
+  options = options || {}
+
+  // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+  // tags it will allow on a page
+  if (!options.singleton && typeof options.singleton !== 'boolean') {
+    options.singleton = isOldIE()
+  }
+
+  list = list || []
+
+  let lastIdentifiers = modulesToDom(list, options)
+
+  return function update(newList) {
+    newList = newList || []
+
+    if (Object.prototype.toString.call(newList) !== '[object Array]') {
+      return
+    }
+
+    for (let i = 0; i < lastIdentifiers.length; i++) {
+      const identifier = lastIdentifiers[i]
+      const index = getIndexByIdentifier(identifier)
+
+      stylesInDom[index].references--
+    }
+
+    const newLastIdentifiers = modulesToDom(newList, options)
+
+    for (let i = 0; i < lastIdentifiers.length; i++) {
+      const identifier = lastIdentifiers[i]
+      const index = getIndexByIdentifier(identifier)
+
+      if (stylesInDom[index].references === 0) {
+        stylesInDom[index].updater()
+        stylesInDom.splice(index, 1)
+      }
+    }
+
+    lastIdentifiers = newLastIdentifiers
+  }
+}
diff --git a/packages/next/build/webpack/loaders/next-style-loader/runtime/isEqualLocals.js b/packages/next/build/webpack/loaders/next-style-loader/runtime/isEqualLocals.js
new file mode 100644
index 0000000000000..a74a51f58b5f6
--- /dev/null
+++ b/packages/next/build/webpack/loaders/next-style-loader/runtime/isEqualLocals.js
@@ -0,0 +1,33 @@
+function isEqualLocals(a, b, isNamedExport) {
+  if ((!a && b) || (a && !b)) {
+    return false
+  }
+
+  let p
+
+  for (p in a) {
+    if (isNamedExport && p === 'default') {
+      // eslint-disable-next-line no-continue
+      continue
+    }
+
+    if (a[p] !== b[p]) {
+      return false
+    }
+  }
+
+  for (p in b) {
+    if (isNamedExport && p === 'default') {
+      // eslint-disable-next-line no-continue
+      continue
+    }
+
+    if (!a[p]) {
+      return false
+    }
+  }
+
+  return true
+}
+
+module.exports = isEqualLocals
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 5f80d72788fb8..2f0279ff0dcc7 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -528,22 +528,6 @@ export async function ncc_strip_ansi(task, opts) {
     .target('compiled/strip-ansi')
 }
 // eslint-disable-next-line camelcase
-externals['style-loader'] = 'next/dist/compiled/style-loader'
-export async function ncc_style_loader(task, opts) {
-  await task
-    .source(
-      opts.src || relative(__dirname, require.resolve('style-loader/src/cjs'))
-    )
-    .ncc({
-      packageName: 'style-loader',
-      externals: {
-        ...externals,
-        'schema-utils': 'next/dist/compiled/schema-utils3',
-      },
-    })
-    .target('compiled/style-loader')
-}
-// eslint-disable-next-line camelcase
 externals['terser'] = 'next/dist/compiled/terser'
 export async function ncc_terser(task, opts) {
   await task
@@ -721,7 +705,6 @@ export async function ncc(task) {
       'ncc_source_map',
       'ncc_string_hash',
       'ncc_strip_ansi',
-      'ncc_style_loader',
       'ncc_terser',
       'ncc_text_table',
       'ncc_thread_loader',

From 08f684f61962e0336fd233297fb1a664fb1ead8b Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Tue, 19 Jan 2021 23:35:35 -0500
Subject: [PATCH 5/5] clean up

---
 packages/next/compiled/style-loader/LICENSE   | 20 -------------------
 packages/next/compiled/style-loader/cjs.js    |  1 -
 .../next/compiled/style-loader/package.json   |  1 -
 packages/next/package.json                    |  1 -
 yarn.lock                                     |  9 +--------
 5 files changed, 1 insertion(+), 31 deletions(-)
 delete mode 100644 packages/next/compiled/style-loader/LICENSE
 delete mode 100644 packages/next/compiled/style-loader/cjs.js
 delete mode 100644 packages/next/compiled/style-loader/package.json

diff --git a/packages/next/compiled/style-loader/LICENSE b/packages/next/compiled/style-loader/LICENSE
deleted file mode 100644
index 8c11fc7289b75..0000000000000
--- a/packages/next/compiled/style-loader/LICENSE
+++ /dev/null
@@ -1,20 +0,0 @@
-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.
diff --git a/packages/next/compiled/style-loader/cjs.js b/packages/next/compiled/style-loader/cjs.js
deleted file mode 100644
index e88c67276a926..0000000000000
--- a/packages/next/compiled/style-loader/cjs.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports=(()=>{var n={410:(n,t,e)=>{const o=e(1);n.exports=o.default},1:(n,t,e)=>{"use strict";e.r(t);e.d(t,{default:()=>f});const o=require("path");var i=e.n(o);const s=require("next/dist/compiled/loader-utils");var r=e.n(s);const a=require("next/dist/compiled/schema-utils3");var l=e.n(a);var c=e(845);var u=e.n(c);const d=JSON.parse('{"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 p=()=>{};p.pitch=function loader(n){const t=r().getOptions(this);l()(d,t,{name:"Style Loader",baseDataPath:"options"});const e=typeof t.insert==="undefined"?'"head"':typeof t.insert==="string"?JSON.stringify(t.insert):t.insert.toString();const o=t.injectType||"styleTag";const s=typeof t.esModule!=="undefined"?t.esModule:false;delete t.esModule;switch(o){case"linkTag":{const o=this.hot?`\nif (module.hot) {\n  module.hot.accept(\n    ${r().stringifyRequest(this,`!!${n}`)},\n    function() {\n     ${s?"update(content);":`content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n           content = content.__esModule ? content.default : content;\n\n           update(content);`}\n    }\n  );\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`:"";return`${s?`import api from ${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`)};\n            import content from ${r().stringifyRequest(this,`!!${n}`)};`:`var api = require(${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`)});\n            var content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n            content = content.__esModule ? content.default : content;`}\n\nvar options = ${JSON.stringify(t)};\n\noptions.insert = ${e};\n\nvar update = api(content, options);\n\n${o}\n\n${s?"export default {}":""}`}case"lazyStyleTag":case"lazySingletonStyleTag":{const a=o==="lazySingletonStyleTag";const l=this.hot?`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${u().toString()};\n    var oldLocals = content.locals;\n\n    module.hot.accept(\n      ${r().stringifyRequest(this,`!!${n}`)},\n      function () {\n        ${s?`if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              if (update && refs > 0) {\n                update(content);\n              }`:`content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n              content = content.__esModule ? content.default : content;\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              if (update && refs > 0) {\n                update(content);\n              }`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    if (update) {\n      update();\n    }\n  });\n}`:"";return`${s?`import api from ${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)};\n            import content from ${r().stringifyRequest(this,`!!${n}`)};`:`var api = require(${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)});\n            var content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.id, content, '']];\n            }`}\n\nvar refs = 0;\nvar update;\nvar options = ${JSON.stringify(t)};\n\noptions.insert = ${e};\noptions.singleton = ${a};\n\nvar exported = {};\n\nexported.locals = content.locals || {};\nexported.use = function() {\n  if (!(refs++)) {\n    update = api(content, options);\n  }\n\n  return exported;\n};\nexported.unuse = function() {\n  if (refs > 0 && !--refs) {\n    update();\n    update = null;\n  }\n};\n\n${l}\n\n${s?"export default":"module.exports ="} exported;`}case"styleTag":case"singletonStyleTag":default:{const a=o==="singletonStyleTag";const l=this.hot?`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${u().toString()};\n    var oldLocals = content.locals;\n\n    module.hot.accept(\n      ${r().stringifyRequest(this,`!!${n}`)},\n      function () {\n        ${s?`if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              update(content);`:`content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n              content = content.__esModule ? content.default : content;\n\n              if (typeof content === 'string') {\n                content = [[module.id, content, '']];\n              }\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              update(content);`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`:"";return`${s?`import api from ${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)};\n            import content from ${r().stringifyRequest(this,`!!${n}`)};`:`var api = require(${r().stringifyRequest(this,`!${i().join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`)});\n            var content = require(${r().stringifyRequest(this,`!!${n}`)});\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.id, content, '']];\n            }`}\n\nvar options = ${JSON.stringify(t)};\n\noptions.insert = ${e};\noptions.singleton = ${a};\n\nvar update = api(content, options);\n\n${l}\n\n${s?"export default":"module.exports ="} content.locals || {};`}}};const f=p},845:n=>{function isEqualLocals(n,t){if(!n&&t||n&&!t){return false}let e;for(e in n){if(n[e]!==t[e]){return false}}for(e in t){if(!n[e]){return false}}return true}n.exports=isEqualLocals}};var t={};function __nccwpck_require__(e){if(t[e]){return t[e].exports}var o=t[e]={exports:{}};var i=true;try{n[e](o,o.exports,__nccwpck_require__);i=false}finally{if(i)delete t[e]}return o.exports}(()=>{__nccwpck_require__.n=(n=>{var t=n&&n.__esModule?()=>n["default"]:()=>n;__nccwpck_require__.d(t,{a:t});return t})})();(()=>{__nccwpck_require__.d=((n,t)=>{for(var e in t){if(__nccwpck_require__.o(t,e)&&!__nccwpck_require__.o(n,e)){Object.defineProperty(n,e,{enumerable:true,get:t[e]})}}})})();(()=>{__nccwpck_require__.o=((n,t)=>Object.prototype.hasOwnProperty.call(n,t))})();(()=>{__nccwpck_require__.r=(n=>{if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(n,"__esModule",{value:true})})})();__nccwpck_require__.ab=__dirname+"/";return __nccwpck_require__(410)})();
\ No newline at end of file
diff --git a/packages/next/compiled/style-loader/package.json b/packages/next/compiled/style-loader/package.json
deleted file mode 100644
index 6d26667791ae7..0000000000000
--- a/packages/next/compiled/style-loader/package.json
+++ /dev/null
@@ -1 +0,0 @@
-{"name":"style-loader","main":"cjs.js","author":"Tobias Koppers @sokra","license":"MIT"}
diff --git a/packages/next/package.json b/packages/next/package.json
index e57a5a8bc680f..cd7ee75c4e5e6 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -222,7 +222,6 @@
     "source-map": "0.6.1",
     "string-hash": "1.1.3",
     "strip-ansi": "6.0.0",
-    "style-loader": "webpack-contrib/style-loader#v1.2.1",
     "taskr": "1.1.0",
     "terser": "5.5.1",
     "text-table": "0.2.0",
diff --git a/yarn.lock b/yarn.lock
index 49b7a8e420113..46179442f4b80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14079,7 +14079,7 @@ scheduler@^0.20.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-schema-utils@2.7.1, schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.1:
+schema-utils@2.7.1, schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
@@ -14917,13 +14917,6 @@ style-inject@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
 
-style-loader@webpack-contrib/style-loader#v1.2.1:
-  version "1.2.1"
-  resolved "https://codeload.github.com/webpack-contrib/style-loader/tar.gz/5520e687422eb422309cdd0231c3592048fa1247"
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^2.6.6"
-
 styled-components@5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.0.tgz#2e3985b54f461027e1c91af3229e1c2530872a4e"