error compiling SCSS with postcss-custom-properties (NodeJS/Nuxt)
Kidounet opened this issue · 4 comments
- Framework Version: V3.0.0
- Flavor used: default
- Operating System/Browser: all
- Code to reproduce: n/a
- Screenshots: n/a
- Bug description: Warning when compile SCSS with postcss-custom-properties (NodeJS/Nuxt)
mixin code are ignored, and primary/secondary/tertiary alternative don't work
WARNING Compiled with 26 warnings 17:28:57
warning in /srv/www/camarilla/site/assets/mini-cama.scss
(Emitted value instead of an instance of Error) postcss-custom-properties: /srv/www/node/dev/node_modules/mini.css/src/mini/_contextual_mixins.scss:11:6: Custom property ignored: not scoped to the top-level :root element (mark.secondary { ... --mark-back-color: ... })
@ /srv/www/camarilla/site/assets/mini-cama.scss 4:14-240 13:3-17:5 14:22-248
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/dev/__webpack_hmr ./.nuxt/client.js
warning in /srv/www/camarilla/site/assets/mini-cama.scss
(Emitted value instead of an instance of Error) postcss-custom-properties: /srv/www/node/dev/node_modules/mini.css/src/mini/_contextual_mixins.scss:11:6: Custom property ignored: not scoped to the top-level :root element (mark.tertiary { ... --mark-back-color: ... })
@ /srv/www/camarilla/site/assets/mini-cama.scss 4:14-240 13:3-17:5 14:22-248
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/dev/__webpack_hmr ./.nuxt/client.js
warning in /srv/www/camarilla/site/assets/mini-cama.scss
(Emitted value instead of an instance of Error) postcss-custom-properties: /srv/www/node/dev/node_modules/mini.css/src/mini/_input_control_mixins.scss:16:10: Custom property ignored: not scoped to the top-level :root element (button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse { ... --button-back-color: ... })
@ /srv/www/camarilla/site/assets/mini-cama.scss 4:14-240 13:3-17:5 14:22-248
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/dev/__webpack_hmr ./.nuxt/client.js
(...)
after few test, error come from mixin files. for exemple :
@if $mark-alt-back-color != $mark-back-color {
#{$mark-back-color-var}: $mark-alt-back-color;
}
replace #{$mark-back-color-var} by background-color :
@if $mark-alt-back-color != $mark-back-color {
background-color: $mark-alt-back-color;
}
changes in 4 files :
4 lines in progress_mixins :
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
$progress-alt-back-color : $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-fore-color != $progress-fore-color{
// bug : #{$progress-fore-color-var}: $progress-alt-fore-color;
color: $progress-alt-fore-color;
}
@if $progress-alt-back-color != $progress-back-color {
// bug : #{$progress-back-color-var}: $progress-alt-back-color;
background-color: $progress-alt-back-color;
}
}
}
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-fore-color : $spinner-donut-fore-color,
$spinner-donut-alt-back-color : $spinner-donut-back-color) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-fore-color != $spinner-donut-fore-color{
// bug : #{$spinner-donut-fore-color-var}: $spinner-donut-alt-fore-color;
color: $spinner-donut-alt-fore-color;
}
@if $spinner-donut-alt-back-color != $spinner-donut-back-color {
// bug : #{$spinner-donut-back-color-var}: $spinner-donut-alt-back-color;
background-color: $spinner-donut-alt-back-color;
}
}
}
5 lines in layout_mixins :
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
$card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
.#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color {
// bug : #{$card-back-color-var}: $card-alt-back-color;
background-color: $card-alt-back-color;
}
@if $card-alt-fore-color != $card-fore-color {
// bug : #{$card-fore-color-var}: $card-alt-fore-color;
color: $card-alt-fore-color;
}
@if $card-alt-border-color != $card-border-color {
// bug : #{$card-border-color-var}: $card-alt-border-color;
border-color: $card-alt-border-color;
}
}
}
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
$card-section-alt-fore-color : $card-fore-color) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color {
// bug : #{$card-back-color-var}: $card-section-alt-back-color;
background-color: $card-section-alt-back-color;
}
@if $card-section-alt-fore-color != $card-fore-color {
// bug : #{$card-fore-color-var}: $card-section-alt-fore-color;
color: $card-section-alt-fore-color;
}
}
}
5 lines in input_control_mixins :
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
$button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
$button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
@if $button-alt-back-color != $button-back-color {
// bug : #{$button-back-color-var}: $button-alt-back-color;
background-color: $button-alt-back-color;
}
@if $button-alt-fore-color != $button-fore-color{
// bug : #{$button-fore-color-var}: $button-alt-fore-color;
color: $button-alt-fore-color;
}
@if $button-alt-border-color != $button-border-color{
// bug : #{$button-border-color-var}: $button-alt-border-color;
border-color: $button-alt-border-color;
}
&:hover, &:focus {
@if $button-alt-hover-back-color != $button-hover-back-color{
// bug : #{$button-hover-back-color-var}: $button-alt-hover-back-color;
background-color: $button-alt-hover-back-color;
}
@if $button-alt-hover-border-color != $button-hover-border-color{
// bug : #{$button-hover-border-color-var}: $button-alt-hover-border-color;
border-color: $button-alt-hover-border-color;
}
}
}
}
}
2 lines in contextual_mixins :
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
$mark-alt-fore-color : $mark-fore-color) {
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
// bug : #{$mark-back-color-var}: $mark-alt-back-color;
background-color: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color{
// bug : #{$mark-fore-color-var}: $mark-alt-fore-color;
color: $mark-alt-fore-color;
}
}
}
With this few changes, all working correctly. I don't know if it the best way to correct this.
Thanks
This is not the correct way to fix this as these are CSS variables that are being overwritten instead of CSS properties. I will look into this, though, see if there is a solution.
hi,
Your mixins are never include into another css element. It's just for make element sub-class alternative.
In _contextual_mixins for example, mark alternative "make-mark-alt-size" add a new mark sub-class for overwrite padding and border-radius of standard mark properties.
I think you can do same thing for make-mark-alt-color : just overwrite color and background-color (if necessary). It's more simple than change variable (and don't work for all people).
Custom properties (with double-dash) can only defined in :root element
In your actual code, you change mark-back-color-var variable :
#{$mark-back-color-var}: $mark-alt-back-color;
it' same like :
--mark-back-color: $mark-alt-back-color;
but isn't in a :root element.
--mark-back-color is only used in mark background properties (in _contextual.scss)
I don't understand why you want to change this mark property through variable, because mixin is for add a sub-class properties (ie mark.primary).
In final, css after compiling must be like :
mark { (...) background-color: #xxx (...) } /* with #xxx defined in $mark-back-color /
mark.primary { background-color: #yyy } / with #yyy defined in make-mark-alt-color call */
and my solution do this ^_^
Thanks for your job.
ps : few changes for _progress_mixins (background-color error and add for webkit and mozilla specific code) :
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
$progress-alt-back-color : $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-fore-color != $progress-fore-color{
// bug : #{$progress-fore-color-var}: $progress-alt-fore-color;
color: $progress-alt-fore-color;
// Foreground color on webkit browsers
&::-webkit-progress-value {
background: $progress-alt-fore-color;
}
// Foreground color on Firefox
&::-moz-progress-bar {
background: $progress-alt-fore-color;
}
}
@if $progress-alt-back-color != $progress-back-color {
// bug : #{$progress-back-color-var}: $progress-alt-back-color;
background: $progress-alt-back-color;
// Background color on webkit browser
&::-webkit-progress-bar {
background: $progress-alt-back-color;
}
}
}
}
CSS variables cascade, meaning an element created via the mixin does change its properties and the ones of its children. CSS variables are one of the key features of V3, therefore mixins absolutely must utilize them, isntead of hard-coding properties.
node-sass compiles this entirely fine and has been supporting this for a long time. Also, having tested this with a few online tools, it works alright, no errors so far. Therefore, this is a tool-specific or environment-specific problem. I'll try to figure it out, but the variables have to be compiled like that.
Hi,
With last framework update, all working perfectly.
Thanks for your job.
You can see your css framework in action here : https://camarilla-fr.com