24 | Hello {name}!
25 | Visit the Svelte tutorial to learn how to build Svelte apps.
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/dev/public/global.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | color: #333;
9 | margin: 0;
10 | padding: 8px;
11 | box-sizing: border-box;
12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 |
15 | a {
16 | color: rgb(0,100,200);
17 | text-decoration: none;
18 | }
19 |
20 | a:hover {
21 | text-decoration: underline;
22 | }
23 |
24 | a:visited {
25 | color: rgb(0,80,160);
26 | }
27 |
28 | label {
29 | display: block;
30 | }
31 |
32 | input, button, select, textarea {
33 | font-family: inherit;
34 | font-size: inherit;
35 | -webkit-padding: 0.4em 0;
36 | padding: 0.4em;
37 | margin: 0 0 0.5em 0;
38 | box-sizing: border-box;
39 | border: 1px solid #ccc;
40 | border-radius: 2px;
41 | }
42 |
43 | input:disabled {
44 | color: #ccc;
45 | }
46 |
47 | button {
48 | color: #333;
49 | background-color: #f4f4f4;
50 | outline: none;
51 | }
52 |
53 | button:disabled {
54 | color: #999;
55 | }
56 |
57 | button:not(:disabled):active {
58 | background-color: #ddd;
59 | }
60 |
61 | button:focus {
62 | border-color: #666;
63 | }
64 |
--------------------------------------------------------------------------------
/dev/rollup.config.js:
--------------------------------------------------------------------------------
1 | import svelte from 'rollup-plugin-svelte';
2 | import commonjs from '@rollup/plugin-commonjs';
3 | import resolve from '@rollup/plugin-node-resolve';
4 | import livereload from 'rollup-plugin-livereload';
5 | import { terser } from 'rollup-plugin-terser';
6 | import css from 'rollup-plugin-css-only';
7 | import reactiveCSSPreprocess from 'svelte-reactive-css-preprocess';
8 |
9 | const production = !process.env.ROLLUP_WATCH;
10 |
11 | function serve() {
12 | let server;
13 |
14 | function toExit() {
15 | if (server) server.kill(0);
16 | }
17 |
18 | return {
19 | writeBundle() {
20 | if (server) return;
21 | server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
22 | stdio: ['ignore', 'inherit', 'inherit'],
23 | shell: true
24 | });
25 |
26 | process.on('SIGTERM', toExit);
27 | process.on('exit', toExit);
28 | }
29 | };
30 | }
31 |
32 | export default {
33 | input: 'src/main.js',
34 | output: {
35 | sourcemap: true,
36 | format: 'iife',
37 | name: 'app',
38 | file: 'public/build/bundle.js'
39 | },
40 | plugins: [
41 | svelte({
42 | compilerOptions: {
43 | // enable run-time checks when not in production
44 | dev: !production
45 | },
46 | preprocess: [
47 | reactiveCSSPreprocess()
48 | ]
49 | }),
50 | // we'll extract any component CSS out into
51 | // a separate file - better for performance
52 | css({ output: 'bundle.css' }),
53 |
54 | // If you have external dependencies installed from
55 | // npm, you'll most likely need these plugins. In
56 | // some cases you'll need additional configuration -
57 | // consult the documentation for details:
58 | // https://github.com/rollup/plugins/tree/master/packages/commonjs
59 | resolve({
60 | browser: true,
61 | dedupe: ['svelte']
62 | }),
63 | commonjs(),
64 |
65 | // In dev mode, call `npm run start` once
66 | // the bundle has been generated
67 | !production && serve(),
68 |
69 | // Watch the `public` directory and refresh the
70 | // browser on changes when not in production
71 | !production && livereload('public'),
72 |
73 | // If we're building for production (npm run build
74 | // instead of npm run dev), minify
75 | production && terser()
76 | ],
77 | watch: {
78 | clearScreen: false
79 | }
80 | };
81 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | svelte-reactive-css-preprocess
2 | ==============================
3 |
4 | [](https://www.npmjs.com/package/svelte-reactive-css-preprocess)
5 |
6 | Have you ever wished you could use your svelte variables in your component's styles. Now you can!
7 |
8 | ### Installation
9 |
10 | `npm install --save-dev svelte-reactive-css-preprocess`
11 |
12 | ### Usage
13 |
14 | In your svelte config
15 |
16 | ```javascript
17 | import reactiveCSSPreprocessor from 'svelte-reactive-css-preprocess';
18 |
19 | svelte({
20 | preprocess: [
21 | reactiveCSSPreprocessor()
22 | ]
23 | })
24 | ```
25 |
26 | If you're using [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) you need to run `svelte-reactive-css-preprocess` after all tasks for `svelte-preproccess complete. To do that use ['svelte-sequential-preprocessor'](https://github.com/pchynoweth/svelte-sequential-preprocessor).
27 |
28 | `npm install --save-dev svelte-sequential-preprocessor.`
29 |
30 | ```javascript
31 | import reactiveCSSPreprocessor from 'svelte-reactive-css-preprocess';
32 | import sveltePreprocess from 'svelte-preprocess';
33 | import seqPreprocess from 'svelte-sequential-preprocessor';
34 |
35 | svelte({
36 | preprocess: seqPreprocess([
37 | sveltePreprocess({
38 | defaults: {
39 | style: "postcss",
40 | },
41 | postcss: true
42 | }),
43 | reactiveCSSPreprocess()
44 | ])
45 | })
46 | ```
47 |
48 | Now in your component's style you can reference the reactive variables using css variable syntax.
49 |
50 | ```html
51 |
58 |
59 |