Research prettier/CSS

a24julot commented

2026-05-04 12:21:44 +00:00

Collaborator

Research if prettier can be configured to have other settings for CSS files. Indentation should be 2 for CSS and when naming a rule set example-xxx. When referring to the rule set in the .js file, spaces are automatically made (styles.example - xxx) which results in an error. Is it better to use camelCase for naming or is prettier configurable to follow our standards?

a24julot added the

research

label

2026-05-04 12:22:01 +00:00

b24krila was assigned by a24julot

2026-05-04 12:22:08 +00:00

a24julot referenced this issue

2026-05-04 12:30:53 +00:00

Update css files #619

b24krila commented

2026-05-04 12:58:52 +00:00

Collaborator

Research:

Aimed towards if prettier can handle files differently and how we should go forward with the naming conventions for our css.

Naming issue:

From my research there is no clear prettier configuration that can solve the naming issue as the problem is not related to how prettier formats the css rather it relates to how Javascript parses property names when using css.

As we are using "kebab-case" the Javascript interprets this as a subtraction which changes the naming from:

.example-xxx

to:

.example - xxx

There is technically one thing that can be implemented to solve the naming issue and that's by using bracket-notation. Basically when importing the css from a module you would write:

styles['example-xxx'];

Instead of:

styles.example-xxx;

However this can lead to issues such as its easier to forget, less readable and can lead to developer errors. Therefore the easier and better solution is probably to switch our naming conventions and rules from kebab-case to camelCase.

Indentation issue:

Prettier can be used to handle the css separately from other files by using the configuration option override.

using something along these lines.

{
  "tabWidth": 4,
  "overrides": [
    {
      "files": ["*.css"],
      "options": {
        "tabWidth": 2
      }
    }
  ]
}

Links:

https://prettier.io/docs/options

https://prettier.io/docs/configuration

https://medium.com/@bhuvaneshcj/snake-case-vs-camel-case-vs-pascal-case-vs-kebab-case-understanding-code-naming-conventions-6f500676e3fd

### Research: Aimed towards if prettier can handle files differently and how we should go forward with the naming conventions for our css. ### Naming issue: From my research there is no clear prettier configuration that can solve the naming issue as the problem is not related to how prettier formats the css rather it relates to how Javascript parses property names when using css. As we are using "kebab-case" the Javascript interprets this as a subtraction which changes the naming from: `.example-xxx` to: `.example - xxx` There is technically one thing that can be implemented to solve the naming issue and that's by using bracket-notation. Basically when importing the css from a module you would write: `styles['example-xxx'];` Instead of: `styles.example-xxx; ` However this can lead to issues such as its easier to forget, less readable and can lead to developer errors. Therefore the easier and better solution is probably to switch our naming conventions and rules from kebab-case to camelCase. ### Indentation issue: Prettier can be used to handle the css separately from other files by using the configuration option **override**. using something along these lines. ``` { "tabWidth": 4, "overrides": [ { "files": ["*.css"], "options": { "tabWidth": 2 } } ] } ``` ### Links: https://prettier.io/docs/options https://prettier.io/docs/configuration https://medium.com/@bhuvaneshcj/snake-case-vs-camel-case-vs-pascal-case-vs-kebab-case-understanding-code-naming-conventions-6f500676e3fd

b24krila added the

needs review

label

2026-05-04 13:00:56 +00:00

a24julot referenced this issue

2026-05-04 13:25:38 +00:00

Questions for product owner and customer Week 5 #700

a24julot commented

2026-05-04 13:32:43 +00:00

Author

Collaborator

The solution with brackets works as intended, will ask the customer if kebab-case och camelCase is the best way to go.