Version 1.33 Breaks Theme Colors in typescript files

[dBourgiotis]

• VSCode Version: 1.33
• OS Version: Mac Os 10.14.4

Steps to Reproduce:

1. After the update almost all my typescript files do not have correct color coding.
2. This happened when vscode updates from 1.32 to 1.33

On 1.32 works fine

Does this issue occur when all extensions are disabled?: Yes

As shown in the screenshot below 'this' has different colors

[Maktel]

It happened to me on Linux as well, although restarting VSCode helped.

[dBourgiotis]

It happened to me on Linux as well, although restarting VSCode helped.

I tried restarting both computer and vscode and it did not solve the problem. Only when I re install the 1.32 version seems to work fine

[mjbvz]

Does this reproduce if you disable all extensions?

Also, please share the text of the incorrectly colored code

[dBourgiotis]

import { Component, OnInit, OnDestroy, ChangeDetectorRef} from '@angular/core'
import { Title } from '@angular/platform-browser'
import { PreloaderService } from '../../preloader/preloader.service'
import { DateProviderService } from '../../../date-provider/date-provider.service'
import { RoleGuard } from '../../../authentication/role-guard.service'
import { FilterApiService } from '../../../services/filter-api.service'
import { CompanyMetrics, Metric } from '../company-metrics'
import { CompanyFilters } from '../filters/company-filters.interface'
import { DateCompareToRadio } from 'app/custom-month-picker/date-compare-to-radio/date-compare-to-radio.enum'
import { DatePeriod } from 'app/custom-month-picker/date-period-radio/date-period.enum'
import { Subscription } from 'rxjs'
import { cloneDeep, get } from 'lodash'
import { CompanySettingsService } from '../company-settings.service'
import { SiteTypeCountryProviderService } from '../providers/site-type-country-provider/site-type-country-provider.service'
import { PanelCompanyFiltersService } from '../filters/panel-company-filters/panel-company-filters.service';

declare const moment: any

@Component({
    moduleId: module.id,
    selector: 'ea-categories',
    templateUrl: 'categories.component.html',
})
export class CategoriesComponent implements OnInit, OnDestroy {
    title = 'Categories'
    header = 'Categories Reporting for'
    filters: any
    salesDist: any
    colors: any
    simpleColors: any
    categoriesEvolution: any
    categoriesSalesValue: any
    categoryMs: any

    currentYear: any = moment().format('YYYY')
    chartFlag = 1
    params: CompanyFilters = {
        month: '',
        company_account_id: '',
        period: null,
        compare_to: DateCompareToRadio.MoY,
        site_type_id: '',
    }
    categoryName: string
    brandName: string
    noTooltip = false

    canReadCompany: boolean

    hasReqError = false
    companyAccount: any
    warning: string
    excelPeriod: any
    msDeltas: any
    lastParams: string
    selectedMetric: Metric
    no_back_data: string

    salesDistCellsFormat: string[] = ['text','percent', 'percent', 'empty','text','currency','currency']
    evolutionCellsFormat: string[] = ['percent', 'percent', 'percent']
    salesValueCellsFormat: string[] = ['currency']

    DatePeriods = DatePeriod
    brand: any
    siteTypeSub: Subscription
    mainSub: Subscription
    subs: Subscription[] = []

    constructor(
        private titleService: Title,
        private preloaderService: PreloaderService,
        private dateProviderService: DateProviderService,
        private roleGuard: RoleGuard,
        private filterApiService: FilterApiService,
        private cdRef: ChangeDetectorRef,
        private companySettingsService: CompanySettingsService,
        private siteTypeCountryProviderService: SiteTypeCountryProviderService,
        private panelCompanyFiltersService: PanelCompanyFiltersService,
    ) {}

