Nesting edge case: custom variable is not getting replaced

[ajayjaggi97]

My postcss pipeline includes "postcss-nested" plugin before "postcss-css-variables" plugin.

You can see that in the output, var(--ON-IMAGE) is not replaced.

Input CSS

.translucentHoverBG {
  &:hover,
  &:focus {
    background: var(--TRANSLUCENT-HOVER-BG);
    span,
    i {
      color: var(--ON-IMAGE);
    }
  }
}

Output CSS

.translucentHoverBG:hover {
    background: rgba(255, 255, 255, 0.3);
  }

.translucentHoverBG:hover span, .translucentHoverBG:hover i {
      color: var(--ON-IMAGE);
    }

.translucentHoverBG:focus {
    background: rgba(255, 255, 255, 0.3);
  }

.translucentHoverBG:focus span, .translucentHoverBG:focus i {
      color: var(--ON-IMAGE);
    }

[MadLittleMods]

Where is --ON-IMAGE defined?

---

It seems to work fine in my testing below:

Input:

:root {
  --TRANSLUCENT-HOVER-BG: blue;
  --ON-IMAGE: red;
}

.translucentHoverBG {
  &:hover,
  &:focus {
    background: var(--TRANSLUCENT-HOVER-BG);
    span,
    i {
      color: var(--ON-IMAGE);
    }
  }
}

After postcss-nested (tested at https://sneakertack.github.io/postcss-playground/):

:root {
  --TRANSLUCENT-HOVER-BG: blue;
  --ON-IMAGE: red;
}

.translucentHoverBG:hover, .translucentHoverBG:focus {
  background: var(--TRANSLUCENT-HOVER-BG)
}
.translucentHoverBG:hover span, .translucentHoverBG:hover i, .translucentHoverBG:focus span, .translucentHoverBG:focus i {
  color: var(--ON-IMAGE);
}

After postcss-css-variables, seems to work ✅ (tested in the playground, https://madlittlemods.github.io/postcss-css-variables/playground/):

.translucentHoverBG:hover {
  background: blue
}

.translucentHoverBG:focus {
  background: blue
}
.translucentHoverBG:hover span {
  color: red;
}
.translucentHoverBG:hover i {
  color: red;
}
.translucentHoverBG:focus span {
  color: red;
}
.translucentHoverBG:focus i {
  color: red;
}

[ajayjaggi97]

Thanks for the quick reply @MadLittleMods.
I am passing the values through the variables option of the plugin. It doesn't seem to work for me.

[MadLittleMods]

Please provide the exact input before it's passed to postcss-css-variables. Also share the code you're using to run postcss and the plugins.

[ajayjaggi97]

I am using postcss-loader in webpack for postcss.

Here is my config.
postcss.config.js

const path = require('path');
const { parseFilesSync } = require('./tools/css-variables-parser');

const variables = parseFilesSync([
  path.resolve(__dirname, 'node_modules', 'tailwindcss', 'dist', 'base.css'),
  path.resolve(__dirname, 'node_modules', 'tailwindcss', 'dist', 'utilities.css'),
  path.resolve(__dirname, 'src', 'styles', 'themes', '_default.css'),
  path.resolve(__dirname, 'src', 'styles', 'themes', '_tv.css'),
  path.resolve(__dirname, 'src', 'styles', '_custom-variables-default.css'),
  path.resolve(__dirname, 'src', 'styles', '_custom-variables-tv.css')
]);

let plugins = [
  require('postcss-prepend-imports')({
      path: path.resolve(__dirname, 'src', 'styles'),
      files: ['_custom-variables-overrides.css']
    }),
  require('postcss-import')({
    root: path.resolve(__dirname, 'src'),
    plugins: [require('stylelint')]
  }),
  require('postcss-reporter')({
    clearReportedMessages: true,
    throwError: true
  }),
  require('postcss-aspect-ratio-polyfill'),
  require('postcss-nested'),
  require('postcss-sassy-mixins'),
  require('tailwindcss'),
  require('postcss-extend-rule'),

  /*
   * Note:
   * rtlcss plugin generates separate css files for rtl styles.
   * But we need to figure out a way of dynamically consuming the css files based on the dir attribute inside storybook as well as consumer applications.
   * Hence using postcss-rtlcss for now.
   */
  require('postcss-rtlcss'),
  require('postcss-css-variables')({ variables, preserveInjectedVariables: false }),
  require('cssnano')({
    preset: 'default'
  }),
  require('autoprefixer')
];

plugins = plugins.filter((plugin) => !!plugin);

module.exports = {
  plugins
};

Input css

 
.translucentHoverBG {
  &:hover,
  &:focus {
    background: var(--TRANSLUCENT-HOVER-BG);
    span,
    i {
      @apply ON_IMAGE;
    }
  }
}

ON_IMAGE class refers to => color: var(--ON-IMAGE) as defined in tailwind config.

CSS passed to postcss-css-variables plugin

.translucentHoverBG:hover,
  .translucentHoverBG:focus {
    background: var(--TRANSLUCENT-HOVER-BG);
  }

.translucentHoverBG:hover span, .translucentHoverBG:hover i, .translucentHoverBG:focus span, .translucentHoverBG:focus i {
      color: var(--ON-IMAGE);
    }

[MadLittleMods]

@ajayjaggi97 Testing the "CSS passed to postcss-css-variables plugin" works just fine in the playground, https://madlittlemods.github.io/postcss-css-variables/playground/

:root {
  --TRANSLUCENT-HOVER-BG: blue;
  --ON-IMAGE: red;
}

.translucentHoverBG:hover,
  .translucentHoverBG:focus {
    background: var(--TRANSLUCENT-HOVER-BG);
  }

.translucentHoverBG:hover span, .translucentHoverBG:hover i, .translucentHoverBG:focus span, .translucentHoverBG:focus i {
      color: var(--ON-IMAGE);
    }

In your config, what does console.log(variables) show? I suspect something might not be as expected there or another plugin is messing with it.

[ajayjaggi97]

@MadLittleMods i logged the variables, among other key value pairs there exists these ones.

  'ON-IMAGE': '#fff',
  'ON-IMAGE-ALT': 'rgba(255, 255, 255, 0.84)',
  'ON-IMAGE-ALT2': 'rgba(255, 255, 255, 0.6)',

Also if i remove background: var(--TRANSLUCENT-HOVER-BG) from my input css or separate out the nested code, everything works fine..
I also checked the output nodes from the source code of css-variables plugin, and its gives the correct value but somehow the css is not getting altered.

[ajayjaggi97]

hey @MadLittleMods.
Can you tell me which version is being used at https://madlittlemods.github.io/postcss-css-variables/playground/.
I will try with that.
I am currently using 0.18.0

[MadLittleMods]

@ajayjaggi97 It looks like it might be 0.14.0 which could have some differences looking at the changelog. Good thinking!

[marapper]

Specific case is

:root {
  --processed: #FFF;
  --unprocessed: #FFF;
}

.first, .second {
	background: var(--processed);

   .third, .four {
	color: var(--unprocessed);
  }
}

[jptaranto]

See this too with comma separated selectors.