Deion In CSS module, we would like to write shorter class na

Why do you think having a query parameter is better than using <code class="notranslat

CSS module prefix query parameter about vite HOT 3 OPEN

guoyunhe commented on September 12, 2024

CSS module prefix query parameter

from vite.

Comments (3)

sapphi-red commented on September 12, 2024

Why do you think having a query parameter is better than using generateScopedName?

from vite.

guoyunhe commented on September 12, 2024

Why do you think having a query parameter is better than using generateScopedName?

a query parameter allows you to handle complex situation, while generateScopedName is a static rule based on filepath etc. For example

// full path is src/order/product/index.module.css
import styles from './index.module.css?prefix=OrderProduct';

// full path is src/order/product/Cover.module.css
import styles from './Cover.module.css?prefix=OrderProductStatus';

Both query parameter and generateScopedName have their advantages.

from vite.

sapphi-red commented on September 12, 2024

while generateScopedName is a static rule based on filepath etc.

You can use pass a function to generateScopedName.

generateScopedName: function (name, filename, css) {
  const map = { 'src/order/product/index.module.css': 'OrderProduct' }
  const mapped = map[normalize(filename)]
  const line = css.substr(0, i).split(/[\r\n]/).length;
  const file = path.basename(filename, ".css");
  return "_" + map + "_" + line + "_" + name;
},

I noticed now that importing a same file with different query would be a problem.

// src/foo.js
import styles from './index.module.css?prefix=OrderProduct';
// src/bar.js
import styles from './index.module.css?prefix=OrderProductStatus';

from vite.

Recommend Projects