Support for Create React App 2

[benatespina]

Hi everyone!

I'm trying to use the next branch of Create React App (future version 2). Everything works great except this plugin. I don't understand why, but for example, the following configuration does not generate any changes in the CRA's Webpack configuration, when in the actual version of CRA works like a charm.

  require('react-app-rewire-postcss')(config, {
    plugins: () => [
      require('postcss-strip-inline-comments')(),
      require('postcss-preset-env')({
        stage: 2,
        features: {
          'nesting-rules': true,
          'custom-selectors': true
        }
      }),
    ]
  });

I'm trying to debug the plugin and comparing the two versions webpack.config.dev.js files but I don't understand what is the problem.

Thanks in advance.

[jonathantneal]

Thanks for the detailed heads up. This is probably what https://github.com/csstools/react-app-rewire-postcss/issues/3 intended to warn me about.

I’ll look into this. I haven’t any idea what the issue is yet, either.

[jonathantneal]

A few things I’ve noticed.

1. The current npm branch is still 1x. https://www.npmjs.com/package/create-react-app
2. React App Rewired is in a period of transition affecting a 2.0 compatible release. https://github.com/timarney/react-app-rewired/issues/162#issuecomment-417872507

Therefore, 2.0 compatibility my be out of my control.

1. Would you point me to other plugins that do work with 2.0? If so, I will look through their code to see how they’ve properly integrated with the next release.

2. Could you setup a small git project recreating the issue?

[benatespina]

Yeah, I know.

But there are plenty plugins that they are still working, for example:

• react-app-rewire-eslint
• react-app-rewire-stylelint

If you check the webpack.config.dev.js file from master and next branches, the config related with css files is the same. I'm trying to debugging your plugin source code but I don't find any bug related with the issue.

You can test easily creating a new CRA and changing the package.json with something similar.

{
  "name": "app",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-app-rewire-eslint": "^0.2.3",
    "react-app-rewire-postcss": "^1.0.2",
    "react-app-rewire-stylelint": "git://github.com/Ehres/react-app-rewire-stylelint.git#7353bcbee648a1a32b99f47968d572fefd0022ca",
    "react-app-rewired": "^2.0.0",
    "react-dom": "^16.4.2",
    "react-scripts": "2.0.0-next.a671462c"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "7.0.0-beta.46",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.46",
    "postcss-preset-env": "^5.3.0",
    "postcss-strip-inline-comments": "^0.1.5",
    "stylelint": "^9.5.0",
    "stylelint-order": "^0.8.1",
    "stylelint-selector-bem-pattern": "^2.0.0",
    "stylelint-webpack-plugin": "^0.10.5"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  }
}

And config-overrides.js

const rewireEsLint = require('react-app-rewire-eslint');
const rewireStyleLint = require('react-app-rewire-stylelint');
const rewirePostCssLoader = require('react-app-rewire-postcss');
const postcssPresetEnv = require('postcss-preset-env');
const stripInlineComments = require('postcss-strip-inline-comments');
const {injectBabelPlugin} = require('react-app-rewired');
const path = require('path');
const fs = require('fs');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = (config, env) => {
  config = rewireEsLint(config, env);

  config = rewireStyleLint.withLoaderOptions({files: 'src/**/*.css'})(config, env);

  config = injectBabelPlugin(['@babel/plugin-proposal-decorators', {legacy: true}], config);
  config = injectBabelPlugin(['@babel/plugin-proposal-class-properties', {loose: false}], config);

  config = rewirePostCssLoader(config, {
    plugins: () => [
      stripInlineComments(),
      postcssPresetEnv({
        stage: 2,
        features: {
          'nesting-rules': true,
          'custom-selectors': true
        }
      }),
    ]
  });

  return config;
};

[jonathantneal]

I have not been able to figure this out. I would need help.