joplin-plugin-import-local-css

Joplin Local CSS @imports

This is a proof-of-concept plugin intended to address this issue.

At present, it works by finding @imports in <style> blocks, then manually fetching and inserting the corresponding CSS file.

Example note

<style>
	/* Import CSS from a file: */
	@import "/tmp/test.css";
	/* Import CSS from a note: */
	@import ":/50775d77690042ad92fdc7478b539afa";
</style>

This is a note

Above, the @import ":/50775d77690042ad92fdc7478b539afa" imports CSS from a note with ID 50775d77690042ad92fdc7478b539afa. The note should contain a single css code block contianing the CSS to be imported. For example,

Optionally, a comment can be included on the lines before the CSS block.
```css
/* CSS here! */
```

How it works

Currently, this plugin:

1. Searches for @imports in <style> blocks using regular expressions.
   • Although find-replace with regular expressions simplifies the implementation, it may cause issues if, for example, there are commented-out @imports. In the future, it may make sense to use a library like csstree to parse CSS and extract the imports.
2. Fetches note/file imports and removes their @import statements from their parent style blocks.
3. Inserts the imported content using a new <style> element.

Known issues

1. @imports in multi-line comments are still imported.
2. Using CSS supports/layer import options is unsupported.
3. Does not support the Rich Text Editor.
4. On mobile, does not allow importing CSS from files (only from other notes).
5. Import failure errors may be logged to Joplin's console as a result of the original @import statements (before replacement).