Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[request] Example without usage of a boilerplate kit, css-modules or withStyles

See original GitHub issue

I’ve been going through the code and tried to source help on the Discord Reactiflux website to see if I could take the example usage provided and make it work with my own server setup : https://github.com/JaxCavalera/Tagged_Isomorphic/blob/master/src/server.jsx

The most challenging lines to follow are specifically related to :

const context = { insertCss: (styles) => css.push(styles._getCss()) };

I don’t really understand the purpose of using that variable and I’m unsure of where the styles variable is being defined or how it ends up being an object with functions such as _getCss().

Will isomorphic-style-loader work without the use of the withStyles Higher order function or is that a dependency module that needs to manually be imported and used in each of my components… which would seem to then signify that I need to also use css-modules so that makes 2 dependencies.

I’m not very clear on css-modules and what benefit it brings to the table.

Issue Analytics

State:
Created 8 years ago
Comments:12 (3 by maintainers)

Top GitHub Comments

3reactions

frenzzycommented, Jan 29, 2016

1. In contrast to the style-loader, isomorphic-style-loader allows you to use the same webpack configuration for CSS in server and client bundles.

ISL just adds to required/imported styles this two methods:

styles._getCss() - isomorphic method which returns CSS string, can be run on the client and on the server.
styles._insertCss() - client-side only method, allows inject your CSS into the DOM.

Example of a simple one-page application:

/* style.css */
.hello {
  color: red;
}

/* server.js */
import styles from './styles.css'
import express from 'express'

const server = express()

server.get('*', (req, res) => {
  res.status(200).send(`
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>One-page app example</title>
        <style>${styles._getCss()}</style>
      </head>
      <body>
        <p class="hello">Hello world!</p>
      </body>
    </html>
  `)
})

server.listen(3000, () =>
  console.log('The server is running at http://localhost:3000/')
)

2. ISL does not force you to use CSS Modules, you can use any other loaders together with ISL.

It is also useful to look at the css-loader documentation to see how to disable the css-modules.

Example of webpack configuration for styles:

{
  // ...
  module: {
  loaders: [
    {
      test: /\.css$/, // or .scss
      loaders: [
        'isomorphic-style-loader',
        'css-loader',
        'your-preprocessor-loader' // <==
      ]
    }
  ]
}

3. To understand the benefits of using CSS Modules, please read this article:

CSS Modules - Welcome to the Future by Glen Maddern

4. ISL allow you to render “critical CSS” on the server, during server-side rendering (SSR). Read more about this feature:

So for critical CSS server must send to the client only the styles that are needed for visible html-elements. React provides an excellent component model with lifecycle that makes it easy. The only thing you need to do is somehow to collect the styles for rendered components.

You can write your own critical css collector:

/* styleCollector.js */
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';

const css = []

export function collectOrRender(style) {
  if (canUseDOM) {
    return style._insertCss()
  }

  css.push(style._getCss())
}

export function renderStyles() {
  return css.join('')
}

/* MyIsomorphicComponent.css */
.hello {
  color: red;
}

/* MyIsomorphicComponent.js */
import React, { Component } from 'react'
import { collectOrRender } from './styleCollector'
import style from './MyIsomorphicComponent.css'

class MyIsomorphicComponent extends Component {
  componentWillMount() {
    this.removeStyle = collectOrRender(style)
  }
  componentWillUnmount() {
    this.removeStyle()
  }
  render() {
    return <div className="hello">Hello world!</div>
  }
}

export default MyIsomorphicComponent

/* server */
import express from 'express';
import { renderToString } from 'react-dom';
import { renderStyles } from './styleCollector'
import MyIsomorphicComponent from './MyIsomorphicComponent'

const server = express();

server.get('*', (req, res) => {
  const body = renderToString(MyIsomorphicComponent) // 1. collect critical styles
  const css = renderStyles()                         // 2. get collected styles
  res.status(200).send(`
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Critical CSS path example</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root">${body}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `)
})

server.listen(3000, () =>
  console.log('The server is running at http://localhost:3000/')
)

/* client.js */
import React from 'react'
import { render } from 'react-dom'
import MyIsomorphicComponent from './MyIsomorphicComponent'

render(
  <MyIsomorphicComponent />,
  document.getElementById('root')
)

Or just use ISL withStyles helper.

1reaction

Sawtaytoescommented, Oct 27, 2016

Thanks for that link! I don’t understand what you mean when you say