Lacking and confusing documentation

[ackvf]

Hi, I find the documentation lacking and confusing. It tells me how to do stuff like :global :local, composition, extarnal dependencies and whatnot, but I don't have a real world css analogy to those, so I don't know how to use them and why.

What I am concerned about is:

1. How do I use this in my component?

.box { }
.box.red { }
.box.blue { }

2. How do I combine style definition from parent?

Box.tsx and box.module.css

.box {}

// export const Box = ...
<div className={styles.box} />

Article.tsx and article.module.css

.article { }
.article .box { }

<article className={styles.article}><Box/></article>

3. I have already figured out how to apply multiple classes at once, but it is also not documented

.large { }
.small { }
.black { }
.orange { }

<div className={[styles.large, styles.black].join(' ')} />

4. What about this?
   Similar as above, except:

.box { }
.small { }
.large { }

// export const SmallBox = ...
<div className={[styles.box, styles.small].join(' ')}  />

then

.article .box.small { }
.article .box.large { }

<article className={styles.article}>
  <SmallBox/>
  <LargeBox/>
</article>

[rahul-wos]

I'm facing same issues. Did you find any solutions to your problems?

[JALabba]

Classes that are present in the .modules.css file AND initialized in the file where the module is imported by the object of the css module, for example, <div className={style.box} will work like normal css classes. ALL module scoped classes and id's must have at least an empty selector, or they will be "undefined".

1. Therefore, combined selectors work as normal in the same module scope.
2. stylesheet modules of parent and child shouldn't be combined, because they are scoped. If you want scoped class anyway( you have a component that changes style based on the parent that is identical or unknown, you should probably rethink if you want it to be reusable ), you can send the string value of {style.whatever} to the parent to append a class dynamically, or getelementbyid. Also, you can use a prop to activate a stylesheet or append a classname conditionally in the child.
3. multiple classnames is not documented, but the attribute "classNames" only takes a single string. When you assign an interpolated value {style.whatever}, it iterpolates to a string. Your solution is interpolating an array of strings into a string joined with spaces. Another way of doing it is using the template literal operator, the backtick character " ´ ", for example <p className=´${style.foo} ${style.bar}´> The template literal, or template string operator allows inserting interpolated values into a string.
4. The same answer as 2. Don't mix module scopes. dunno if this works, but a third way is to import the same modules.css file and write the styles in that file. The whole purpose is to scope styles, so don't make styles dependent on classes in the parent. If possible, instead of looking for .parentclass, look for div elements or nth child, etc.
5. :global and :local are for writing selectors. You switch to global, everything following will be global css selectors. You switch back with local and continue specifying selector. The :global(.globalclass) is useful if you're inserting some global selectors into a selector that is in local and will continue in local scope following that selector. Notice, global scope class selectors are not class selectors from other modules, they're global like normal css files, or given global scope in a module. Further, using .class { composes: .someclass from './foo.css'; } is not the same as a selector, and the order of applying css is undefined.