Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gnat/stylus-inline
Zero build step version of Stylus CSS that runs in your browser. With inlined scopes! Written in vanilla JS. Also single file python version!
https://github.com/gnat/stylus-inline
compiler css indentation-parsing inline-css inline-styles offside-rule stylus stylus-css transpiler whitespace whitespace-language
Last synced: 3 months ago
JSON representation
Zero build step version of Stylus CSS that runs in your browser. With inlined scopes! Written in vanilla JS. Also single file python version!
- Host: GitHub
- URL: https://github.com/gnat/stylus-inline
- Owner: gnat
- License: mit
- Created: 2023-09-09T05:37:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-11T10:32:11.000Z (5 months ago)
- Last Synced: 2024-09-11T15:11:46.596Z (5 months ago)
- Topics: compiler, css, indentation-parsing, inline-css, inline-styles, offside-rule, stylus, stylus-css, transpiler, whitespace, whitespace-language
- Language: HTML
- Homepage:
- Size: 73.2 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🪄 Stylus CSS Inline (SugarSS Inline)
Experiment based on [css-scope-inline](https://github.com/gnat/css-scope-inline). Made to work like [Stylus](https://github.com/stylus/stylus) CSS originally concieved by [
TJ Holowaychuk](https://github.com/tj) of Express.js (or like [sugarss](https://github.com/postcss/sugarss))
With new [CSS Nesting](https://developer.chrome.com/articles/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 ``!
* Syntax highlighting in Sublime works!
* Including external `.styl`
* Implementation pitfalls:
* Browser removes invalid CSS from `` and `@import()` making those paths invalid for processing.
* We use the workaround below...
**main.styl**
```html
document.currentScript.outerHTML = `
html
background: green
`
```
**index.html**
```html
```
**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.
```html
document.currentScript.outerHTML = `
html
background: green
`; 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.**
