CODEWITHSUNDEEP
sassidedeprecation-warninghtmllint
Tamás Tarján
Tamás Tarján

Reputation: 41

how to deprecate a CSS selectors in IDE

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!

Upvotes: 4

Views: 1227

Answers (2)

Tamás Tarján
Tamás Tarján

Reputation: 41

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! ;)

Upvotes: 0

Martin
Martin

Reputation: 6172

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 + ';'
    },
},

Upvotes: 0

Related Questions