Atlas #4 - Updating "core-data" package to export separate custom CSS…

… and Tailwind CSS

packages/core-data/README.md

@@ -0,0 +1,41 @@
+# core-data
+
+## CSS
+Depending on whether your application using Tailwind CSS, we'll configure the CSS in one of two ways:
+
+### WITHOUT Tailwind CSS
+Import both exported `styles.css` and `tailwind.css` into your application.
+
+```javascript
+// index.js
+
+import '@performant-software/core-data/styles.css';
+import '@performant-software/core-data/tailwind.css';
+```
+
+### WITH Tailwind CSS
+
+Import **ONLY** the `styles.css` import your application.
+
+```javascript
+// index.js
+
+import '@performant-software/core-data/styles.css';
+```
+
+Include the `core-data` Tailwind config as a `present`, and update the `content` section to source classes from the `core-data` package.
+
+```javascript
+// tailwind.config.js
+
+import coreDataConfig from '@performant-software/core-data/tailwind.config';
+
+export default {
+  presets: [
+    coreDataConfig
+  ],
+  content: [
+    '../../node_modules/@performant-software/core-data/**/*.{js,jsx,ts,tsx}'
+  ]
+};
+```

packages/core-data/package.json

@@ -12,8 +12,9 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
-    "./style.css": "./dist/style.css",
-    "./tailwind.config.js": "./dist/tailwind.config.js"
+    "./style.css": "./dist/packages/core-data/src/index.css",
+    "./tailwind.css": "./dist/packages/core-data/src/tailwind.css",
+    "./tailwind.config": "./dist/tailwind.config.js"
   },
   "scripts": {
     "build": "vite build && flow-copy-source -v src types"

packages/core-data/postcss.config.js

@@ -2,6 +2,7 @@
 
 export default {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {}
   }

packages/core-data/src/components/FacetList.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React, { type Node } from 'react';
-import './FacetList.css';
 
 type Props = {
   label: string,

packages/core-data/src/components/LoadAnimation.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import './LoadAnimation.css';
 
 type Props = {
   /**

packages/core-data/src/components/MediaGallery.js

@@ -5,7 +5,6 @@ import Viewer from '@samvera/clover-iiif/viewer';
 import { Image, X } from 'lucide-react';
 import React from 'react';
 import type { MediaContent } from '../types/MediaContent';
-import './MediaGallery.css';
 
 type Props = {
   /**

packages/core-data/src/components/PlaceResultsList.js

@@ -7,7 +7,6 @@ import { FixedSizeList } from 'react-window';
 import _ from 'underscore';
 import type { Feature } from '../types/Feature';
 import type { Place } from '../types/typesense/Place';
-import './PlaceResultsList.css';
 
 /**
  * Converts the passed place result to a feature.

packages/core-data/src/components/RelatedItem.js

@@ -5,7 +5,6 @@ import { AlertCircle, ChevronDown } from 'lucide-react';
 import React, { type Node } from 'react';
 import i18n from '../i18n/i18n';
 import LoadAnimation from './LoadAnimation';
-import './RelatedItem.css';
 
 type Props = {
   children: Node,

packages/core-data/src/components/RelatedItemsList.js

@@ -2,7 +2,6 @@
 
 import * as Accordion from '@radix-ui/react-accordion';
 import React, { type Node } from 'react';
-import './RelatedItemsList.css';
 
 type Props = {
   children: Node

packages/core-data/src/index.css

@@ -1,3 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import './styles/FacetList.css';
+@import './styles/LoadAnimation.css';
+@import './styles/MediaGallery.css';
+@import './styles/PlaceResultsList.css';
+@import './styles/RelatedItemsList.css';

packages/core-data/src/components/RelatedItemsList.css → packages/core-data/src/styles/RelatedItemsList.css

@@ -10,6 +10,11 @@
   overflow: hidden;
 }
 
+.related-items-list .accordion-content[data-state="closed"] {
+  visibility: hidden;
+  height: 0;
+}
+
 .related-items-list .accordion-content[data-state='open'] {
   animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }

packages/core-data/src/tailwind.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

packages/core-data/src/tailwind.js

@@ -0,0 +1,3 @@
+// @flow
+
+import './tailwind.css';

packages/core-data/tailwind.config.js

@@ -1,7 +1,6 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: [
-    './src/index.css',
     './src/**/*.js'
   ],
   theme: {
@@ -10,10 +9,16 @@ module.exports = {
         muted: '#0005119e'
       },
       fontFamily: {
-        sans: ['-apple-system', 'Roboto', 'sans-serif'],
-        'dm-display': ['DM Serif Display'],
-      },
-    },
+        sans: [
+          '-apple-system',
+          'Roboto',
+          'sans-serif'
+        ],
+        'dm-display': [
+          'DM Serif Display'
+        ]
+      }
+    }
   },
   plugins: []
 };

packages/core-data/vite.config.js

@@ -29,9 +29,13 @@ export default defineConfig(() => ({
     })
   ],
   build: {
+    cssCodeSplit: true,
     sourcemap: true,
     lib: {
-      entry: './src/index.js',
+      entry: [
+        './src/index.js',
+        './src/tailwind.js'
+      ],
       formats: ['es', 'cjs'],
       fileName: (format) => `index.${format}.js`
     },

packages/storybook/.storybook/preview.js

@@ -3,12 +3,24 @@
 import { DocsContainer } from '@storybook/addon-docs';
 import React, { useRef } from 'react';
 import ModalContext from '../../semantic-ui/src/context/ModalContext';
+
+// Peripleo styles
 import '@peripleo/maplibre/peripleo-maplibre.css';
 import '@peripleo/peripleo/default-theme';
+
+// Component package styles
+import '../../controlled-vocabulary/dist/style.css';
+import '../../core-data/dist/packages/core-data/src/index.css';
 import '../../geospatial/dist/style.css';
 import '../../semantic-ui/dist/style.css';
 import '../../shared/dist/style.css';
+import '../../user-defined-fields/dist/style.css';
+import '../../visualize/dist/style.css';
+
+// Storybook styles
 import './styles/index.css';
+
+// Tailwind styles
 import '../src/index.css';
 
 /**

packages/storybook/tailwind.config.js

@@ -1,19 +1,17 @@
-import coreDataConfig from '@performant-software/core-data/tailwind.config.js';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import coreDataConfig from '@performant-software/core-data/tailwind.config';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
+  presets: [
+    coreDataConfig
+  ],
   content: [
-    './src/index.css',
-    './src/**/*.js',
-    '../../node_modules/@performant-software/core-data/src/**/*.{js,jsx,ts,tsx}'
+    './src/**/*.{js,jsx,ts,tsx}',
+    '../../node_modules/@performant-software/core-data/**/*.{js,jsx,ts,tsx}'
   ],
   theme: {
-    ...coreDataConfig.theme,
-    extend: {
-      ...coreDataConfig.theme?.extend
-    },
+    extend: {},
   },
-  plugins: [
-    ...coreDataConfig.plugins
-  ]
+  plugins: []
 };