refactor: scope preflight css to className

equinor · May 9, 2024 · 779f744 · 779f744
1 parent af27b61
commit 779f744
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 7 deletions.
diff --git a/example/index.html b/example/index.html
@@ -14,7 +14,7 @@
     />
     <title>dm-core-packages</title>
 </head>
-<body>
+<body className="dm-preflight">
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <script src="src/index.tsx" type="module"></script>

diff --git a/packages/dm-core-plugins/package.json b/packages/dm-core-plugins/package.json
@@ -14,11 +14,11 @@
     "lodash": "^4.17.21",
     "luxon": "^3.4.3",
     "mermaid": "^10.0.0",
+    "react-grid-system": "^8.1.9",
     "react-hook-form": "^7.48.2",
     "react-toastify": "^9.1.3",
     "ts-node": "^10.9.1",
-    "yaml": "^2.3.2",
-    "react-grid-system": "^8.1.9"
+    "yaml": "^2.3.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.4.1",
@@ -41,6 +41,7 @@
     "react-router-dom": ">=5.1.2",
     "shx": " 0.3.4",
     "tailwindcss": "^3.4.0",
+    "tailwindcss-scoped-preflight": "^3.2.1",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.3.1",
     "typescript": "^5.1.6"
@@ -58,7 +59,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "prebuild": "shx rm -rf dist",
-    "build:css": "npx tailwindcss -i ./src/styles/main.css -o ./dist/main.css --minify",
+    "build:css": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css --minify",
     "build": "tsc && yarn build:css",
     "test": "jest test",
     "test-watch": "jest test --watchAll"

diff --git a/packages/dm-core-plugins/src/index.tsx b/packages/dm-core-plugins/src/index.tsx
@@ -165,3 +165,6 @@ export default ({
     ),
   },
 } as TUiPluginMap)
+
+// NEEDS TO BE HERE TO FORCE TAILWIND BUILD TO RECOGNIZE OUR PREFLIGHT PREFIX
+// .dm-preflight
diff --git a/packages/dm-core-plugins/tailwind.config.ts b/packages/dm-core-plugins/tailwind.config.ts
@@ -1,3 +1,8 @@
+import {
+  isolateInsideOfContainer,
+  scopedPreflightStyles,
+} from 'tailwindcss-scoped-preflight'
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{ts,js,tsx,jsx}'],
@@ -15,5 +20,9 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer('.dm-preflight'),
+    }),
+  ],
 }
diff --git a/packages/dm-core/package.json b/packages/dm-core/package.json
@@ -43,6 +43,7 @@
     "postcss": "^8.4.31",
     "shx": " 0.3.4",
     "tailwindcss": "^3.4.0",
+    "tailwindcss-scoped-preflight": "^3.2.1",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.3.1",
     "typescript": "^5.1.6"
@@ -56,7 +57,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "prebuild": "shx rm -rf dist",
-    "build:css": "npx tailwindcss -i ./src/styles/base.css -o ./dist/main.css --minify",
+    "build:css": "tailwindcss -i ./src/styles/base.css -o ./dist/main.css --minify",
     "build": "tsc && yarn build:css",
     "test": "jest test"
   }

diff --git a/packages/dm-core/src/index.tsx b/packages/dm-core/src/index.tsx
@@ -18,3 +18,6 @@ export * from './utils/objectUtilities'
 export * from './utils/truncatePathString'
 export * from './utils/variables'
 export * from './utils/stringUtilities'
+
+// NEEDS TO BE HERE TO FORCE TAILWIND BUILD TO RECOGNIZE OUR PREFLIGHT PREFIX
+// .dm-preflight
diff --git a/packages/dm-core/tailwind.config.ts b/packages/dm-core/tailwind.config.ts
@@ -1,3 +1,8 @@
+import {
+  isolateInsideOfContainer,
+  scopedPreflightStyles,
+} from 'tailwindcss-scoped-preflight'
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{ts,js,tsx,jsx}'],
@@ -15,5 +20,9 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer('.dm-preflight'),
+    }),
+  ],
 }