    ngOnInit(){
        this.preloaderService.change(true)
        this.canReadCompany = this.checkCompanyRole()
        this.filters= {'title':'categories'}
        this.categoriesSalesValue = {'title':'','id':'category_sales_value',"columns":'',subtitle: 'SORTED BY Market sales value for the selected period'}
        this.categoriesEvolution = {'title':'','id':'category-evolution',"columns":'',subtitle: 'SORTED BY Market sales value for the selected period', 
            grid :{
                y: {
                    lines: [
                        {
                            value: 0
                        }
                    ]
                }
        }}
        this.categoryMs ={'id':'category-ms','title':'',"columns":'',subtitle: 'SORTED BY Market sales value for the selected period'}
        this.colors= ["#C7D9EF","#224A7B","#FAD5B7","#E16C21","#FAB57A","#F06868","#80D6FF","#408AB4","#4D606E","#3FBAC2",
            "#D3D4D8","#F5F5F5","#34699A","#AA96DA","#E45A84","#FFACAC","#56BFB5","#38817A","#F5F093"]
        this.simpleColors= ["#C7D9EF","#224A7B"]
        this.salesDist ={'title':'','id':'sales-distribution',subtitle: 'SORTED BY sales value for the selected period'}
        this.msDeltas={'title':'DELTA OF VALUE MARKET SHARE PER CATEGORY','id':'ms_deltas',"columns":'','subtitle':'SORTED BY Market sales value for the selected period'}
        this.subFilters()
        this.subSiteTypeCountry()
    }

    private subSiteTypeCountry() {
        this.siteTypeSub = this.siteTypeCountryProviderService.changed$.subscribe(
            (data) => {
                if (data) {
                    this.params.site_type_id = get(data, 'site_type.id')
                    this.params.country_id = get(data, 'country.id')
                    this.formatParams(this.params)
                }
            }
        )
    }

    private subFilters() {
        const sub = this.panelCompanyFiltersService.filters$.subscribe(
            data => { if (data) this.filterChanged(data) }
        )
        this.subs.push(sub)
    }

    private checkCompanyRole(): boolean {
        return this.roleGuard.can('read', 'Company')
    }

    private saveToLocalStorage() {
        localStorage.setItem('company_month', this.params.month)
        localStorage.setItem('company_period', this.params.period)
    }

    private setTitle(company_name: string) {
        this.header = 'Category Reporting for '
        this.titleService.setTitle(`Category Reporting for ${company_name} | eRetail Audit By Convert Group`)
    }

    private formatParams(params: CompanyFilters) {
        const urlParams = this.companySettingsService.formatUrlParams(params, '/company/categories')
        if (urlParams) this.getReport(urlParams)
    }

    initDate(event: string) {
        this.params.month = event
        this.currentYear = moment(this.params.month,'YYYY-MM-DD').format('YYYY')
        this.params.period = this.dateProviderService.getPeriod()
        this.saveToLocalStorage()
        this.formatParams(this.params)
    }

    setDate(event : any){
        this.params.month = moment(event).format('YYYY-MM-DD')
        this.currentYear = moment(event).format('YYYY')
        this.saveToLocalStorage()
        this.formatParams(this.params)
    }

    setPeriod(period: DatePeriod) {
        this.params.period = period
        this.saveToLocalStorage()
        this.formatParams(this.params)
    }

    setCompareTo(compare_to: DateCompareToRadio) {
        this.params.compare_to = compare_to
        localStorage.setItem('company_compare_to', compare_to)
        this.formatParams(this.params)
    }

    clearResults() {
        this.hasReqError = true
    }

    filterChanged(event: any) {
        this.companyAccount = cloneDeep(event.companyAccountObject)
        this.categoryName = event.category_name
        this.params.company_account_id = event.company_account_id
        this.params.brand_id = event.brand_id
        this.params.custom_category_id = event.custom_category_id
        this.brand = event.brandObject
        this.setTitle(get(this.companyAccount, 'name'))
    }

    getMetric(value: string) {
        this.params.metric = value
        const metrics = new CompanyMetrics().metrics
        metrics.forEach(
            metric => {
                if (metric.key === value) {
                    this.selectedMetric = metric
                }
            }
        )
        this.formatParams(this.params)
    }

