React.CSSProperties shows parsing error when used to insert css variables into App

Question

I am trying to use these variables in my scss file so that I can change my theme in the future directly from here. But it shows me parsing error, which was not there in the previous projects.

This is a React CRA project with typescript.

//App.tsx

import React from "react";
import "./App.scss";

const lightTheme = {
    "--primary": "#27AE60",
    "--text-primary": "#000000",
    "--background-primary": "#ffffff",
    "--background-secindary": "#fafafa",
} as React.CSSProperties;

const App = () => {
    return <div className="App" style={lightTheme}></div>;
};

export default App;

I can now use them as -

//App.scss

body {
color: var(--primary);
}

My package.json file -

{
    "name": "management-portal",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "@types/jest": "^26.0.15",
        "@types/node": "^12.0.0",
        "@types/react": "^16.9.53",
        "@types/react-dom": "^16.9.8",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "sass": "^1.32.5",
        "typescript": "^4.0.3",
        "web-vitals": "^0.2.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

But it is throwing me this error ...

  Line 9:3:  Parsing error: Unexpected token, expected ";"    

   7 |  "--background-primary": "#ffffff",
   8 |  "--background-secindary": "#fafafa",
>  9 | } as React.CSSProperties;
     |   ^
  10 | 
  11 | const App = () => {
  12 |  return <div className="App" style={lightTheme}></div>;

Although I expect the following result - Expected result in browser

I have got a workaround for the error, which works fine. But I am not able to find my mistake in my earlier code. Here it is -

import React from "react";
import "./App.scss";

const lightTheme: any = {
    "--primary": "#27AE60",
    "--text-primary": "#000000",
    "--background-primary": "#ffffff",
    "--background-secindary": "#fafafa",
};

const App = () => {
    return <div className="App" style={lightTheme}></div>;
};

export default App;

Answer 1

I successfully cloned your repo and found out what was the cause of the above error.

You are missing eslintConfig property in package.json:

{
  "name": "management-portal",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "sass": "^1.32.5",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": { <----- This one
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Potentially you will need to add this yarn add -D eslint-config-react-app

It's a small fix, but this property is generated by CRA cli. Not sure why you are missing it since you used that command (Maybe your app was ejected or you are adding Typescript to your app ad hoc).