Comments (4)
And for those who are stumbling upon this thread, here's the way I solved typed css modules with classnames.bind:
- Install the VS Code extenstion
awwit.typed-css-modules-plugin
- Install the
typed-css-modules
package within your directory (with npm or yarn, as you wish) - Put
// @type
at the top of the css (or scss) files you want to be processed - Save your css file and you should have a css.d.ts file created with all classnames exported
- Create a
classnames.d.ts
file at the root of your project (or in the src directory) with the code @IMalyugin provided - And you're good to go!
I prefer installing a VS Code extension rather than a webpack plugin or a standalone script because: 1) I'm a bit afraid of changing the webpack configuration ; and 2) I already have so many scripts running in my terminal, I prefer to keep it lean.
from classnames.
Glad that worked out for you!
Didn't have time to integrate it ourselves, the issue with generating .d.ts too late stuttered me.
If .d.ts files are up to date - everything's great, but once new css-files are added or existing css-files are modified, we have to rely on webpack being launched, plus accept the delay.
Not sure if those are still issues using vscode extension (i'm using `JetBrains line, not even sure there is a similar extension for me). If not, it would probably have to be some IDe-integrated in-memory stylesheet type parser.
Keep us posted If you run in any issues with your setup. :)
from classnames.
Wow, man you're a genius!
In your types definition there's no type for arrays, but I never use arrays with classnames.bind (and who does?).
So it's not perfect regarding to the features of the package, but regarding to me it's perfect, it does all what I need :)
If I encounter errors with those types I'll let you know in this thread
from classnames.
This seems to overlap with #299, so I will close this as duplicate. If you think this suggestion could fix the typing issues mentioned there feel free to create a PR.
from classnames.
Related Issues (20)
- Throwing an exception when accessing non-existent classes HOT 2
- why not using one build tool for publish the npm package? HOT 2
- Incomplete type signature for classnames/bind HOT 2
- Explain to me about "cx" HOT 1
- Getting error says 'this' context of type 'void' is not assignable HOT 4
- [Question] When I used Object's value to computed key, what happened? HOT 2
- SyntaxError: Unexpected end of script (Mobile Safari) HOT 5
- When no classes are selected, classNames should return null HOT 5
- Vulnerable dependencies (indirect security issues) HOT 1
- How to erase or replace the properties of the conditional class from external component? HOT 1
- why number can be a className HOT 1
- Can we add exports field for this package? HOT 4
- Need a maintainer? HOT 7
- Preparing for version 3.0 HOT 9
- Should we support CommonJS for 3.0? HOT 5
- No default export (v2.5.1) HOT 5
- Import from 'classnames' broken since v2.5.0 HOT 5
- Please use GitHub Releases HOT 6
- Unable to do v2 releases HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from classnames.