3

I'm looking for a solution, with it i can mark a selector in my scss files as deprecated. Then if i working on a html file and the same time want to use this "deprecated-selector" my IDE should mark the selector and should show a deprecation message to me. I would like to have something similar:

/**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old__selector {...}

...as like with JSDoc we do. It would be also fine to achieve this with .editorconfig or with some linting tool. For example, it would be great if I could set an array in the configuration file, with all of those deprecated selectors...or something like this? It would be also important to showing those deprecation message in the IDE, and not only later in the build/compiling phase. It's look like pretty hard to find a proper solution for it.

Any suggestions are welcome! Thanks Guys!

Tamás Tarján
  • 31
  • 2

2 Answers2

0

Those things fall into the realm of linters. I don't know anything about the capabilities of html linters. But you still would have another problem: in many cases the classname is only formed when the SASS is compiled to CSS.

/**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old {
    &__selector {}
}

.ui-fresh {
    &__selector {}
}

But what you can do is you can create a deprecation warning that shows up (when rendered) around all elements that use the old style. You can configure your webpack (or whatever bundler you use) to only include the deprecation warning when it is a DEV build, but never in a PROD build.

@import "deprecation";

/**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old {
    @include deprecated;
    &__selector {}
}

.ui-fresh {
    &__selector {}
}

and

// _deprecation.scss
@mixin deprecated {
    @if $env == development {
        border: 4px solid red !important;
    }
}

the $env variable can be set in your webpack config via the sass-loader option additionalData

{
    loader: 'sass-loader',
    options: {
        additionalData: '$env: ' + process.env.NODE_ENV + ';'
    },
},
Martin
  • 5,714
  • 2
  • 21
  • 41
  • thanks for your advice! It would be also nice, you'r right! This approach was rejected in our team - because it can be a frustration for our BE developers to seen red bordered areas everywhere in the app. (we have many selectrors to deprecate them ). It would be - as you sad - better to have it from a linter-tool. – Tamás Tarján Sep 20 '21 at 11:12
0

After some conversations we have a solution - sassdoc support in IDE!
Okay ...Almost there! The Team of Jetbrains already has a feature request! We only have to push some hundrends of VOTEs - they will then build in the Jetbrains IDEs.
Go for it folks!
https://youtrack.jetbrains.com/issue/WEB-12829
Make our Frontend Workflow great again! Together we can do that! ;)

Tamás Tarján
  • 31
  • 2