use webpack loader

Author: devjiwonchoi

packages/next/next-devtools.webpack-config.js

@@ -91,6 +91,11 @@ module.exports = ({ dev, ...rest }) => {
     module: {
       rules: [
         { test: /\.m?js$/, loader: `source-map-loader`, enforce: `pre` },
+        {
+          test: /\.css$/,
+          resourceQuery: /raw/,
+          type: 'asset/source',
+        },
         {
           test: /\.(ts|tsx)$/,
           exclude: [/node_modules/],

packages/next/src/client/components/react-dev-overlay/tailwind.input.css

@@ -1 +1,3 @@
+/* The location of this file is considered the entrypoint. */
+/* You can set the base path with `source("../path")`, but locating this file is more reliable. */
 @import 'tailwindcss';

packages/next/src/client/components/react-dev-overlay/ui/styles/tailwind.tsx

@@ -1 +1,10 @@
-export { Tailwind } from './tailwind.gen'
+import tailwindCss from './tailwind.output.css?raw'
+import { css } from '../../utils/css'
+
+export function Tailwind() {
+  return (
+    <style>{css`
+      ${tailwindCss}
+    `}</style>
+  )
+}

packages/next/types/global.d.ts

@@ -43,6 +43,11 @@ declare module '*.module.scss' {
   export default classes
 }
 
+declare module '*.css?raw' {
+  const content: string
+  export default content
+}
+
 // We implement the behavior of `import 'server-only'` and `import 'client-only'` on the compiler level
 // and thus don't require having them installed as dependencies.
 // By default it works fine with typescript, because (surprisingly) TSC *doesn't check side-effecting imports*.