I have been playing with this issue for a while, I am placing some styling variables (blue, red, yellow) in a separate file and I am importing them in a module to use them.

I have a problem understanding how we store the values there.

1) import statement
If I use the import statement, I can get the values in my class with a console.log(blue), console.log(eval(blue)) but I can't read it with console.log(eval(formColor)). formColor is a string that is equal to "blue", "red", or "yellow".

I get this error for console.log(eval(formColor)) and can't explain why:

2) using const
If I define the styling variables directly at the beginning of my file, before the class definition, I can access them with a console.log(blue/eval(blue)/eval(formColor))

My question is, I want to reuse these variables somewhere else so they should be store in another file to make the code clear. How can I achieve that?

FYI, I am using Rails and Stimulus on this project.

radio_style.js (file were I define some styling variables)

const blue = { classToApplyNotChecked: [
"flex",
"justify-center",
"items-center",
"bg-white",
"rounded",
"border-2",
"border-blue-200"], classToApplyChecked: [
"flex",
"justify-center",
"items-center",
"bg-blue-200",
"rounded",
"border-2",
"border-blue-400"],};

form_controller.js (file were I want to import the styling variables in my controller class)

import { Controller } from "stimulus";
// import { blue, red, yellow } from "../plugins_variables/radio_style";

const blue = {...};

export default class extends Controller {
  static get targets() {
    return ["formWrapper", "errorMessage"];
  }
  ...
  styleRadio(){
    ...
    console.log(blue);
    console.log(eval(blue));
    console.log(formColor); // formColor retrieves a string value equal to "blue", "red" or "yellow"
    console.log(eval(formColor));
    ...
  }
}

Directories: