What problem does it solve?
- It’s tedious to create CSS files for every component by hand (new file, name it, context loss, …)
- It’s tedious to write media queries over and over again for each component
- Using attribute selectors can be tedious to type
[component="search bar"] {}
[component="search bar"] [part="search"] {}
@media(min-width: 768px) {
[component="search bar"] {}
[component="search bar"] [part="search"] {}
}
Features
- Create boilerplate component files with media query rules
- View component files from a folder
- Edit component files (basic)
How it works
- Choose folder with CSS files
- Enter name for component
- Enter a comma-separated list of media queries
- a
{name}.component.css file will be created containing boilerplate code for the selector
- Usage in HTML:
<section component="search bar">
<input part="search" type="search" />
</section>
Attribution
Things that could be improved
- Use CodeMirror instead of a text area for editing code
- Provide actions for adding "parts" to an existing component file. This could generate the selector for each media query. Design: [+] button right next to the title of the file.
- Search for projects with many files
