Closed ajayjaggi97 closed 1 year ago
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;
}
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.
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.
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);
}
@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.
@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.
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
@ajayjaggi97 It looks like it might be 0.14.0
which could have some differences looking at the changelog. Good thinking!
Specific case is
:root {
--processed: #FFF;
--unprocessed: #FFF;
}
.first, .second {
background: var(--processed);
.third, .four {
color: var(--unprocessed);
}
}
See this too with comma separated selectors.
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
Output CSS