#171 basic web component

Author: SharonStrats

babel.config.mjs

@@ -1,3 +1,10 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { resolvePathsUsingDecorators, litDecoratorsBabelOptions } from './config/babel.mjs'
+
+const projectRoot = path.dirname(fileURLToPath(import.meta.url))
+const pathsUsingDecorators = resolvePathsUsingDecorators(projectRoot)
+
 export default {
   presets: [
     '@babel/preset-typescript',
@@ -18,5 +25,11 @@ export default {
         ]
       }
     ]
+  ],
+  overrides: [
+    {
+      include: pathsUsingDecorators,
+      ...litDecoratorsBabelOptions,
+    }
   ]
 }

config/babel.mjs

@@ -0,0 +1,30 @@
+import path from 'path'
+
+/**
+ * This file contains config options for babel using Lit decorators.
+ *
+ * @see https://lit.dev/docs/components/decorators/#using-decorators-with-babel
+ */
+
+const pathsUsingDecorators = ['src/design-system', 'src/primitives', 'src/storybook', 'src/components']
+
+export const litDecoratorsBabelOptions = {
+  assumptions: {
+    setPublicClassFields: false
+  },
+  plugins: [
+    '@babel/plugin-transform-class-static-block',
+    ['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
+    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
+    ['@babel/plugin-transform-class-properties', { loose: true }]
+  ]
+}
+
+export const litDecoratorsLoaderOptions = {
+  cacheDirectory: true,
+  ...litDecoratorsBabelOptions,
+}
+
+export function resolvePathsUsingDecorators (projectRoot) {
+  return pathsUsingDecorators.map((_path) => path.resolve(projectRoot, _path))
+}

config/postcss.mjs

@@ -0,0 +1,12 @@
+import PostCSS from 'postcss'
+import TailwindCSS from '@tailwindcss/postcss'
+
+const cssProcessor = PostCSS([TailwindCSS()])
+
+export default {
+  async transform (css, { filePath }) {
+    const result = await cssProcessor.process(css, { from: filePath })
+
+    return result.css
+  }
+}

declarations.d.ts

@@ -1 +1,7 @@
+declare module '*.styles.css' {
+  import type { CSSResultGroup } from 'lit'
+  const styles: CSSResultGroup
+  export default styles
+}
+
 declare module '*.css';