vercel · kodiakhq · Jan 20, 2021 · Jan 19, 2021 · Jan 19, 2021 · Jan 19, 2021
diff --git 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
@@ -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

diff --git a/packages/next/build/webpack/loaders/next-style-loader/LICENSE 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
@@ -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