    getReport(params: CompanyFilters){
        this.no_back_data = null
        this.cdRef.detectChanges()
        this.cdRef.detach()
        if (this.mainSub) this.mainSub.unsubscribe()
        this.mainSub = this.filterApiService.getWithHeaders('company_categories', params)
        .subscribe(
            data => {
                this.no_back_data = data.body['no_back_data']
                const subtitle = `SORTED BY SELECTED PERIOD\'S ${this.selectedMetric.name}`
                this.categoriesEvolution.subtitle = subtitle
                this.categoryMs.subtitle = subtitle
                this.salesDist.subtitle = subtitle
                this.msDeltas.subtitle = subtitle
                this.categoriesSalesValue.subtitle = subtitle
                this.warning = data.warning
                //change the titles
                let catTitle = this.categoryName ? 'IN '+this.categoryName.toUpperCase() : 'Across Categories'
                let compareToMonth = this.params.compare_to =='MoM' ? ' ON MONTH OVER MONTH' : ' ON MONTH OVER YEAR'
                let time = this.params.period == 'Month' ? compareToMonth : ' OVER YEAR'
                this.categoriesSalesValue.title = ` ${this.selectedMetric.name} `+catTitle
                this.categoriesEvolution.title = ` EVOLUTION OF ${this.selectedMetric.name} `+catTitle+time
                this.categoryMs.title = ' MARKET SHARE '+catTitle+time
                this.salesDist.title = ` ${this.selectedMetric.name} Distribution `+catTitle
                this.excelPeriod = moment(this.params.month).format('MMMM YYYY')
                if(this.params.brand_id && this.brand){
                        this.categoryMs.title = this.brand.name + this.categoryMs.title
                        this.salesDist.title = this.brand.name + this.salesDist.title
                        this.categoriesEvolution.title = this.brand.name + this.categoriesEvolution.title
                        this.categoriesSalesValue.title = this.brand.name + this.categoriesSalesValue.title
                    }else{
                        this.categoryMs.title = get(this.companyAccount, 'name') + this.categoryMs.title
                        this.salesDist.title = get(this.companyAccount, 'name') + this.salesDist.title
                    }
                    this.categoryMs.period = this.excelPeriod
                    this.salesDist.period = this.excelPeriod
                    this.categoriesEvolution.period = this.excelPeriod
                    this.categoriesSalesValue.period = this.excelPeriod
                    this.salesDist.columns = data.body['sales_distribution'].columns
                    this.salesDist.groups = data.body['sales_distribution'].groups
                    this.salesDist['tooltips']= data.body['sales_distribution'].tooltips
                    this.salesDist['no_back_data']= data.body['sales_distribution']['no_back_data']
                    if (this.no_back_data || data.body['sales_distribution']['no_back_data']) {
                        this.salesDist.columns = this.salesDist.columns.map(item => {
                            item.splice(1, 1)
                            return item
                        })
                        Object.keys(this.salesDist.tooltips).forEach(key=>{
                            this.salesDist.tooltips[key].splice(0, 1)
                        })
                    }
    
                    this.msDeltas.title = ` DELTA OF VALUE MARKET SHARE ${catTitle}${time}`
                    if(this.params.brand_id && this.brand){
                        this.msDeltas.title = this.brand.name+ this.msDeltas.title
                    }else{
                        this.msDeltas.title = get(this.companyAccount, 'name') + this.msDeltas.title
                    }
                    this.msDeltas.period = this.excelPeriod
    
                    this.categoriesSalesValue.columns = data.body['sales_value'] ? data.body['sales_value'].columns : null
                    this.salesValueCellsFormat = this.categoriesSalesValue.columns ? this.categoriesSalesValue.columns.map(item => 'currency') :null
                    this.categoriesSalesValue['no_back_data']= data.body['sales_value']['no_back_data']

                    this.categoriesEvolution.columns = data.body['evolution'] ? data.body['evolution'].columns : null
                    this.categoriesEvolution['no_back_data']= data.body['evolution']['no_back_data']
                    this.evolutionCellsFormat = this.categoriesEvolution.columns ? this.categoriesEvolution.columns.map(item => 'percent') : null
                    this.categoryMs.columns = data.body['market_shares'] ? data.body['market_shares'].columns : null
                    this.categoryMs['no_back_data']= data.body['market_shares']['no_back_data']
                    this.msDeltas.columns= data.body['ms_deltas'] ? data.body['ms_deltas'].columns : null
                    this.msDeltas['no_back_data']= data.body['ms_deltas']['no_back_data']

                    this.chartFlag++
                    this.hasReqError = false
                    this.cdRef.reattach()
                    this.cdRef.detectChanges()
                },
                err => {
                    this.hasReqError = true
                    this.cdRef.reattach()
                    this.cdRef.detectChanges()
                },
            )
    }

    ngOnDestroy() {
        this.clearResults()
        if (this.siteTypeSub) this.siteTypeSub.unsubscribe()
        if (this.mainSub) this.mainSub.unsubscribe()
        this.subs.forEach(sub => { if (sub) sub.unsubscribe()})
        this.preloaderService.change(false)
    }

}

[mjbvz]

Thanks. Opened microsoft/TypeScript-TmLanguage#741 to track upstream