refactor: standardize CSS file naming in plugin templates (#1012)

Author: andersonleal

packages/snap/src/create/templates/generate.ts

@@ -10,7 +10,6 @@ const replaceTemplateVariables = (content: string, projectName: string): string
   const replacements: Record<string, string> = {
     '{{PROJECT_NAME}}': projectName,
     '{{PLUGIN_NAME}}': toPascalCase(projectName),
-    '{{CSS_FILE_NAME}}': projectName.replace(/^@[^/]+\//, ''),
   }
 
   return Object.entries(replacements).reduce((result, [key, value]) => {

packages/snap/src/create/templates/plugin/src/plugin.ts.txt

@@ -5,7 +5,7 @@ export default function plugin(_motia: MotiaPluginContext): MotiaPlugin {
     workbench: [
       {
         packageName: '{{PROJECT_NAME}}',
-        cssImports: ['{{PROJECT_NAME}}/dist/{{CSS_FILE_NAME}}.css'],
+        cssImports: ['{{PROJECT_NAME}}/dist/styles.css'],
         label: 'Example',
         position: 'bottom',
         componentName: 'ExamplePage',

packages/snap/src/create/templates/plugin/tsdown.config.ts.txt

@@ -37,7 +37,7 @@ export default defineConfig([
   // Separate CSS build
   {
     entry: {
-      index: './src/styles.css',
+      styles: './src/styles.css',
     },
     format: 'esm',
     platform: 'browser',

packages/workbench/middleware.ts

@@ -108,7 +108,7 @@ export const applyMiddleware = async ({ app, port, workbenchBase, plugins }: App
       },
     },
     optimizeDeps: {
-      exclude: plugins.map((p) => p.packageName),
+      exclude: ['@motiadev/workbench'],
     },
     plugins: [
       react({

plugins/plugin-bullmq/src/plugin.ts

@@ -66,7 +66,7 @@ export default function plugin(motia: MotiaPluginContext): MotiaPlugin {
     workbench: [
       {
         packageName: '@motiadev/plugin-bullmq',
-        cssImports: ['@motiadev/plugin-bullmq/dist/index.css'],
+        cssImports: ['@motiadev/plugin-bullmq/dist/styles.css'],
         label: 'Queues',
         position: 'top',
         componentName: 'QueuesPage',

plugins/plugin-bullmq/tsdown.config.ts

@@ -35,7 +35,7 @@ export default defineConfig([
   // Separate CSS build
   {
     entry: {
-      index: './src/styles.css',
+      styles: './src/styles.css',
     },
     format: 'esm',
     platform: 'browser',

plugins/plugin-endpoint/src/api/index.ts

@@ -44,7 +44,7 @@ export function plugin({ lockedData }: MotiaPluginContext): MotiaPlugin {
     workbench: [
       {
         packageName: '@motiadev/plugin-endpoint',
-        cssImports: ['@motiadev/plugin-endpoint/dist/index.css'],
+        cssImports: ['@motiadev/plugin-endpoint/dist/styles.css'],
         label: 'Endpoints',
         position: 'top',
         componentName: 'EndpointsPage',

plugins/plugin-endpoint/tsdown.config.ts

@@ -35,7 +35,7 @@ export default defineConfig([
   // Separate CSS build
   {
     entry: {
-      index: './src/styles.css',
+      styles: './src/styles.css',
     },
     format: 'esm',
     platform: 'browser',

plugins/plugin-example/src/plugin.ts

@@ -5,7 +5,7 @@ export default function plugin(_motia: MotiaPluginContext): MotiaPlugin {
     workbench: [
       {
         packageName: '@motiadev/plugin-example',
-        cssImports: ['@motiadev/plugin-example/dist/index.css'],
+        cssImports: ['@motiadev/plugin-example/dist/styles.css'],
         label: 'Example',
         position: 'bottom',
         componentName: 'ExamplePage',

plugins/plugin-example/tsdown.config.ts

@@ -37,7 +37,7 @@ export default defineConfig([
   // Separate CSS build
   {
     entry: {
-      index: './src/styles.css',
+      styles: './src/styles.css',
     },
     format: 'esm',
     platform: 'browser',