Repository files navigation

Parcel plugin that loads CSS into JavaScript and TypeScript files as a string. The string is useful for cases when you need to inject styling into components. The plugin is compatible withReadymade and other component libraries where you specify component level styling as a string.

npm install -D parcel-plugin-css-as-stringyarn add parcel-plugin-css-as-string --dev

Note: If the console shows that the CSS module cannot be found after installation, delete the cache and dist folders and rebuild the project.

button.css

:host {  background: rgba(24, 24, 24, 1);  cursor: pointer;  color: white;  font-weight: 700;  padding: 12px 8px;  border-radius: 4px;}

button.ts

importcssfrom'./button.css'@Component({selector:'my-button',style:style})

1. You want to inject styling into custom element Shadow DOM
2. You want to use any CSS preprocessor

This plugin acts as a passthrough for styling so you can leverage CSS strings in JavaScript. By default, Parcel would return an empty Object if you tried to import CSS into JS. This plugin serializes the CSS so it returns properly as a string.