css-loader

[KevinGrandon]

The css-loader is becoming a common use-case in many projects. Create react app also supports it outside of the box. We should support this also.

More to come.

[flyingsky]

Maybe we can add way to customize webpack to config any loader.

[rickyp-uber]

Sass loader would also be super awesome too! Just in case that gets missed on this ticket.

[rickyp-uber]

So I started to mess around with this a bit and pretty quickly entered a depth of knowledge issue since I haven't really mucked around too much with server-side rendering.

In fusion-cli/build/compiler.js I added the following code into the module.rules property of the webpack config (Line 221 for me)

        /**
         * Style loaders
         */
        {
          test: /\.dom.css$/,
          use: [ 'style-loader', 'css-loader' ]
        },
        {
          test: /\.dom.less$/,
          use: [{
            loader: 'style-loader' // creates style nodes from JS strings
          }, {
            loader: 'css-loader' // translates CSS into CommonJS
          }, {
            loader: 'less-loader' // compiles Less to CSS
          }]
        },
        {
          test: /\.dom.scss$/,
          use: [{
              loader: "style-loader" // creates style nodes from JS strings
          }, {
              loader: "css-loader" // translates CSS into CommonJS
          }, {
              loader: "sass-loader" // compiles Sass to CSS
          }]
        },

Things to note:

• I used .dom.css to be very explicit that the css will be attached to the dom directly.
• .css is for static resources
• .module.css could be used later for css-modules
• All loaders become dev-dependencies though possibly could become peer-dependencies though everyone who uses fusion-cli will then get a warning saying a peer-dependency hasn't been met. I don't know of a concept of a plugin-dependency through npm but that would be cool.

When running, I ran into is when I linked it to actually run a fusion site, you get a lovely error message

I'm assuming this is due to when you are running server side rendering, the window isn't defined.

Possibly moving to css-modules would solve this (ExtractTextPlugin may pull something out here and covert it to js which can currently be loaded) but I think it would be useful to meet the dom scenario as well.

Anyways, if anyone knows how to solve the window reference issue, let me know!

[KevinGrandon]

Thanks for investigating and documenting your findings here @rickyp-uber. I think initially we should just get a single CSS strategy working, and IMO that is probably CSS Modules as that's becoming more or less a standard within react frameworks (CRA for example).

[ajbogh]

I played around with css-loader modules and got a little further, however I couldn't get the CSS to render properly. If someone wanted to take this up I would be very happy.

// node-modules/flow-cli/build/compiler.js

module: {
      strictExportPresence: true,
      rules: [
        // BEGIN added code
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'css-loader',
              options: {
                  modules: true,
                  localIdentName: '[name]__[local]___[hash:base64:5]',
                  import: false
              }
            },
            'sass-loader',
          ]
        }
        // END added code
      ].filter(Boolean),

Add scss file to the project. I chose src/styles/my-component.scss.

// src/styles/my-component.scss

// note: prefer to use camel case, kebab case requires bracket notation in JS
.myClass {
  background-color: red;
}

Within the component import the stylesheet.

// src/components/my-component.js

import styles from '../styles/my-component.scss';

console.log(styles);
/*
  {
    locals: { myClass: 'myComponent_myClass_adf13' }
    toString: Function
  }
*/

class MyComponent extends React.Component {
  render() {
    return (
      <div className={styles.locals.myClass} />
    );
  }
}

Documentation for css-loader modules says that the className property should have been styles.myClass, however that would have been undefined. The problem with using locals is that it still didn't load the CSS, so I don't quite know what was wrong at this point.

[mrmuhammadali]

Maybe we can add way to customize webpack to config any loader.

That'd be really awesome. I want to add worker-loader, it's been more than a month since I'm messing around.