1.1.0 ā¢ Published 6 years ago
parcel-plugin-typed-css-modules v1.1.0
Parcel Plugin Typed CSS Modules
Installation
All you need to do is install the npm package š
npm install parcel-plugin-typed-css-modules
How does it work?
After installing the plugin, parcel will generate .d.ts
files next to any .css
or
.scss
files that are imported by your app.
e.g.
app
āāā index.ts
āāā css-example.css
āāā css-example.css.d.ts <-- created by parcel-plugin-typed-css-modules
the contents of css-example.css
look like this:
.myClass {
display: block;
}
.another-class {
display: block;
}
and the resulting declaration file looks like this:
export const myClass: string;
export const anotherClass: string;
Now the typescript compiler can warn you about unknown/unused CSS classes:
import { myClass, anotherClass, oopsClass } from './css-example.css'; // <-- compilation error: oopsClass is not exported!
Support for CSS Modules (i.e., scoped/localized/mangled class names)
CSS modules are supported.
If Parcel is configured to use PostCSS and CSS modules are enabled
(e.g., the .postcssrc
file contains modules: true
), the contents of css-example.css
will look like this:
._myClass_1npel_2 {
display: block;
}
._another-class_1npel_6 {
display: block;
}
The generated css-example.css.d.ts
file will still contain the "plain" variable names so that you can continue to
reference them as you'd expect in your application:
export const myClass: string;
export const anotherClass: string;