jakoblind / webpack-autoconf

A tool to create frontend apps using webpack, Parcel or Snowpack
https://createapp.dev/
873 stars 78 forks source link

Refactor PostCSS + CSS Modules #53

Open lucasjs opened 4 years ago

lucasjs commented 4 years ago

The config now is huge and confuse:

      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ],
        exclude: /\.module\.css$/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true
            }
          },
          'postcss-loader'
        ],
        include: /\.module\.css$/
      }

I made some changes and we can have the same goal with this and also, delete the postcss.config.js file:

      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                require('autoprefixer')
              ]
            }
          }
        ]
      }

If you agree, I can make some changes and create a Pull Request! :)

jakoblind commented 4 years ago

You have selected CSS Modules, Post CSS and CSS. The config is not that complex when only selecting CSS Modules and Post CSS:

image

One problem is that CSS is autoselected when clicking PostCSS even though CSS Modules is selected, which can lead to confusion. A fix is to not autoselect in that case.

lucasjs commented 4 years ago

@jakoblind I could fix that! And what about remove the postcss.config.js file?