🪄 Stylus CSS Inline (SugarSS Inline)

Experiment based on css-scope-inline. Made to work like Stylus CSS originally concieved by TJ Holowaychuk of Express.js (or like sugarss)

With new CSS Nesting, hsl() syntax differences and true CSS variables: classic Stylus is beginning to diverge too greatly with vanilla CSS. It's time to leave! -- This project may be an option for you.

🐍 Python Version (stylus.py)

• Most reliable version since it generates main.styl for you to load normally.
• This version is a bit more complete and robust than the Javascript one.

☕ Javascript Version (stylus.html)

• Runs in the browser automatically!
• Works inside inline scoped <styl>!
• Syntax highlighting in Sublime works!
• Including external .styl
  • Implementation pitfalls:
    • Browser removes invalid CSS from <link> and @import() making those paths invalid for processing.
    • We use the workaround below...

main.styl

document.currentScript.outerHTML = `
<styl>
html
	background: green
</styl>`

index.html

<script src="main.styl"></script>

BONUS: Ability to include .styl within .styl

• 🟠 Warning: May cause undesirable loading times as parent .styl must load first!
  • You're probably best off avoiding .styl within other .styl for loading performance.

document.currentScript.outerHTML = `
<styl>
html
	background: green
</styl>
<styl src="component.styl"></styl>
`; document.querySelectorAll('styl[src]').forEach(s => { let ns = document.createElement('script'); ns.src = s.getAttribute('src'); s.replaceWith(ns) })

👀 Before you adopt.

I realise Stylus is amazing but.. you lose the ability to inline styles in a single line (tailwind-like). Sure, you save { and } but you gain verbosity elsewhere (unless of course you always add a new line for each style anyway!) May not be worthwhile to use this code depending on what patterns you currently enjoy using.

A good highlighter can help a lot.