Issues with leading dashes in css class names (e.g. --selected_item)

[NickIliev]

@SephReed commented on Fri Mar 29 2019

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
✔ Getting NativeScript components versions information...
✔ Component nativescript has 5.3.0 version and is up to date.
✔ Component tns-core-modules has 5.3.1 version and is up to date.
✔ Component tns-android has 5.3.0 version and is up to date.
✔ Component tns-ios has 5.3.0 version and is up to date.

Describe the bug
If you add the css class "--some_flag_type_class_name" to a view, it will not get the styling updates. This may be an issue with the sass interpreter, or something else.

Expected behavior
The classname should be valid

Additional context
This style of classname is really useful for state related styling. For instance <div class="--disabled"> or --fading_in. I use it a lot in web dev. Would be nice to continue using it.

---

@NickIliev commented on Mon Apr 01 2019

@SephReed moving the issue to the SASS plugin as it seems it is only reproducible when using SASS (working as expected with plain CSS)

[DimitarTachev]

Hi @SephReed

The issue is reproducible both in scss and css files when using the CLI --bundle flag. It is caused by an old version of the Webpack css-loader and it is already logged there (webpack/css-loader#578).

We moved this issue in the nativescript-dev-webpack plugin and we will fix it by updating the css-loader.

Meanwhile, you could fix it for your apps by running npm i css-loader@latest --save-dev.

[SephReed]

Awesome job you guys! Thank you very much.