fix(cms): fix cms classes clash from plugins

all plugins need to use a prefiix so their tailwind classes do not clash and mess up the dashboard
tenseijs · Feb 6, 2021 · eec42f3 · eec42f3
1 parent 8dce10b
commit eec42f3
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 64 deletions.
diff --git a/packages/cli/_templates/default/new/tailwind.config.js.ejs.t b/packages/cli/_templates/default/new/tailwind.config.js.ejs.t
@@ -4,6 +4,10 @@ to: <%= h.changeCase.param(name) %>/tailwind.config.js
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
+    prefix: '<%= h.changeCase.param(name) %>', // Change to your preferred prefix. This is important so your styles do not clash with the styles from the main cms.
+    corePlugins: {
+        preflight: false,
+    },
     purge: {
         enabled: process.env.NODE_ENV === 'production',
         content: ['./**/*.tsx']

diff --git a/packages/media/client/Card.js b/packages/media/client/Card.js
@@ -7,10 +7,10 @@ const Card = ({ file, checked, onCheckboxChange }) => {
         <div key={file.id}>
             <div
                 tabIndex={0}
-                className={`cursor-pointer relative h-48 bg-tensei-gray-600 shadow-sm bg-white rounded-lg px-3 py-4 ${
+                className={`media-cursor-pointer media-relative media-h-48 media-bg-tensei-gray-600 media-shadow-sm media-bg-white media-rounded-lg media-px-3 media-py-4 ${
                     checked
-                        ? 'border-2 border-tensei-primary'
-                        : 'border border-tensei-gray-600'
+                        ? 'media-border-2 media-border-tensei-primary'
+                        : 'media-border media-border-tensei-gray-600'
                 }`}
                 style={{
                     wordWrap: 'break-word',
@@ -19,21 +19,21 @@ const Card = ({ file, checked, onCheckboxChange }) => {
             >
                 {onCheckboxChange && (
                     <Checkbox
-                        className="absolute top-0 left-0 mt-3 ml-3 z-30"
+                        className="media-absolute media-top-0 media-left-0 media-mt-3 media-ml-3 media-z-30"
                         checked={checked}
                         onChange={onCheckboxChange}
                     />
                 )}
                 {isImage(file) ? (
                     <img
                         src={getFullAssetPath(file)}
-                        className="max-w-full max-h-full w-auto h-auto m-auto"
+                        className="media-max-w-full media-max-h-full media-w-auto media-h-auto media-m-auto"
                         alt={file.alt_text || file.name}
                     />
                 ) : (
-                    <div className="w-full h-full flex items-center justify-center">
+                    <div className="media-w-full media-h-full media-flex media-items-center media-justify-center">
                         <svg
-                            className="w-24 h-24 fill-current text-tensei-gray-800 opacity-50"
+                            className="media-w-24 media-h-24 media-fill-current media-text-tensei-gray-800 media-opacity-50"
                             version="1.1"
                             id="Capa_1"
                             xmlns="http://www.w3.org/2000/svg"
@@ -118,11 +118,11 @@ const Card = ({ file, checked, onCheckboxChange }) => {
                 )}
             </div>
 
-            <div className="px-3 h-10 mt-3 bg-white border border-tensei-gray-600 rounded-lg flex items-center justify-between">
-                <span className="text-xs font-semibold truncate inline-block w-2/3">
+            <div className="media-px-3 media-h-10 media-mt-3 media-bg-white media-border media-border-tensei-gray-600 media-rounded-lg media-flex media-items-center media-justify-between">
+                <span className="media-text-xs media-font-semibold media-truncate media-inline-block media-w-2/3">
                     {file.name}
                 </span>
-                <span className="text-left text-xs font-extrabold text-tensei-darkest uppercase tracking-wider">
+                <span className="media-text-left media-text-xs media-font-extrabold media-text-tensei-darkest media-uppercase media-tracking-wider">
                     {getFileType(file)}
                 </span>
             </div>

diff --git a/packages/media/client/Components.js b/packages/media/client/Components.js
@@ -39,7 +39,7 @@ export const DetailFile = ({ detailId, resource, field }) => {
             dotClassName="bg-tensei-primary"
         />
     ) : data ? (
-        <div className="w-full sm:w-72">
+        <div className="media-w-full sm:media-w-72">
             <Card file={data} />
         </div>
     ) : null

diff --git a/packages/media/client/Media.js b/packages/media/client/Media.js
@@ -145,7 +145,10 @@ export const Media = ({ detailId, relatedResource }) => {
                 detailId={detailId}
                 setOpen={setUploadOpen}
                 relatedResource={relatedResource}
-                onUploaded={() => fetchData(data, getQuery())}
+                onUploaded={() => {
+                    setSelected([])
+                    fetchData(data, getQuery())
+                }}
             />
             <DeleteModal
                 open={deleting}
@@ -157,15 +160,15 @@ export const Media = ({ detailId, relatedResource }) => {
                     fetchData(data, getQuery())
                 }}
             />
-            <Heading as="h2" className="mb-5 text-2xl">
+            <Heading as="h2" className="media-mb-5 media-text-2xl">
                 {detailId && relatedField
                     ? relatedField.label
                     : 'Media Library'}
             </Heading>
 
-            <div className="flex flex-wrap justify-between items-center w-full">
-                <div className="flex flex-wrap w-full md:w-auto">
-                    <div className="mr-2 h-10 px-5 flex items-center justify-center bg-white rounded-lg border border-tensei-gray-600">
+            <div className="media-flex media-flex-wrap media-justify-between media-items-center media-w-full">
+                <div className="media-flex media-flex-wrap media-w-full md:media-w-auto">
+                    <div className="media-mr-2 media-h-10 media-px-5 media-flex media-items-center media-justify-center media-bg-white media-rounded-lg media-border media-border-tensei-gray-600">
                         <Checkbox
                             onChange={event => {
                                 if (event.target.checked) {
@@ -181,13 +184,13 @@ export const Media = ({ detailId, relatedResource }) => {
                         />
                     </div>
                     <SearchInput
-                        className="md:mr-5 w-full mb-3 md:mb-0 md:w-96"
+                        className="md:media-mr-5 media-w-full media-mb-3 md:media-mb-0 md:media-w-96"
                         value={search}
                         onChange={event => setSearch(event.target.value)}
                     />
                 </div>
 
-                <div className="flex w-full md:w-auto">
+                <div className="media-flex media-w-full md:media-w-auto">
                     <Button
                         clear={selected.length === 0}
                         danger={selected.length > 0}
@@ -198,7 +201,7 @@ export const Media = ({ detailId, relatedResource }) => {
                     </Button>
                     <Button
                         onClick={() => setUploadOpen(true)}
-                        className="ml-3"
+                        className="media-ml-3"
                         primary
                     >
                         Upload Assets
@@ -207,13 +210,13 @@ export const Media = ({ detailId, relatedResource }) => {
             </div>
 
             {!loading && data.data.length === 0 ? (
-                <div className="w-full h-full flex flex-col items-center justify-center my-8">
+                <div className="media-w-full media-h-full media-flex media-flex-col media-items-center media-justify-center media-my-8">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width={65}
                         height={51}
                         viewBox="0 0 65 51"
-                        className="mb-4 text-tensei-gray-500 fill-current"
+                        className="media-mb-4 media-text-tensei-gray-500 media-fill-current"
                     >
                         <path d="M56 40h2c.552285 0 1 .447715 1 1s-.447715 1-1 1h-2v2c0 .552285-.447715 1-1 1s-1-.447715-1-1v-2h-2c-.552285 0-1-.447715-1-1s.447715-1 1-1h2v-2c0-.552285.447715-1 1-1s1 .447715 1 1v2zm-5.364125-8H38v8h7.049375c.350333-3.528515 2.534789-6.517471 5.5865-8zm-5.5865 10H6c-3.313708 0-6-2.686292-6-6V6c0-3.313708 2.686292-6 6-6h44c3.313708 0 6 2.686292 6 6v25.049375C61.053323 31.5511 65 35.814652 65 41c0 5.522847-4.477153 10-10 10-5.185348 0-9.4489-3.946677-9.950625-9zM20 30h16v-8H20v8zm0 2v8h16v-8H20zm34-2v-8H38v8h16zM2 30h16v-8H2v8zm0 2v4c0 2.209139 1.790861 4 4 4h12v-8H2zm18-12h16v-8H20v8zm34 0v-8H38v8h16zM2 20h16v-8H2v8zm52-10V6c0-2.209139-1.790861-4-4-4H6C3.790861 2 2 3.790861 2 6v4h52zm1 39c4.418278 0 8-3.581722 8-8s-3.581722-8-8-8-8 3.581722-8 8 3.581722 8 8 8z" />
                     </svg>
@@ -225,11 +228,11 @@ export const Media = ({ detailId, relatedResource }) => {
             ) : null}
 
             {loading ? (
-                <div className="w-full py-12 flex justify-center items-center">
-                    <Pulse dotClassName="bg-tensei-primary" />
+                <div className="media-w-full media-py-12 media-flex media-justify-center media-items-center">
+                    <Pulse dotClassName="media-bg-tensei-primary" />
                 </div>
             ) : (
-                <div className="mt-4 grid grid-cols-1 md:grid-cols-5 gap-4">
+                <div className="media-mt-4 media-grid media-grid-cols-1 md:media-grid-cols-5 media-gap-4">
                     {data.data.map(file => {
                         const checked = selected.some(f => f.id === file.id)
 
@@ -248,9 +251,9 @@ export const Media = ({ detailId, relatedResource }) => {
             )}
 
             {!loading && data.data.length !== 0 && (
-                <div className="mt-6 flex flex-wrap items-center justify-between">
+                <div className="media-mt-6 media-flex media-flex-wrap media-items-center media-justify-between">
                     <Select
-                        className="w-full md:w-auto mb-3 md:mb-0"
+                        className="media-w-full md:media-w-auto media-mb-3 md:media-mb-0"
                         roundedFull
                         hideFirstOption
                         value={data.meta.per_page}

diff --git a/packages/media/client/UploadMedia.js b/packages/media/client/UploadMedia.js
@@ -86,30 +86,30 @@ const UploadFiles = ({
             open={open}
             setOpen={setOpen}
             title="Upload media"
-            className="align-top sm:my-32 sm:max-w-3xl"
+            className="media-align-top sm:media-my-32 sm:media-max-w-3xl"
         >
             <input
                 ref={file}
                 type="file"
-                className="hidden"
+                className="media-hidden"
                 multiple
                 onChange={onFilesSelected}
             />
 
             {files.length === 0 ? (
-                <div className="w-full py-16 flex justify-center items-center">
+                <div className="media-w-full media-py-16 media-flex media-justify-center media-items-center">
                     <Button secondary onClick={() => file.current.click()}>
                         Select Files
                     </Button>
                 </div>
             ) : null}
 
             {files.length > 0 ? (
-                <div className="w-full py-6">
-                    <div className="relative pt-1">
-                        <div className="flex mb-2 items-center justify-between">
+                <div className="media-w-full media-py-6">
+                    <div className="media-relative media-pt-1">
+                        <div className="media-flex media-mb-2 media-items-center media-justify-between">
                             <Paragraph
-                                className={'font-semibold text-tensei-darkest'}
+                                className={'media-font-semibold media-text-tensei-darkest'}
                             >
                                 Uploading {files.length} files (
                                 {niceBytes(
@@ -120,16 +120,16 @@ const UploadFiles = ({
                                 )}{' '}
                                 in total.)
                             </Paragraph>
-                            <div className="text-right">
-                                <span className="text-sm font-bold inline-block text-tensei-primary-darker">
+                            <div className="media-text-right">
+                                <span className="media-text-sm media-font-bold media-inline-block media-text-tensei-primary-darker">
                                     {progress}%
                                 </span>
                             </div>
                         </div>
-                        <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-tensei-primary-200">
+                        <div className="media-overflow-hidden media-h-2 media-mb-4 media-text-xs media-flex media-rounded media-bg-tensei-primary-200">
                             <div
                                 style={{ width: `${progress}%` }}
-                                className="shadow-none transition ease-in-out duration-100 flex flex-col text-center whitespace-nowrap text-white justify-center bg-tensei-primary"
+                                className="media-shadow-none media-transition media-ease-in-out media-duration-100 media-flex media-flex-col media-text-center media-whitespace-nowrap media-text-white media-justify-center media-bg-tensei-primary"
                             ></div>
                         </div>
                     </div>

diff --git a/packages/media/package.json b/packages/media/package.json
@@ -12,7 +12,7 @@
         "build:server": "tsc --p tsconfig.json",
         "build:client": "cross-env NODE_ENV=production webpack --config=node_modules/laravel-mix/setup/webpack.config.js",
         "dev:server": "tsc --watch --p tsconfig.json",
-        "dev:client": "webpack --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
+        "dev:client": "cross-env NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
         "test": "jest --verbose --runInBand --forceExit",
         "build": "yarn build:server && yarn build:client"
     },
@@ -48,5 +48,11 @@
     },
     "devDependencies": {
         "postcss": "^8.1"
+    },
+    "babelMacros": {
+        "twin": {
+            "config": "./tailwind.config.js",
+            "preset": "styled-components"
+        }
     }
 }
diff --git a/packages/media/tailwind.config.js b/packages/media/tailwind.config.js
@@ -1,9 +1,13 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
+    prefix: 'media-',
     purge: {
         enabled: process.env.NODE_ENV === 'production',
-        content: ['./**/*.js']
+        content: ['./client/*.js']
+    },
+    corePlugins: {
+        preflight: false,
     },
     theme: {
         extend: {

diff --git a/yarn.lock b/yarn.lock
@@ -4882,11 +4882,6 @@ aproba@^2.0.0:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
   integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
 
-are-passive-events-supported@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/are-passive-events-supported/-/are-passive-events-supported-1.1.1.tgz#3db180a1753a2186a2de50a32cded3ac0979f5dc"
-  integrity sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww==
-
 are-we-there-yet@~1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
@@ -19209,26 +19204,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-isomorphic-layout-effect@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.0.tgz#4db2111e0d53ca694187ea5fd5cb2ba610286fe0"
-  integrity sha512-kady5Z1O1qx5RitodCCKbpJSVEtECXYcnBnb5Q48Bz5V6gBmTu85ZcGdVwVFs8+DaOurNb/L5VdGHoQRMknghw==
-
-use-latest@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
-  integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
-  dependencies:
-    use-isomorphic-layout-effect "^1.0.0"
-
-use-onclickoutside@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/use-onclickoutside/-/use-onclickoutside-0.3.1.tgz#fdd723a6a499046b6bc761e4a03af432eee5917b"
-  integrity sha512-aahvbW5+G0XJfzj31FJeLsvc6qdKbzeTsQ8EtkHHq5qTg6bm/qkJeKLcgrpnYeHDDbd7uyhImLGdkbM9BRzOHQ==
-  dependencies:
-    are-passive-events-supported "^1.1.0"
-    use-latest "^1.0.0"
-
 use-subscription@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"