Description
Describe the bug
Even if we could use @import
statements without throwing an error about plugin's async mode (i.e. via postcss-import-sync2
plugin) - we still don't get proper typings for such files.
To Reproduce
Assuming we have:
./foo/index.css
with some relative imports:
@import './A.css'
@import 'B.css'
- corresponding files
./foo/A.css
&./foo/B.css
- the following
postcss.config.js
:
module.exports = { plugins: [require('postcss-import-sync2')()] };
- and
./some.js
file importing styles:
import styles from './foo/index.css'
We won't get typings for styles
other than {}
, because of the resolution error (from TSS_LOG):
Info NNN [typescript-plugin-css-modules] Failed Error: Failed to find 'A.css'
in [
C:\Git\some-project-root
]
Expected behavior
Get proper typings.
Additional context
This bug occurs because of the following reasons:
postcss-import-sync2
plugin looks for sourceFile in AST statement:atRule.source.input.file
(here)- it's missing so the plugin falls back to
options.root
, which isprocess.cwd()
(or passed option). at this point we could fix the problem by manually specifyingpath: []
option forpostcss-import-sync2
plugin, but thats not future-proof solution involving some magical knowledge to be shared almong developers. - going one step further, the
atRule.source.input.file
field is missing becauseDtsSnapshotCreator
does not provide thefrom
option topostcss.process
here.
A simple one-line change (adding {from: fileName}
as a second argument) fixes the problem for us, but i'm not sure if this could break some common setups.
By the way, passing the same fileName
as filename
option to less.render
alongside with setting syncImport: true
should fix #47.
I can make a PR if it's proven to be the proper fix.