Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not generate definitions for imported stylesheets #48

Closed
k-g-a opened this issue Oct 2, 2019 · 4 comments
Closed

Does not generate definitions for imported stylesheets #48

k-g-a opened this issue Oct 2, 2019 · 4 comments
Milestone

Comments

@k-g-a
Copy link
Contributor

k-g-a commented Oct 2, 2019

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:

  1. ./foo/index.css with some relative imports:
@import './A.css'
@import 'B.css'
  1. corresponding files ./foo/A.css & ./foo/B.css
  2. the following postcss.config.js:
module.exports = { plugins: [require('postcss-import-sync2')()] };
  1. 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:

  1. postcss-import-sync2 plugin looks for sourceFile in AST statement: atRule.source.input.file (here)
  2. it's missing so the plugin falls back to options.root, which is process.cwd() (or passed option). at this point we could fix the problem by manually specifying path: [] option for postcss-import-sync2 plugin, but thats not future-proof solution involving some magical knowledge to be shared almong developers.
  3. going one step further, the atRule.source.input.file field is missing because DtsSnapshotCreator does not provide the from option to postcss.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.

@mrmckeb
Copy link
Owner

mrmckeb commented Oct 3, 2019

Hi @k-g-a, that sounds good to me - thanks!

I don't think it would break setups, but we could certainly test it. If you can make the PR with or without tests, that would be great - I can always add tests before getting the next release out this weekend.

@k-g-a
Copy link
Contributor Author

k-g-a commented Oct 3, 2019

Great news, will make 2 PRs (for this and for the less) tomorrow

@mrmckeb mrmckeb added this to the v1.4.0 milestone Oct 4, 2019
@mrmckeb
Copy link
Owner

mrmckeb commented Oct 4, 2019

Thank you!

k-g-a pushed a commit to k-g-a/typescript-plugin-css-modules that referenced this issue Oct 4, 2019
@k-g-a
Copy link
Contributor Author

k-g-a commented Oct 4, 2019

No problem. Those changes are quite small and are closely related, so I decided to make them via single PR :)

mrmckeb pushed a commit that referenced this issue Oct 14, 2019
@mrmckeb mrmckeb closed this as completed Oct 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants