diff --git a/package.json b/package.json
index d445db25121f462eefc8d3c602094bfbec079ab7..245cc799ca9bde425321ad54086ee21ae042822e 100644
--- a/package.json
+++ b/package.json
@@ -1,28 +1,28 @@
{
- "name": "leximpact-socio-fiscal-ui",
- "version": "0.0.1",
- "scripts": {
- "dev": "svelte-kit dev",
- "build": "svelte-kit build",
- "start": "svelte-kit start"
- },
- "devDependencies": {
- "@sveltejs/adapter-node": "next",
- "@sveltejs/kit": "next",
- "@tailwindcss/jit": "^0.1.1",
- "autoprefixer": "^10.2.5",
- "cssnano": "^4.1.10",
- "postcss": "^8.2.7",
- "postcss-load-config": "^3.0.1",
- "svelte": "^3.29.0",
- "svelte-preprocess": "^4.6.9",
- "tailwindcss": "^2.0.3",
- "tslib": "^2.0.0",
- "typescript": "^4.0.0",
- "vite": "^2.1.0"
- },
- "type": "module",
- "engines": {
- "node": ">= 12.17.0"
- }
+ "name": "leximpact-socio-fiscal-ui",
+ "version": "0.0.1",
+ "scripts": {
+ "dev": "svelte-kit dev",
+ "build": "svelte-kit build",
+ "start": "svelte-kit start"
+ },
+ "devDependencies": {
+ "@sveltejs/adapter-node": "next",
+ "@sveltejs/kit": "next",
+ "@tailwindcss/jit": "^0.1.1",
+ "autoprefixer": "^10.2.5",
+ "cssnano": "^4.1.10",
+ "postcss": "^8.2.7",
+ "postcss-load-config": "^3.0.1",
+ "svelte": "^3.29.0",
+ "svelte-preprocess": "^4.6.9",
+ "tailwindcss": "^2.0.3",
+ "tslib": "^2.0.0",
+ "typescript": "^4.0.0",
+ "vite": "^2.1.0"
+ },
+ "type": "module",
+ "engines": {
+ "node": ">= 12.17.0"
+ }
}
diff --git a/postcss.config.cjs b/postcss.config.cjs
index b6bee6b4c58ed1d1907087b8f73399e04716f089..e2a74a13f1d7c92eac515a3bcbe680fa993532eb 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -6,17 +6,18 @@ const mode = process.env.NODE_ENV;
const dev = mode === "development";
module.exports = {
- plugins: [
- // Some plugins, like postcss-nested, need to run before Tailwind
-
- tailwindcss,
-
- // But others, like autoprefixer, need to run after
+ plugins: [
+ // Some plugins, like postcss-nested, need to run before Tailwind
- autoprefixer,
-
- !dev && cssnano({
- preset: "default",
- }),
- ],
+ tailwindcss,
+
+ // But others, like autoprefixer, need to run after
+
+ autoprefixer,
+
+ !dev &&
+ cssnano({
+ preset: "default",
+ }),
+ ],
};
diff --git a/src/app.html b/src/app.html
index 245305c4ef5b458f9fe880be5579f9c723d15057..817b8083956ce57312b75601fd13ccea646909f2 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="utf-8" />
- <link rel="icon" href="/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- %svelte.head%
- </head>
- <body>
- <div id="svelte">%svelte.body%</div>
- </body>
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ %svelte.head%
+ </head>
+ <body>
+ <div id="svelte">%svelte.body%</div>
+ </body>
</html>
diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte
index 71cf64638e86884416c6be8406a253605ea61e3f..5082006d8bf2916914310fd8c2c483f0cbf6da00 100644
--- a/src/lib/Counter.svelte
+++ b/src/lib/Counter.svelte
@@ -1,36 +1,34 @@
<script lang="ts">
- let count: number = 0;
+ let count: number = 0;
- const increment = () => {
- count += 1;
- };
+ const increment = () => {
+ count += 1;
+ };
</script>
-<button on:click={increment}>
- Clicks: {count}
-</button>
-
-<style style lang="postcss">
- button {
- font-family: inherit;
- font-size: inherit;
- /* Tailwind's creator recommends against @apply.
+<style lang="postcss">
+ button {
+ font-family: inherit;
+ font-size: inherit;
+ /* Tailwind's creator recommends against @apply.
This is all just proof that it works in your Svelte style blocks. */
- @apply py-4 px-8;
- @apply text-red-500;
- @apply bg-red-500 bg-opacity-10;
- @apply rounded-full;
- @apply border-2 border-transparent;
- @apply outline-none;
- @apply w-48;
- font-variant-numeric: tabular-nums;
- }
+ @apply py-4 px-8;
+ @apply text-red-500;
+ @apply bg-red-500 bg-opacity-10;
+ @apply rounded-full;
+ @apply border-2 border-transparent;
+ @apply outline-none;
+ @apply w-48;
+ font-variant-numeric: tabular-nums;
+ }
+
+ button:focus {
+ @apply border-opacity-100;
+ }
- button:focus {
- @apply border-opacity-100;
- }
+ button:active {
+ @apply bg-red-500 bg-opacity-20;
+ }
+</style>
- button:active {
- @apply bg-red-500 bg-opacity-20;
- }
-</style>
\ No newline at end of file
+<button on:click={increment}> Clicks: {count} </button>
diff --git a/src/routes/$layout.svelte b/src/routes/$layout.svelte
index 55f91c2540a121f56a8a40cd969bc468579f3983..32b60afb83f7c10ebf2fa41c3f628656b2246867 100644
--- a/src/routes/$layout.svelte
+++ b/src/routes/$layout.svelte
@@ -1,5 +1,5 @@
<script>
- import "../global.css";
+ import "../global.css";
</script>
<slot />
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 33dddc2b5245a2f2bc2988d8b45d59782b80a35a..d23ba33ce7ece95d12cd31196db459a670d5de45 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,50 +1,54 @@
<script lang="ts">
- import Counter from '$lib/Counter.svelte';
+ import Counter from "$lib/Counter.svelte";
</script>
+<style lang="postcss">
+ :root {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+ Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ }
+
+ main {
+ @apply text-center;
+ @apply p-4;
+ @apply mx-auto;
+ }
+
+ h1 {
+ @apply text-red-600;
+ @apply uppercase;
+ @apply text-6xl;
+ @apply font-thin;
+ @apply leading-tight;
+ @apply my-16 mx-auto;
+ @apply max-w-xs;
+ }
+
+ p {
+ @apply max-w-xs;
+ @apply my-8 mx-auto;
+ @apply leading-snug;
+ }
+
+ @screen sm {
+ h1 {
+ @apply max-w-none;
+ }
+
+ p {
+ @apply max-w-none;
+ }
+ }
+</style>
+
<main>
- <h1>Hello world!</h1>
+ <h1>Hello world!</h1>
- <Counter />
+ <Counter />
- <p>Visit <a class="text-blue-600 underline" href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
+ <p>
+ Visit
+ <a class="text-blue-600 underline" href="https://svelte.dev">svelte.dev</a>
+ to learn how to build Svelte apps.
+ </p>
</main>
-
-<style style lang="postcss">
- :root {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
- 'Open Sans', 'Helvetica Neue', sans-serif;
- }
-
- main {
- @apply text-center;
- @apply p-4;
- @apply mx-auto;
- }
-
- h1 {
- @apply text-red-600;
- @apply uppercase;
- @apply text-6xl;
- @apply font-thin;
- @apply leading-tight;
- @apply my-16 mx-auto;
- @apply max-w-xs;
- }
-
- p {
- @apply max-w-xs;
- @apply my-8 mx-auto;
- @apply leading-snug;
- }
-
- @screen sm {
- h1 {
- @apply max-w-none;
- }
-
- p {
- @apply max-w-none;
- }
- }
-</style>
diff --git a/svelte.config.cjs b/svelte.config.cjs
index 7d4307173dc72b22df12089a35cb0f5171d709f9..9d1e1d9d5d3b1a94f4b5ecdff17b3a0110f71772 100644
--- a/svelte.config.cjs
+++ b/svelte.config.cjs
@@ -1,32 +1,32 @@
-const sveltePreprocess = require('svelte-preprocess');
-const node = require('@sveltejs/adapter-node');
-const pkg = require('./package.json');
+const sveltePreprocess = require("svelte-preprocess");
+const node = require("@sveltejs/adapter-node");
+const pkg = require("./package.json");
/** @type {import('@sveltejs/kit').Config} */
module.exports = {
- // Consult https://github.com/sveltejs/svelte-preprocess
- // for more information about preprocessors
- preprocess: [
- sveltePreprocess({
- defaults: {
- style: "postcss",
- },
- postcss: true
- }),
- ],
- kit: {
- // By default, `npm run build` will create a standard Node app.
- // You can create optimized builds for different platforms by
- // specifying a different adapter
- adapter: node(),
+ // Consult https://github.com/sveltejs/svelte-preprocess
+ // for more information about preprocessors
+ preprocess: [
+ sveltePreprocess({
+ defaults: {
+ style: "postcss",
+ },
+ postcss: true,
+ }),
+ ],
+ kit: {
+ // By default, `npm run build` will create a standard Node app.
+ // You can create optimized builds for different platforms by
+ // specifying a different adapter
+ adapter: node(),
- // hydrate the <div id="svelte"> element in src/app.html
- target: '#svelte',
+ // hydrate the <div id="svelte"> element in src/app.html
+ target: "#svelte",
- vite: {
- ssr: {
- noExternal: Object.keys(pkg.dependencies || {})
- }
- }
- }
+ vite: {
+ ssr: {
+ noExternal: Object.keys(pkg.dependencies || {}),
+ },
+ },
+ },
};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7929648e5d209c39ee40651ae316fe997ec45cbf..da82a441f518918c4fac6020f04c92f96facc99f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,25 +1,25 @@
const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
module.exports = {
- purge: {
- content: [
- "./src/**/*.{html,js,svelte,ts}",
- ],
- options: {
- defaultExtractor: (content) => [
- // If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
- ...tailwindExtractor(content),
- // Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
- ...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
- ],
- keyframes: true,
- },
- },
- theme: {
- extend: {},
- },
- variants: {
- extend: {},
- },
- plugins: [],
+ purge: {
+ content: ["./src/**/*.{html,js,svelte,ts}"],
+ options: {
+ defaultExtractor: (content) => [
+ // If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
+ ...tailwindExtractor(content),
+ // Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
+ ...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
+ ([_match, group, ..._rest]) => group
+ ),
+ ],
+ keyframes: true,
+ },
+ },
+ theme: {
+ extend: {},
+ },
+ variants: {
+ extend: {},
+ },
+ plugins: [],
};
diff --git a/tsconfig.json b/tsconfig.json
index 7d2e2894a314630b03c1595cbd4bc2b0373e2e08..3b27273ec97f66e198db0a337d3277ee49faea6c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,28 +1,28 @@
{
- "compilerOptions": {
- "moduleResolution": "node",
- "target": "es2018",
- /**
+ "compilerOptions": {
+ "moduleResolution": "node",
+ "target": "es2018",
+ /**
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
to enforce using \`import type\` instead of \`import\` for Types.
*/
- "importsNotUsedAsValues": "error",
- "isolatedModules": true,
- /**
+ "importsNotUsedAsValues": "error",
+ "isolatedModules": true,
+ /**
To have warnings/errors of the Svelte compiler at the correct position,
enable source maps by default.
*/
- "sourceMap": true,
- "esModuleInterop": true,
- "skipLibCheck": true,
- "forceConsistentCasingInFileNames": true,
- "baseUrl": ".",
- "allowJs": true,
- "checkJs": true,
- "paths": {
- "$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
- "$lib/*": ["src/lib/*"]
- }
- },
- "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "baseUrl": ".",
+ "allowJs": true,
+ "checkJs": true,
+ "paths": {
+ "$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
+ "$lib/*": ["src/lib/*"]
+ }
+ },
+ "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}