Fixed preflight settings in kg-unsplash-selector (#1169)

no issue After some trial and erroring, we found that the styles leaking into other applications was caused by Tailwind's preflight settings. Disabling fixed it. However it came with a caveat that caused styles to be ugly in Demo, so we made that conditional depending on the environment it's being built.
TryGhost · Mar 12, 2024 · d5c6169 · d5c6169
1 parent 5c6267f
commit d5c6169
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 34 deletions.
diff --git a/packages/kg-unsplash-selector/demo/App.tsx b/packages/kg-unsplash-selector/demo/App.tsx
@@ -17,15 +17,17 @@ const App = () => {
     }
 
     return (
-        <UnsplashSearchModal
-            unsplashProviderConfig={unsplashConfig}
-            onClose={() => {
-                alert('not implemented');
-            }}
-            onImageInsert={() => {
-                alert('not implemented');
-            }}
-        />
+        <div>
+            <UnsplashSearchModal
+                unsplashProviderConfig={unsplashConfig}
+                onClose={() => {
+                    alert('not implemented');
+                }}
+                onImageInsert={() => {
+                    alert('not implemented');
+                }}
+            />
+        </div>
     );
 };
 

diff --git a/packages/kg-unsplash-selector/demo/demo.tsx b/packages/kg-unsplash-selector/demo/demo.tsx
@@ -1,4 +1,3 @@
-import './styles/index.css';
 import App from './App';
 import React from 'react';
 import ReactDOM from 'react-dom/client';

diff --git a/packages/kg-unsplash-selector/demo/index.html b/packages/kg-unsplash-selector/demo/index.html
diff --git a/packages/kg-unsplash-selector/demo/styles/index.css b/packages/kg-unsplash-selector/demo/styles/index.css
diff --git a/packages/kg-unsplash-selector/index.html b/packages/kg-unsplash-selector/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ghost Unsplash Selector</title>
   </head>

diff --git a/packages/kg-unsplash-selector/package.json b/packages/kg-unsplash-selector/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/kg-unsplash-selector",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "dev": "vite",
+    "dev": "VITE_APP_DEV=true vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint src --ext .js,.ts,.jsx,.tsx --cache",
@@ -47,6 +47,7 @@
     "eslint-plugin-tailwindcss": "3.14.3",
     "jsdom": "24.0.0",
     "postcss": "8.4.35",
+    "postcss-import": "^16.0.1",
     "tailwindcss": "3.4.1",
     "typescript": "5.2.2",
     "vite": "5.1.4",

diff --git a/packages/kg-unsplash-selector/postcss.config.cjs b/packages/kg-unsplash-selector/postcss.config.cjs
@@ -1,3 +1,8 @@
 module.exports = {
-    plugins: [require('tailwindcss'), require('autoprefixer')]
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
+        tailwindcss: {},
+        autoprefixer: {}
+    }
 };
diff --git a/packages/kg-unsplash-selector/public/vite.svg b/packages/kg-unsplash-selector/public/vite.svg
diff --git a/packages/kg-unsplash-selector/tailwind.config.cjs b/packages/kg-unsplash-selector/tailwind.config.cjs
@@ -166,5 +166,8 @@ module.exports = {
     content: [
         './src/**/*.{js,jsx,ts,tsx}'
     ],
-    plugins: []
+    plugins: [],
+    corePlugins: {
+        preflight: process.env.VITE_APP_TESTING === 'true' || process.env.VITE_APP_DEV === 'true' ? true : false
+    }
 };
diff --git a/yarn.lock b/yarn.lock
@@ -16516,6 +16516,15 @@ postcss-import@^15.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
+postcss-import@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-16.0.1.tgz#c2e0478c5af8cb39ab3964c35d8fee8e70c362b8"
+  integrity sha512-i2Pci0310NaLHr/5JUFSw1j/8hf1CzwMY13g6ZDxgOavmRHQi2ba3PmUHoihO+sjaum+KmCNzskNsw7JDrg03g==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"