CODEWITHSUNDEEP
cssreactjswebpackmini-css-extract-plugin
Владислав Литвиненко
Владислав Литвиненко

Reputation: 41

Duplicating css var. First time with correct value and second time just like var(--variable). Why? (React, webpack, css)

I have next css which I include in js file:

:root {
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
}

.annotationLayer .textWidgetAnnotation textarea {
  background-image: var(--annotation-unfocused-field-background);
}

and after generation from webpack I get next css bundle and it duplicate:

.annotationLayer .textWidgetAnnotation textarea {
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  background-image: var(--annotation-unfocused-field-background);

my webpack.common.js:

module: {
      rules: [
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject <style> tags.
        // In production, we use MiniCSSExtractPlugin to extract that CSS
        // to a file, but in development "style" loader enables hot editing
        // of CSS.
        // By default we support CSS Modules with the extension .module.css
        {
          test: /\.css$/,
          exclude: cssModuleRegex,
          use: [
            {
               loader: MiniCssExtractPlugin.loader
            },

            {
               loader: require.resolve('css-loader'),
               options: cssOptions,
            }
          ],
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
        },

why it duplicate?

Upvotes: 3

Views: 780

Answers (2)

dnaveen
dnaveen

Reputation: 301

This is because of postcss-preset-env. By default, this configuration adds compiled values as well background-color: #fff; background-color: var(--bf-color); for the CSS custom properties instead of just background-color: var(--bg-color);

I have added stage: 4 to the .postcss.config.js file to avoid the extra line.

module.exports = {
  plugins: {
    'postcss-preset-env': {
      browsers: 'last 2 versions',
      stage: 4
    },
  },
}

Upvotes: 1

Владислав Литвиненко
Владислав Литвиненко

Reputation: 41

Here is the root couse:

{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
            PrefixWrap(".test", {
              ignoredSelectors: [":root"],
            })
          ],
          sourceMap: true,
        },
      },

postcss-preset-env do this duplicates. I passed number 4 into stage and level of polyfill become stable.

Upvotes: 1

Related Questions