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:

• 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.
• Fetches note/file imports and removes their @import statements from their parent style blocks.
• Inserts the imported content using a new <style> element.

Known issues

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