Fixing dist missing styles.css

Author: MichaelEakins

package.json

@@ -13,7 +13,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && cp src/styles/Compare.css dist/styles.css",
     "dev": "rollup -c -w",
     "test": "jest",
     "test:watch": "jest --watch",

rollup.config.mjs

@@ -31,9 +31,15 @@ export default [
     ],
     plugins: [
       peerDepsExternal(),
-      resolve(),
+      resolve({
+        preferBuiltins: false,
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
+      }),
       commonjs(),
-      postcss(),
+      postcss({
+        extract: 'styles.css',
+        minimize: true,
+      }),
       typescript({ tsconfig: './tsconfig.json', declaration: false }),
       babel({
         babelHelpers: 'bundled',
@@ -49,6 +55,16 @@ export default [
   {
     input: 'src/index.ts',
     output: [{ file: 'dist/index.d.ts', format: 'es' }],
-    plugins: [dts()],
+    plugins: [
+      postcss({
+        extract: false,
+        inject: false,
+      }),
+      dts(),
+    ],
+    external: [
+      ...Object.keys(pkg.peerDependencies || {}),
+      ...Object.keys(pkg.dependencies || {}),
+    ],
   },
 ];

src/stories/Compare.stories.tsx

@@ -10,38 +10,77 @@ export default {
   title: 'Examples/All',
 };
 
-export const SimpleParagraph = (args) => <SimpleParagraphExample {...args} />;
+interface SimpleParagraphArgs {
+  original: string;
+  modified: string;
+  title: string;
+  description?: string;
+}
+
+export const SimpleParagraph = (args: SimpleParagraphArgs) => <SimpleParagraphExample {...args} />;
 SimpleParagraph.args = {
   original: "I am Captain Kirk, Captain of the USS Enterprise.",
   modified: "I am Captain Picard, Captain of the USS Enterprise.",
   title: "Example 1: Kirk vs Picard",
   description: 'Only "Kirk" and "Picard" should be highlighted',
 };
 
-export const ComplexParagraph = (args) => <ComplexParagraphExample {...args} />;
+interface ComplexParagraphArgs {
+  original: string;
+  modified: string;
+  title: string;
+  description?: string;
+}
+
+export const ComplexParagraph = (args: ComplexParagraphArgs) => <ComplexParagraphExample {...args} />;
 ComplexParagraph.args = {
   original: "I am Captain Kirk, Captain of the USS Enterprise.",
   modified: "I am Commander Benjamin Sisko, Commander of Deep Space 9.",
   title: "Example 2: Kirk vs Sisko",
   description: "Multiple changes highlighted",
 };
 
-export const Array = (args) => <ArrayExample {...args} />;
+interface ExampleArgs {
+  original: string;
+  modified: string;
+  title: string;
+  description?: string;
+}
+
+interface ArrayExampleArgs {
+  original: string[];
+  modified: string[];
+  title: string;
+  description?: string;
+}
+
+interface CaseInsensitiveArgs extends ArrayExampleArgs {
+  caseSensitive: boolean;
+}
+
+export const Array = (args: ArrayExampleArgs) => <ArrayExample {...args} />;
 Array.args = {
   original: ['USS Enterprise', 'USS Voyager', 'USS Defiant'],
   modified: ['USS Discovery', 'USS Voyager', 'USS Cerritos'],
   title: "Example 3: Starship Array Comparison",
 };
 
-export const Disordered = (args) => <DisorderedArray {...args} />;
+interface DisorderedArrayArgs {
+  original: string[];
+  modified: string[];
+  title: string;
+  description?: string;
+}
+
+export const Disordered = (args: DisorderedArrayArgs) => <DisorderedArray {...args} />;
 Disordered.args = {
   original: ['Vulcan', 'Earth', 'Romulus'],
   modified: ['Earth', 'Romulus', 'Vulcan'],
   title: "Example 4: Disordered Array",
   description: "Order matters in this comparison",
 };
 
-export const CaseInsensitive = (args) => <CaseInsensitiveExample {...args} />;
+export const CaseInsensitive = (args: CaseInsensitiveArgs) => <CaseInsensitiveExample {...args} />;
 CaseInsensitive.args = {
   original: ['Vulcan', 'Earth', 'Romulus'],
   modified: ['romulus', 'vulcan', 'earth'],
@@ -50,7 +89,9 @@ CaseInsensitive.args = {
   caseSensitive: false,
 };
 
-export const OrderInsensitive = (args) => <OrderInsensitiveExample {...args} />;
+interface OrderInsensitiveArgs extends CaseInsensitiveArgs {}
+
+export const OrderInsensitive = (args: OrderInsensitiveArgs) => <OrderInsensitiveExample {...args} />;
 OrderInsensitive.args = {
   original: ['Vulcan', 'Earth', 'Romulus'],
   modified: ['romulus', 'vulcan', 'earth'],

src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: Record<string, string>;
+  export default content;
+}