https://github.com/pauliorandall/p69-svelte
Injects compile time tokens into Svelte components CSS styles
https://github.com/pauliorandall/p69-svelte
css made-to-be-plundered nodejs svelte
Last synced: about 2 months ago
JSON representation
Injects compile time tokens into Svelte components CSS styles
- Host: GitHub
- URL: https://github.com/pauliorandall/p69-svelte
- Owner: PaulioRandall
- License: mit
- Created: 2024-12-29T00:36:14.000Z (5 months ago)
- Default Branch: trunk
- Last Pushed: 2025-01-07T18:15:28.000Z (5 months ago)
- Last Synced: 2025-03-23T20:03:18.075Z (2 months ago)
- Topics: css, made-to-be-plundered, nodejs, svelte
- Language: JavaScript
- Homepage:
- Size: 129 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/PaulioRandall/p69-svelte/releases)
[](https://github.com/PaulioRandall/p69-svelte/releases)
# P69 Svelte
Svelte preprocessor for **P69** (includes **P69 Files**).
- **P69**: https://github.com/PaulioRandall/p69
- **P69 Files**: https://github.com/PaulioRandall/p69-files
- **P69 Svelte**: https://github.com/PaulioRandall/p69-svelte
- **P69 Util**: https://github.com/PaulioRandall/p69-util
## Contents
- [Example](#example)
- [Options](#options)
## Example
**svelte.config.js**
```js
import P69 from 'p69'
import tokens from './src/tokens.js'
// [Optional]
// Compile .p69 files into a .css file.
// ./src/**/*.p69 => ./src/app.css
if (process.env.NODE_ENV === 'development') {
P69.watch(tokens)
} else {
await P69.file(tokens)
}
export default {
...,
preprocess: [P69.svelte(tokens)],
...,
}
```
**src/tokens.js**
```js
export default {
color: {
bg: `rgb(40, 40, 40)`,
text: `rgb(250, 250, 250)`,
strong: `rgb(30, 85, 175)`,
},
font: {
size: {
sm: '0.8rem',
md: '1rem',
lg: '1.2rem',
xl: '1.5rem',
},
family: {
verdana: ['Verdana', 'sans-serif', 'Helvetica'],
helvetica: ['Helvetica', 'Verdana', 'sans-serif'],
},
},
space: {
sm: '1rem',
md: '2rem',
lg: '4rem',
xl: '8rem',
},
media: {
small_screen: 'max-width: 719px',
not_small_screen: 'min-width: 720px',
},
}
```
**src/routes/+page.svelte**
```html
A title
A heading
A paragraph...
main {
color: $color.text;
font-size: $font.size.md;
font-family: $font.family.verdana;
padding: $space.sm;
background-color: $color.bg;
}
h1 {
color: $color.strong;
font-size: $font.size.xl;
}
section {
padding-bottom: $space.md;
}
@media ($media.not_small_screen) {
section {
padding-bottom: $space.lg;
}
}
```
**src/routes/+page.svelte** (after compiling)
```html
A title
A heading
A paragraph...
main {
color: rgb(250, 250, 250);
font-size: 1rem;
font-family: Verdana, sans-serif, Helvetica;
padding: 1rem;
background-color: rgb(40, 40, 40);
}
h1 {
color: rgb(30, 85, 175);
font-size: 1.5rem;
}
section {
padding-bottom: 2rem;
}
@media ($media.not_small_screen) {
section {
padding-bottom: 4rem;
}
}
```
[^Back to contents](#contents)
## Options
```js
P69.svelte(tokens, {
// onError is called when an error occurs.
//
// If the error isn't thrown then processing will
// continue for the remaining tokens.
onError: (err, token) => {
// By default, logs the error and carries on.
},
// If a style tag's lang attibute value is in
// this list then it will be compiled as P69.
//
// 'undefined' means no lang attribute set.
langs: [undefined, 'p69', 'text/p69'],
})
```
[^Back to contents](#contents)