Describe the problem
This is an issue with
Related to https://sass-lang.com/d/if-function
This can likely be solved best by switching to Dart Sass #7758
From our builds in Cockpit, see all the comments about if-statement changes:
▲ [WARNING] sass warning: 1 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings. [plugin sass-plugin]
pkg/lib/cockpit-components-plot.jsx:33:7:
33 │ import '@patternfly/patternfly/patternfly-charts.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
▲ [WARNING] The Sass if() syntax is deprecated in favor of the modern CSS syntax.
Suggestion: if(sass(map-has-key($breakpoint-map, #{$breakpoint})): map-get($breakpoint-map, #{$breakpoint}); else: false)
More info: https://sass-lang.com/d/if-function [plugin sass-plugin]
node_modules/@patternfly/patternfly/sass-utilities/functions.scss:31:21:
31 │ if(map-has-key($breakpoint-map, #{$breakpoint}), map-get($breakpoint-map, #{$breakpoint}), false)
╵ ^
The plugin "sass-plugin" was triggered by this import
pkg/lib/cockpit-components-plot.jsx:33:7:
33 │ import '@patternfly/patternfly/patternfly-charts.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
▲ [WARNING] The Sass if() syntax is deprecated in favor of the modern CSS syntax.
Suggestion: if(sass(map-has-key($height-breakpoint-map, #{$height-breakpoint})): map-get($height-breakpoint-map, #{$height-breakpoint}); else: false)
More info: https://sass-lang.com/d/if-function [plugin sass-plugin]
node_modules/@patternfly/patternfly/sass-utilities/functions.scss:38:28:
38 │ if(map-has-key($height-breakpoint-map, #{$height-breakpoint}), map-get($height-breakpoint-map, #{$height-bre
╵ ^
The plugin "sass-plugin" was triggered by this import
pkg/lib/cockpit-components-plot.jsx:33:7:
33 │ import '@patternfly/patternfly/patternfly-charts.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
▲ [WARNING] The Sass if() syntax is deprecated in favor of the modern CSS syntax.
Suggestion: if(sass($hasWhere): ":where"; else: ":is")
More info: https://sass-lang.com/d/if-function [plugin sass-plugin]
node_modules/@patternfly/patternfly/sass-utilities/mixins.scss:393:8:
393 │ if($hasWhere,':where',':is')
╵ ^
The plugin "sass-plugin" was triggered by this import
pkg/lib/cockpit-components-plot.jsx:33:7:
33 │ import '@patternfly/patternfly/patternfly-charts.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
▲ [WARNING] The Sass if() syntax is deprecated in favor of the modern CSS syntax.
Suggestion: if(sass($hasWhere): ":where"; else: ":is")
More info: https://sass-lang.com/d/if-function [plugin sass-plugin]
node_modules/@patternfly/patternfly/sass-utilities/mixins.scss:402:8:
402 │ if($hasWhere,':where',':is')
╵ ^
The plugin "sass-plugin" was triggered by this import
pkg/lib/cockpit-components-plot.jsx:33:7:
33 │ import '@patternfly/patternfly/patternfly-charts.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
▲ [WARNING] The Sass if() syntax is deprecated in favor of the modern CSS syntax.
Suggestion: if(sass($val): -1; else: 1)
More info: https://sass-lang.com/d/if-function [plugin sass-plugin]
node_modules/@patternfly/patternfly/sass-utilities/mixins.scss:441:15:
441 │ if($val, -1, 1)
╵ ^
The plugin "sass-plugin" was triggered by this import
pkg/lib/cockpit-components-plot.jsx:33:7:
33 │ import '@patternfly/patternfly/patternfly-charts.scss';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Workaround
Apply Sass' own silence deprecations for if-statements if possible. We use esbuild-sass-plugin which has that functionality
sassPlugin({
silenceDeprecations: [
"if-function"
]
})
Jira Issue: PF-3475
Describe the problem
This is an issue with
Patternfly 5
Patternfly 6
other
Related to https://sass-lang.com/d/if-function
This can likely be solved best by switching to Dart Sass #7758
From our builds in Cockpit, see all the comments about if-statement changes:
Workaround
Apply Sass' own silence deprecations for if-statements if possible. We use
esbuild-sass-pluginwhich has that functionalityJira Issue: PF-3475