chore: add preprocess to allow replacement of breakpoint tokens with …

…custom media values
GovAlta · Oct 5, 2023 · 82a52c6 · 82a52c6
1 parent 29ff97b
commit 82a52c6
Show file tree

Hide file tree

Showing 46 changed files with 1,456 additions and 664 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
   "singleQuote": false,
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-svelte"]
 }
diff --git a/apps/react-demo/src/app/app.tsx b/apps/react-demo/src/app/app.tsx
@@ -1,6 +1,7 @@
 import {
   GoAAppFooter,
   GoAAppHeader,
+  GoAAppHeaderMenu,
   GoAMicrositeHeader,
   GoASideMenu,
   GoASideMenuGroup,
@@ -14,7 +15,15 @@ export default function App() {
       header={
         <>
           <GoAMicrositeHeader type="alpha" version="UAT"></GoAMicrositeHeader>
-          <GoAAppHeader url="#" heading="Design Systems"></GoAAppHeader>
+          <GoAAppHeader url="#" heading="Design Systems">
+            <a href="#">Support</a>
+            <GoAAppHeaderMenu heading="Tickets" leadingIcon="ticket">
+              <a href="#">Cases</a>
+              <a href="#">Payments</a>
+              <a href="#">Outstanding</a>
+            </GoAAppHeaderMenu>
+            <a href="#" className="interactive">Sign in</a>
+          </GoAAppHeader>
         </>
       }
       footer={<GoAAppFooter />}

diff --git a/apps/react-demo/src/routes/appHeader.tsx b/apps/react-demo/src/routes/appHeader.tsx
@@ -21,17 +21,6 @@ export default function AppHeader() {
         heading="Ticket and Fine Payments"
       >
         <a href="app-header#aboutus">About Us</a>
-        <GoAAppHeaderMenu heading="Learn More">
-          <a href="app-header#seniors">Seniors</a>
-          <a href="app-header#family">Family</a>
-          <a href="app-header#children">
-            Children with a really realllllllllllllllllly long text
-          </a>
-        </GoAAppHeaderMenu>
-        <GoAAppHeaderMenu heading="Mary Smith" leadingIcon="person-circle">
-          <a href="app-header#settings">Settings</a>
-          <a href="app-header#prefs">Preferences</a>
-        </GoAAppHeaderMenu>
         <a title="loginUrl" href="app-header#login" className="interactive">
           Login
         </a>

diff --git a/libs/web-components/package-lock.json b/libs/web-components/package-lock.json
diff --git a/libs/web-components/package.json b/libs/web-components/package.json
@@ -29,6 +29,7 @@
     "directory": "libs/web-components"
   },
   "devDependencies": {
+    "@csstools/postcss-global-data": "^2.1.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-typescript": "^8.0.0",

diff --git a/libs/web-components/playground/public/index.html b/libs/web-components/playground/public/index.html
@@ -1,22 +1,25 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width,initial-scale=1'>
+    <title>DIO Components</title>
 
-  <title>DIO Components</title>
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="stylesheet" href="/build/bundle.css" />
 
-  <link rel='icon' type='image/png' href='/favicon.png'>
-  <link rel='stylesheet' href='/build/bundle.css'>
+    <script
+      type="module"
+      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
+    ></script>
 
-  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+    <script defer src="/build/bundle.js"></script>
+  </head>
 
-  <script defer src='/build/bundle.js'></script>
-</head>
-
-<body>
-</body>
-
-</html>
+  <body></body>
+</html>
diff --git a/libs/web-components/playground/src/pg-app-header.svelte b/libs/web-components/playground/src/pg-app-header.svelte
@@ -1,5 +1,6 @@
 <svelte:options tag="pg-app-header" />
 
+<goa-microsite-header type="alpha"></goa-microsite-header>
 <goa-app-header heading="Child services" url="foo.com" maxcontentwidth="1024px">
   <a href="#learnmore">Learn more</a>
   <a href="#aboutus">About Us</a>

diff --git a/libs/web-components/playground/src/pg-dropdown.svelte b/libs/web-components/playground/src/pg-dropdown.svelte
@@ -42,10 +42,6 @@
     <goa-dropdown-item value="ping" label="Pink"></goa-dropdown-item>
   </goa-dropdown>
 
-<div style="height: 200vh">
-
-</div>
-
 <button on:click={() => open = !open}>
   Show
 </button>
diff --git a/libs/web-components/playground/src/pg-form-stepper.svelte b/libs/web-components/playground/src/pg-form-stepper.svelte
@@ -24,14 +24,12 @@
 </script>
 
 <div class="scroll">
-  <div class="inner">
-  <goa-form-stepper ml="s" mr="s" {step}>
+  <goa-form-stepper {step}>
     <goa-form-step text="Personal Info" status={state[0]} />
     <goa-form-step text="Payment Details" status={state[1]} />
     <goa-form-step text="Other" status={state[2]} />
     <goa-form-step text="Other 2" />
   </goa-form-stepper>
-  </div>
 </div>
 <goa-pages current={step}>
   <section>
@@ -57,14 +55,4 @@
     overflow-x: auto;
     padding: 1rem;
   }
-
-  .scroll .inner {
-    width: 1600px;
-  }
-
-  @media (max-width: 640px) {
-    .scroll .inner {
-      width: unset; 
-    }
-  }
 </style>
diff --git a/libs/web-components/playground/src/pg-modal.svelte b/libs/web-components/playground/src/pg-modal.svelte
@@ -1,29 +1,57 @@
 <svelte:options tag="pg-modal" />
 
 <script lang="ts">
-
   let open: boolean = false;
-  let value: string = "blue"
+  let value: string = "blue";
 </script>
 
-
-<goa-modal {open} closable="true" on:_close={() => open = false}>
-  <goa-dropdown on:_change={() => {}} value={value} disabled={false}>
-    <goa-dropdown-item value="" label="Red"></goa-dropdown-item>
-    <goa-dropdown-item value="green" label="Green"></goa-dropdown-item>
-    <goa-dropdown-item value="blue" label="Blue"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
-    <goa-dropdown-item value="white" label="White"></goa-dropdown-item>
+<goa-modal {open} closable="true" on:_close={() => (open = false)}>
+  <goa-dropdown on:_change={() => {}} {value} disabled={false}>
+    <goa-dropdown-item value="" label="Red" />
+    <goa-dropdown-item value="green" label="Green" />
+    <goa-dropdown-item value="blue" label="Blue" />
+    <goa-dropdown-item value="white" label="White" />
+    <goa-dropdown-item value="white" label="White" />
+    <goa-dropdown-item value="white" label="White" />
+    <goa-dropdown-item value="white" label="White" />
+    <goa-dropdown-item value="white" label="White" />
+    <goa-dropdown-item value="white" label="White" />
+    <goa-dropdown-item value="white" label="White" />
+    <goa-dropdown-item value="white" label="White" />
+    <goa-dropdown-item value="white" label="White" />
   </goa-dropdown>
 </goa-modal>
 
-<button on:click={() => open = !open}>
-  Show
-</button>
+<button on:click={() => (open = !open)}> Show </button>
+
+<div class="card">This is a card</div>
+
+<style>
+  .card {
+    display: grid;
+    transition: all 0.5s;
+    user-select: none;
+  }
+
+  @media (--mobile) {
+    .card {
+      background-color: green;
+    }
+  }
+  @media (--tablet) {
+    .card {
+      background-color: steelblue;
+    }
+  }
+  @media (--desktop) {
+    .card {
+      background-color: paleturquoise;
+    }
+  }
+
+  @media (--desktop) or (--tablet) {
+    .card {
+      background-color: red;
+    }
+  }
+</style>
diff --git a/libs/web-components/rollup.config.js b/libs/web-components/rollup.config.js
@@ -5,8 +5,11 @@ import summary from "rollup-plugin-summary";
 import preprocess from "svelte-preprocess";
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
-import css from 'rollup-plugin-css-only';
-import {replaceCodePlugin} from 'vite-plugin-replace';
+import css from "rollup-plugin-css-only";
+import { replaceCodePlugin } from "vite-plugin-replace";
+import postcssGlobalData from "@csstools/postcss-global-data";
+import autoprefixer from "autoprefixer";
+import postcssCustomMedia from "postcss-custom-media";
 
 export default {
   input: "src/index.ts",
@@ -20,28 +23,39 @@ export default {
     svelte({
       include: /\.svelte$/,
       exclude: /^(\.test)\.svelte$/,
-      preprocess: preprocess({ sourceMap: true }),
+      preprocess: preprocess({
+        sourceMap: true,
+        postcss: {
+          plugins: [
+            postcssGlobalData({
+              files: ["./src/assets/css/breakpoints.css"],
+            }),
+            autoprefixer(),
+            postcssCustomMedia(),
+          ],
+        },
+      }),
       settings: {
-        'svelte3/compiler-options': {
+        "svelte3/compiler-options": {
           generate: false,
-          customElement: true
+          customElement: true,
         },
       },
       compilerOptions: {
         customElement: true,
       },
     }),
-		css({output: 'index.css' }),
+    css({ output: "index.css" }),
     resolve(),
-    // terser(),
+    terser(),
     summary(),
     replaceCodePlugin({
       replacements: [
-          {
-              from: /:global\(([\[\]\(\)\-\.\:\*\w]+)\)/g,
-              to: "$1",
-          }
-      ]
+        {
+          from: /:global\(([\[\]\(\)\-\.\:\*\w]+)\)/g,
+          to: "$1",
+        },
+      ],
     }),
   ],
   watch: {

diff --git a/libs/web-components/rollup.playground.config.js b/libs/web-components/rollup.playground.config.js
@@ -5,6 +5,9 @@ import livereload from "rollup-plugin-livereload";
 import css from "rollup-plugin-css-only";
 import preprocess from "svelte-preprocess";
 import typescript from "@rollup/plugin-typescript";
+import postcssGlobalData from "@csstools/postcss-global-data";
+import autoprefixer from "autoprefixer";
+import postcssCustomMedia from "postcss-custom-media";
 
 function serve() {
   let server;
@@ -16,10 +19,14 @@ function serve() {
   return {
     writeBundle() {
       if (server) return;
-      server = require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
-        stdio: ["ignore", "inherit", "inherit"],
-        shell: true,
-      });
+      server = require("child_process").spawn(
+        "npm",
+        ["run", "start", "--", "--dev"],
+        {
+          stdio: ["ignore", "inherit", "inherit"],
+          shell: true,
+        },
+      );
 
       process.on("SIGTERM", toExit);
       process.on("exit", toExit);
@@ -37,11 +44,22 @@ export default {
   },
   plugins: [
     commonjs(),
-    typescript({ sourceMap: true}),
+    typescript({ sourceMap: true }),
     svelte({
       include: /\.svelte$/,
       exclude: /(App)\.svelte/,
-      preprocess: preprocess({ sourceMap: true }),
+      preprocess: preprocess({
+        sourceMap: true,
+        postcss: {
+          plugins: [
+            postcssGlobalData({
+              files: ["./src/assets/css/breakpoints.css"],
+            }),
+            autoprefixer(),
+            postcssCustomMedia(),
+          ],
+        },
+      }),
       compilerOptions: {
         dev: true,
         customElement: true,
@@ -62,7 +80,7 @@ export default {
     // https://github.com/rollup/plugins/tree/master/packages/commonjs
     resolve({
       browser: true,
-      dedupe: ["svelte"],
+      // dedupe: ["svelte"],
     }),
 
     serve(),
@@ -72,4 +90,3 @@ export default {
     clearScreen: false,
   },
 };
-
diff --git a/libs/web-components/src/assets/css/breakpoints.css b/libs/web-components/src/assets/css/breakpoints.css
@@ -0,0 +1,3 @@
+@custom-media --mobile screen and (max-width: 623px);
+@custom-media --tablet screen and (min-width: 624px) and (max-width: 1023px);
+@custom-media --desktop screen and (min-width: 1024px);
diff --git a/libs/web-components/src/common/breakpoints.ts b/libs/web-components/src/common/breakpoints.ts
@@ -0,0 +1,2 @@
+export const MOBILE_BP = 624;
+export const TABLET_BP = 1024;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const MOBILE_BP = 624;
		export const TABLET_BP = 1024;