title: How do you configure Create React App to use CSS Blocks?
body: <p>CSS blocks just went open source and I wanted to incorporate it into my React app while still using the boilerplate CRA webpack because I want to keep all the other functionality. </p>
  
  <p>From what I understand the majority of the configuration is simply adding another babel-loader with the css-block plugin.</p>
  
  <p>So instead of just: </p>
  
  <pre><code>{
              test: /\.(js|jsx|mjs)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
  
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
              },
            },
  </code></pre>
  
  <p>You follow it with: </p>
  
  <pre><code>{
          test: /\.[j|t]s(x?)$/,
          exclude: /node_modules/,
          use: [
  
            {
              loader: require.resolve('babel-loader'),
              options: {
                presets: [require.resolve("babel-preset-react-app")],
                cacheDirectory: true,
                compact: true,
              }
            },
  
            // Run the css-blocks plugin in its own dedicated loader because the react-app preset
            // steps on our transforms' feet. This way, we are guaranteed a clean pass before any
            // other transforms are done.
            {
              loader: require.resolve('babel-loader'),
              options: {
                plugins: [
                  require("@css-blocks/jsx/dist/src/transformer/babel").makePlugin({ rewriter: CssBlockRewriter }),
                ],
                cacheDirectory: true,
                compact: true,
                parserOpts: {
                  plugins: [
                    "jsx",
                    "doExpressions",
                    "objectRestSpread",
                    "decorators",
                    "classProperties",
                  ]
                }
              }
            },
  </code></pre>
  
  <p>But, I cannot for the life of me get the second bit to parse anything. It's like it doesn't even exist and my CSS modules are just being referenced inside the class. Result ends up being like:</p>
  
  <pre><code>&lt;div class="/src/test.css"&gt;
  </code></pre>
  
  <p>instead of </p>
  
  <pre><code>&lt;div class="a b cD"&gt;
  </code></pre>
  
  <p>If anyone has any pointers of where I should try to look I would greatly appreciate it! </p>
  
  <p>P.S. For reference I'll include links to the docs below since it's very new</p>
  
  <p><a href="http://css-blocks.com/" rel="nofollow noreferrer">http://css-blocks.com/</a> </p>
  
  <p><a href="https://github.com/linkedin/css-blocks/blob/master/packages/%40css-blocks/website/config/webpack.config.dev.js" rel="nofollow noreferrer">https://github.com/linkedin/css-blocks/blob/master/packages/%40css-blocks/website/config/webpack.config.dev.js</a></p>