Skip to content

Commit f235e96

Browse files
markmurmarkmur
authored
[Web] Minify CSS (#400)
* Minify CSS * Move styles to css file (#402) * Move styles to css file * Update snapshot * Drop oprhaned css util helper
1 parent ce29f88 commit f235e96

7 files changed

Lines changed: 140 additions & 146 deletions

File tree

‎platforms/web/package.snapshot.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
[
22
"dist/checkout-web-component.d.ts",
33
"dist/checkout.d.ts",
4-
"dist/checkout.styles.d.ts",
54
"dist/checkout.types.d.ts",
5+
"dist/css-inline.d.ts",
66
"dist/custom-elements.json",
77
"dist/index.d.ts",
88
"dist/index.js",
@@ -13,9 +13,10 @@
1313
"package.json",
1414
"README.md",
1515
"src/checkout-web-component.ts",
16-
"src/checkout.styles.ts",
16+
"src/checkout.css",
1717
"src/checkout.ts",
1818
"src/checkout.types.ts",
19+
"src/css-inline.d.ts",
1920
"src/index.ts",
2021
"src/ucp-embed-types.ts",
2122
"src/utils.ts"

‎platforms/web/src/checkout.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
#shopify-element-wrapper,
6+
.Shopify-target {
7+
inline-size: 100%;
8+
block-size: 100%;
9+
border: none;
10+
}
11+
12+
:host {
13+
@media (prefers-reduced-motion: reduce) {
14+
--shopify-checkout-overlay-transition-duration: 1ms;
15+
}
16+
17+
/*
18+
* Reset any inheritable styles to ensure the text and links are visible by default no matter
19+
* what the embedding website's styles are. An embedder may override these values
20+
* using CSS parts.
21+
*/
22+
color: hsl(0, 0%, 10%);
23+
font-family: system-ui, sans-serif;
24+
font-size: initial;
25+
line-height: 1.5;
26+
letter-spacing: initial;
27+
font-weight: initial;
28+
font-style: initial;
29+
text-align: initial;
30+
word-spacing: initial;
31+
text-transform: initial;
32+
text-decoration: initial;
33+
text-indent: initial;
34+
/* checkout applies subpixel-antialiased */
35+
-webkit-font-smoothing: subpixel-antialiased;
36+
-moz-osx-font-smoothing: initial;
37+
text-rendering: initial;
38+
39+
a,
40+
a:hover,
41+
a:visited,
42+
a:focus,
43+
a:active {
44+
color: inherit;
45+
}
46+
}
47+
48+
.overlay {
49+
padding: 0;
50+
transition:
51+
display var(--shopify-checkout-dialog-transition-duration, 150ms) allow-discrete,
52+
overlay var(--shopify-checkout-dialog-transition-duration, 150ms) allow-discrete;
53+
}
54+
55+
.overlay-background {
56+
opacity: 0;
57+
position: fixed;
58+
place-items: center;
59+
inset: 0;
60+
background-color: hsla(0, 0%, 0%, 0.8);
61+
transition:
62+
opacity var(--shopify-checkout-overlay-transition-duration, 150ms) ease-out,
63+
backdrop-filter var(--shopify-checkout-overlay-transition-duration, 150ms) ease-out,
64+
display var(--shopify-checkout-overlay-transition-duration, 150ms) allow-discrete,
65+
overlay var(--shopify-checkout-overlay-transition-duration, 150ms) allow-discrete;
66+
color: hsl(0, 0%, 100%);
67+
font-size: 1.125em;
68+
text-align: center;
69+
overflow: auto;
70+
}
71+
72+
.overlay[open] .overlay-background {
73+
display: grid;
74+
opacity: 1;
75+
backdrop-filter: blur(6px);
76+
}
77+
78+
@starting-style {
79+
.overlay[open] .overlay-background {
80+
opacity: 0;
81+
}
82+
}
83+
84+
.overlay-content-wrapper {
85+
display: grid;
86+
grid-template-rows: 1fr 20%;
87+
place-items: center;
88+
inline-size: 100%;
89+
block-size: 100%;
90+
}
91+
92+
.overlay-content {
93+
padding: 0.75em;
94+
max-inline-size: 21em;
95+
}
96+
97+
.overlay-close-button {
98+
display: inline-flex;
99+
align-items: center;
100+
gap: 0.5em;
101+
background: transparent;
102+
border: none;
103+
padding: 0.625em;
104+
cursor: pointer;
105+
font-family: inherit;
106+
color: inherit;
107+
opacity: 0.8;
108+
text-decoration: underline;
109+
line-height: 0;
110+
111+
&:hover {
112+
opacity: 1;
113+
}
114+
115+
svg {
116+
inline-size: 1em;
117+
block-size: 1em;
118+
line-height: 0;
119+
fill: currentColor;
120+
}
121+
}

‎platforms/web/src/checkout.styles.ts‎

Lines changed: 0 additions & 125 deletions
This file was deleted.

‎platforms/web/src/checkout.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { createTemplate, html } from "./utils";
1+
import stylesText from "./checkout.css?inline";
2+
import { createTemplate, html, safe } from "./utils";
23
import type {
34
CheckoutAttributes,
45
CheckoutMethods,
@@ -14,7 +15,6 @@ import type {
1415
OrderConfirmation,
1516
UcpErrorResponse,
1617
} from "./checkout.types";
17-
import { STYLES } from "./checkout.styles";
1818

1919
export const DEFAULT_POPUP_WIDTH = 600;
2020
export const DEFAULT_POPUP_HEIGHT = 600;
@@ -25,7 +25,7 @@ const EMBED_DELEGATIONS: readonly string[] = ["window.open"];
2525
const SHADOW_TEMPLATE = createTemplate(html`
2626
<div id="shopify-element-wrapper">
2727
<style>
28-
${STYLES}
28+
${safe(stylesText)}
2929
</style>
3030
3131
<div class="Shopify-target">

‎platforms/web/src/css-inline.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.css?inline" {
2+
const content: string;
3+
export default content;
4+
}

‎platforms/web/src/utils.test.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { describe, expect, it } from "vitest";
22

3-
import { createTemplate, css, html, safe, type SafeMarkup } from "./utils";
3+
import { createTemplate, html, safe, type SafeMarkup } from "./utils";
44

55
describe("safe", () => {
66
it("returns the input unchanged at runtime", () => {
77
expect(safe("<b>hi</b>")).toBe("<b>hi</b>");
88
});
99
});
1010

11-
describe("html / css tagged templates", () => {
11+
describe("html tagged template", () => {
1212
it("concatenates static strings only", () => {
1313
expect(html`<p>hello</p>`).toBe("<p>hello</p>");
1414
});
@@ -29,10 +29,6 @@ describe("html / css tagged templates", () => {
2929
expect(html(emptyStrings)).toBe("");
3030
});
3131

32-
it("css is the same function as html", () => {
33-
expect(css).toBe(html);
34-
});
35-
3632
describe("unsafe interpolation", () => {
3733
it("rejects raw strings at the type level", () => {
3834
const raw = "<script>alert(1)</script>";

‎platforms/web/src/utils.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
/**
22
* Branded type marking a string as safe to interpolate into an `html`
3-
* or `css` tagged template. The brand can only be added via `safe()`,
4-
* `html\`\``, or `css\`\``, so any direct interpolation of a raw
5-
* `string` is a compile-time error.
3+
* tagged template. The brand can only be added via `safe()` or
4+
* `html\`\``, so any direct interpolation of a raw `string` is a
5+
* compile-time error.
66
*/
77
declare const SafeBrand: unique symbol;
88
export type SafeMarkup = string & { readonly [SafeBrand]: true };
99

1010
/**
11-
* Use this to drop a plain string into an `html` or `css` template.
12-
* Reach for it sparingly: anything that came from an attribute,
13-
* property, or message payload belongs outside the template, applied
14-
* through DOM APIs after render.
11+
* Use this to drop a plain string into an `html` template. Reach for
12+
* it sparingly: anything that came from an attribute, property, or
13+
* message payload belongs outside the template, applied through DOM
14+
* APIs after render.
1515
*/
1616
export const safe = (value: string): SafeMarkup => value as SafeMarkup;
1717

@@ -30,9 +30,6 @@ export const html = (strings: TemplateStringsArray, ...values: SafeMarkup[]): Sa
3030
return raw as SafeMarkup;
3131
};
3232

33-
/** Same semantics as `html`; separate name for CSS editor highlighting. */
34-
export const css: typeof html = html;
35-
3633
/**
3734
* Parses a `SafeMarkup` string into an inert `<template>`.
3835
*/

0 commit comments

Comments
 (0)