isomorphic-style-loader example

[timmywil]

Would you welcome an isomorphic-style-loader example–the loader used in react-starter-kit–or is there a reason it hasn't been done yet? I think it would be matter of adding a css loader to next.config.js and either setting/concating the styles property for the head tag in _document.js or creating a separate style tag in _document.js for non-styled-jsx styles.

I don't want to attempt it if it's already been tried and discarded.

[timmywil]

I started working on this, but it's more complicated than I thought. next is doing some pretty special things in webpack. For instance, CSS loaders seem to be completely ignored when writing output to the .next directory. Even the extract webpack plugin isn't writing to dist. Any guidance would be appreciated. I'm just not familiar with all of the webpack plugins being used here.

[timmywil]

Ok, finally read this. Hmmm.

[lenny0702]

Looking foward to that so much! Hope you can make it!
I tried that, but didn't wok out. We need this very much.

[timmywil]

I'm going to work on this more when I have time. I will need to spend more time understanding the next code.

[winglian]

@timmywil I'm interested in seeing this as well. One major piece of plumbing is the context.insertCss which has to be passed as a prop to the App container at some point. I've been going through next/server/render and next/lib/app to see if there are any good starting points to making this modular/userland without modifying next itself, but it isn't looking promising

[winglian]

@timmywil as for the css loaders writing out to .next/dist, I've come up with this so far, but then it fails since it has a relative path in the output file that can't be resolved properly. That's one of the last pieces I think that I need to get it to work. Here's what I have in next.config.js

module.exports = {
  webpack: (config, { dev }) => {
    const isDebug = !!dev;

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'isomorphic-style-loader',
        'raw-loader',
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        {
          loader: 'css-loader',
          options: {
            // CSS Loader https://github.com/webpack/css-loader
            importLoaders: 1,
            sourceMap: isDebug,
            // CSS Modules https://github.com/css-modules/css-modules
            modules: true,
            localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
            // CSS Nano http://cssnano.co/options/
            minimize: !isDebug,
            discardComments: { removeAll: true },
          },
        },
        'postcss-loader',
      ]
    })

    return config
  }
}

and the output that I get in .next/dist/components/Hero/Hero.scss that has the invalid relative path is

exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(true);
// imports


// module
exports.push([module.id, ".Hero-heroHeader-Wc-hV {\n    height: 200px; }\n\n@media (min-width: 576px) {\n    .Hero-heroHeader-Wc-hV {\n        height: 240px; }  }\n\n@media (min-width: 768px) {\n    .Hero-heroHeader-Wc-hV {\n        height: 300px; }  }\n\n@media (min-width: 1200px) {\n    .Hero-heroHeader-Wc-hV {\n        height: 350px; }  }\n\n@media (min-width: 1440px) {\n    .Hero-heroHeader-Wc-hV {\n        height: 400px; }  }\n\n\n\n", "", {"version":3,"sources":["/Users/wing/Projects/Personal/app-web/components/Hero/Hero.scss"],"names":[],"mappings":"AAAA;IACI,cAAc,EAAE;;AAEpB;IACI;QACI,cAAc,EAAE,GAAG;;AAC3B;IACI;QACI,cAAc,EAAE,GAAG;;AAC3B;IACI;QACI,cAAc,EAAE,GAAG;;AAC3B;IACI;QACI,cAAc,EAAE,GAAG","file":"Hero.scss","sourcesContent":[".heroHeader {\n    height: 200px; }\n\n@media (min-width: 576px) {\n    .heroHeader {\n        height: 240px; }  }\n@media (min-width: 768px) {\n    .heroHeader {\n        height: 300px; }  }\n@media (min-width: 1200px) {\n    .heroHeader {\n        height: 350px; }  }\n@media (min-width: 1440px) {\n    .heroHeader {\n        height: 400px; }  }\n\n\n\n"],"sourceRoot":""}]);

// exports
exports.locals = {
	"heroHeader": "Hero-heroHeader-Wc-hV"
};

[timmywil]

@winglian Thanks! I think adding emit-file-loader is a step in the right direction. I'll look further asap.

[sergiokopplin]

@timmywil @winglian yeah, i also want this! can i help with something? have you checked @timmywil?

[timmywil]

@sergiokopplin I should have some time today. I'll reply here again with any discoveries, or I'll just open a PR if I get it working.

[sergiokopplin]

thanks man! let's get this to work!

[sergiokopplin]

btw, are you trying to use in a simple css-modules way?

component that imports a style and apply on nodes?
example:

[timmywil]

@sergiokopplin exactly

[sergiokopplin]

I'm not going with next because of this. :/
Still need to do some tests, but this is a big no for my team.

[timmywil]

I started this and opened a PR for collaboration.

#1664

I can get either server rendering or client rendering to work correctly, but not both at the same time and I'm not sure why yet.