Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Sass Deprecation Warning #742

Open
seabasseee opened this issue Jul 11, 2024 · 1 comment · May be fixed by #751
Open

[Bug]: Sass Deprecation Warning #742

seabasseee opened this issue Jul 11, 2024 · 1 comment · May be fixed by #751
Labels
bug Something isn't working

Comments

@seabasseee
Copy link

Bug description

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

Expected behavior

Would this fix it in _items.scss?

.#{$select-ns}-control {
	border: $select-border;
	padding: $select-padding-y $select-padding-x;
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	box-shadow: $select-shadow-input;
	border-radius: $select-border-radius;
	display: flex;
	flex-wrap: wrap;

	.#{$select-ns}-wrapper.multi.has-items & {
		& {
			$padding-x: $select-padding-x;
			$padding-top: calc(#{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border});
			$padding-bottom: calc(#{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} - #{$select-width-item-border});
			padding: $padding-top $padding-x $padding-bottom;
		}
	}

	.full & {
		& {
			background-color: $select-color-input-full;
		}
	}

	.disabled &,
	.disabled & * {
		& {
			cursor: default !important;
		}
	}

	.focus & {
		& {
			box-shadow: $select-shadow-input-focus;
		}
	}

	> * {
		& {
			vertical-align: baseline;
			display: inline-block;
		}
	}

	.#{$select-ns}-wrapper.multi & > div {
		& {
			cursor: pointer;
			margin: 0 $select-margin-item-x $select-margin-item-y 0;
			padding: $select-padding-item-y $select-padding-item-x;
			background: $select-color-item;
			color: $select-color-item-text;
			border: $select-width-item-border solid $select-color-item-border;
		}

		&.active {
			& {
				background: $select-color-item-active;
				color: $select-color-item-active-text;
				border: $select-width-item-border solid $select-color-item-active-border;
			}
		}
	}

	.#{$select-ns}-wrapper.multi.disabled & > div {
		&, &.active {
			& {
				color: lighten(desaturate($select-color-item-text, 100%), $select-lighten-disabled-item-text);
				background: lighten(desaturate($select-color-item, 100%), $select-lighten-disabled-item);
				border: $select-width-item-border solid lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
			}
		}
	}

	> input {
		&::-ms-clear {
			& {
				display: none;
			}
		}

		& {
			flex: 1 1 auto;
			min-width: 7rem;
			display: inline-block !important;
			padding: 0 !important;
			min-height: 0 !important;
			max-height: none !important;
			max-width: 100% !important;
			margin: 0 !important;
			text-indent: 0 !important;
			border: 0 none !important;
			background: none !important;
			line-height: inherit !important;
			user-select: auto !important;
			box-shadow: none !important;
		}

		&:focus { outline: none !important; }
	}

	.has-items & > input {
		& {
			margin: $select-caret-margin !important;
		}
	}

	&.rtl {
		& {
			text-align: right;
		}
		&.single .#{$select-ns}-control:after {
			& {
				left: $select-arrow-offset;
				right: auto;
			}
		}
		.#{$select-ns}-control > input {
			& {
				margin: $select-caret-margin-rtl !important;
			}
		}
	}

	.disabled & {
		& {
			opacity: $select-opacity-disabled;
			background-color: $select-color-disabled;
		}
	}

	.input-hidden & > input {
		& {
			opacity: 0;
			position: absolute;
			left: -10000px;
		}
	}
}

Steps to reproduce

Run npm build

Additional context

  • Browser All
@seabasseee seabasseee added the bug Something isn't working label Jul 11, 2024
@gnoddep gnoddep linked a pull request Jul 31, 2024 that will close this issue
@seabasss
Copy link

seabasss commented Sep 15, 2024

I still get this, using the latest version. Thank you!

transforming (40) node_modules/axios/lib/utils.jsDeprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
64  │ ┌         &::-ms-clear {
65  │ │             display: none;
66  │ │         }
    │ └─── nested rule
... │
68  │           flex: 1 1 auto;
    │           ^^^^^^^^^^^^^^ declaration
    ╵
    node_modules/tom-select/src/scss/_items.scss 68:3      @import
    node_modules/tom-select/src/scss/tom-select.scss 71:9  @import

Warning: 9 repetitive deprecation warnings omitted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants