feat: aligne le style en dev et en prod

src/App.tsx

@@ -5,11 +5,7 @@ import { DisplayModeContext } from "./context/DisplayModeContext";
 import { HomeContext } from "./context/HomeContext";
 import { router } from "./router";
 import { ViewMode } from "./routes/ViewMode";
-import "./style/SquareSpace/blocks.css";
+import "./style/global.css";
-import "./style/SquareSpace/global.css";
-import "./style/SquareSpace/table.css";
-import "./style/SquareSpace/vars.css";
-import "./style/SquareSpace/video.css";
 import "./style/row.css";
 import "./style/thumbs.css";
 

src/main.tsx

@@ -19,9 +19,15 @@ const render = () => {
   renderResistants(defaultViewMode, isHome);
 };
 
-if ("Squarespace" in window) {
+export const isEmbeddedInSquareSpace = (): boolean => {
+  return "Squarespace" in window;
+};
+
+if (isEmbeddedInSquareSpace()) {
   // @ts-ignore
   window.Squarespace.onInitialize(Y, render);
 } else {
+  // Load in dev style that is normally injected by squarespace
+  import("./style/squarespace-site.css");
   render();
 }

src/style/SquareSpace/blocks.css

@@ -1,84 +0,0 @@
-.embed-block .intrinsic,
-.video-block .intrinsic,
-.embed-block .sqs-block-content .intrinsic,
-.video-block .sqs-block-content .intrinsic {
-  position: relative;
-}
-.embed-block
-  .intrinsic
-  .embed-block-wrapper:not(.embed-block-provider-SoundCloud),
-.video-block
-  .intrinsic
-  .embed-block-wrapper:not(.embed-block-provider-SoundCloud),
-.embed-block
-  .sqs-block-content
-  .intrinsic
-  .embed-block-wrapper:not(.embed-block-provider-SoundCloud),
-.video-block
-  .sqs-block-content
-  .intrinsic
-  .embed-block-wrapper:not(.embed-block-provider-SoundCloud) {
-  position: relative;
-}
-.embed-block
-  .intrinsic
-  .embed-block-wrapper:not(.embed-block-provider-SoundCloud)
-  .sqs-video-wrapper,
-.video-block
-  .intrinsic
-  .embed-block-wrapper:not(.embed-block-provider-SoundCloud)
-  .sqs-video-wrapper,
-.embed-block
-  .sqs-block-content
-  .intrinsic
-  .embed-block-wrapper:not(.embed-block-provider-SoundCloud)
-  .sqs-video-wrapper,
-.video-block
-  .sqs-block-content
-  .intrinsic
-  .embed-block-wrapper:not(.embed-block-provider-SoundCloud)
-  .sqs-video-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.embed-block .intrinsic,
-.video-block .intrinsic,
-.embed-block .sqs-block-content .intrinsic,
-.video-block .sqs-block-content .intrinsic {
-  position: relative;
-}
-.sqs-block-html .sqs-block-content > :last-child {
-  margin-bottom: 0;
-}
-.sqs-block-html .sqs-block-content > :first-child {
-  margin-top: 0;
-}
-.sqs-block-html .sqs-block-content :not(h1):not(h2):not(h3) {
-  word-wrap: break-word;
-}
-
-/* Séparateur */
-.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
-  clear: both;
-}
-.sqs-block {
-  position: relative;
-  height: auto;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.sqs-block-html .sqs-block-content > :first-child {
-  margin-top: 0;
-}
-.sqs-block-html .sqs-block-content :not(h1):not(h2):not(h3) {
-  word-wrap: break-word;
-}
-
-.sqs-block-html .sqs-block-content :not(h1):not(h2):not(h3) {
-  word-wrap: break-word;
-}

src/style/SquareSpace/table.css

@@ -1,53 +0,0 @@
-.sqs-row {
-  width: auto !important;
-}
-
-.sqs-row::before,
-.sqs-row::after {
-  content: "";
-  display: table;
-}
-
-[class*="sqs-col"] {
-  float: left;
-}
-[class*="sqs-col"]:last-child {
-  padding-right: 0;
-}
-
-.sqs-col-8 {
-  width: 66.6667%;
-}
-.sqs-col-12 .sqs-col-8 {
-  width: 66.6667%;
-}
-.sqs-col-12 .sqs-col-4 {
-  width: 33.3333%;
-}
-.sqs-col-4 {
-  width: 33.3333%;
-}
-
-.sqs-layout:not(.sqs-editing)
-  .sqs-row
-  .sqs-block:not(.float):not(.sqs-feature-gated-wrapper):first-child {
-  padding-top: 17px;
-}
-.sqs-layout:not(.sqs-editing)
-  .sqs-block
-  + .sqs-row
-  .sqs-block:not(.float):first-child {
-  padding-top: 17px;
-}
-.sqs-layout:not(.sqs-editing)
-  .sqs-row
-  .sqs-block:not(.float):not(.sqs-feature-gated-wrapper):first-child {
-  padding-top: 0;
-}
-.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
-  clear: both;
-}
-[class*="sqs-col"] .sqs-block {
-  padding-left: 17px;
-  padding-right: 17px;
-}

src/style/SquareSpace/video.css

@@ -1,45 +0,0 @@
-.sqs-video-wrapper.video-none {
-  position: relative;
-}
-.sqs-video-wrapper .intrinsic {
-  max-width: 100%;
-}
-
-.sqs-video-wrapper .sqs-video-overlay {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  color: #000;
-  background-position: center center;
-  background-repeat: no-repeat;
-}
-
-.sqs-video-wrapper .sqs-video-overlay .sqs-video-opaque {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  opacity: 0;
-}
-.sqs-video-wrapper .sqs-video-overlay .sqs-video-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  background: transparent
-    url("//assets.squarespace.com/universal/images-v6/damask/play-button.png")
-    center center no-repeat;
-  height: 48px;
-  width: 48px;
-  margin-left: -24px;
-  margin-top: -24px;
-  cursor: pointer;
-}
-
-.sqs-video-wrapper .sqs-video-overlay {
-  color: #000;
-}

src/style/global.css

@@ -1,19 +1,4 @@
-html {
-  pointer-events: auto;
-  font-family: sans-serif;
-  -webkit-text-size-adjust: 100%;
-}
-
 body {
-  font-family: Alice;
-  font-weight: 400;
-  font-style: normal;
-  font-size: 18px;
-  letter-spacing: 0em;
-  line-height: 1.8em;
-  text-transform: none;
-  color: #222;
-
   --fbc-blue-60: #0060df;
   --fbc-blue-70: #003eaa;
   --fbc-gray-20: #ededf0;
@@ -26,21 +11,6 @@ body {
   --fbc-font-size: 13px;
 }
 
-p:last-child {
-  margin-bottom: 0;
-}
-p:first-child {
-  margin-top: 0;
-}
-b,
-strong {
-  font-weight: bold;
-}
-
-img {
-  border: 0;
-}
-
 input.mantine-Select-input[type="search"] {
   box-sizing: inherit;
 }

vite.config.ts

@@ -10,11 +10,19 @@ export default defineConfig({
   build: {
     rollupOptions: {
       output: {
+        // this name is used in the code to inject module in squarespace
         entryFileNames: "resistants.js",
-        assetFileNames: ({ name }) =>
+        assetFileNames: (meta) => {
-          name && name.indexOf(".css") > 0
+          const name = meta.name;
-            ? "resistants.css"
+          if (name === "squarespace-site.css") {
-            : "assets/[name].[ext]",
+            // this won't be injected in squarespace
+            return "squarespace-site.css";
+          } else if (name.indexOf(".css") > 0) {
+            // this name is used in the code to inject module in squarespace
+            return "resistants.css";
+          }
+          return "assets/[name].[ext]";
+        },
       },
     },
     outDir: "public",