Closed
Description
Describe the bug
When using the postcss-nested plugin to nest rules, the types are not generated as expected.
To Reproduce
Steps to reproduce the behavior:
- Add a PostCSS config:
// postcss.config.js
module.exports = {
plugins: {
'postcss-nested': {},
},
};- Configure the plugin to have the
useConfigboolean on thepostCssOptionsobject set totrue:
// tsconfig.json
{
"name": "typescript-plugin-css-modules",
"options": {
"postCssOptions": {
"useConfig": true
}
}
}- Make a CSS module file with nested rules:
/* Foo.module.css */
.foo {
width: 100%;
&__bar {
z-index: 1;
}
}- Use the styles in JS:
import styles from './Foo.module.css';
console.log(styles['foo__bar']); // Property 'foo__bar' does not exist on type '{ foo: string; }'.Expected behavior
Because of the & in the selector, this nested rule becomes a new selector in addition to the root one.
The type definition of styles should be:
{
foo: string;
'foo__bar': string;
}