feat: added styled-components css overload

package.json

@@ -46,6 +46,7 @@
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
+    "babel-plugin-styled-components": "^2.1.1",
     "dependency-cruiser": "^12.11.1",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",

packages/core/src/components/TextareaControl/TextareaControl.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CSSProp } from 'styled-components';
 
 // declarations
 import {
@@ -28,6 +29,8 @@ export interface TextareaControlProps
     Omit<StyledTextareaControlProps, '$size'> {
   /** The size for the textarea. It affects to its padding, font-size... etc. */
   size?: FieldSize;
+  /** Custom styles */
+  css?: CSSProp;
 }
 
 export const TextareaControl: React.FC<TextareaControlProps> = ({
@@ -36,16 +39,16 @@ export const TextareaControl: React.FC<TextareaControlProps> = ({
   rows = 4,
   size = 'md',
   status = 'base',
+  css,
   ...restNativeProps
-}) => {
-  return (
-    <StyledTextareaControl
-      {...restNativeProps}
-      aria-errormessage={status === 'error' ? ariaErrorMessage : undefined}
-      aria-invalid={ariaInvalid ?? (status === 'error' ? true : undefined)}
-      rows={rows}
-      $size={size}
-      status={status}
-    />
-  );
-};
+}) => (
+  <StyledTextareaControl
+    {...restNativeProps}
+    aria-errormessage={status === 'error' ? ariaErrorMessage : undefined}
+    aria-invalid={ariaInvalid ?? (status === 'error' ? true : undefined)}
+    rows={rows}
+    $size={size}
+    status={status}
+    css={css}
+  />
+);

packages/core/src/styled.d.ts

@@ -1,5 +1,6 @@
 import 'styled-components';
 import { Brand } from '@devoinc/genesys-brand-devo';
+import {} from 'styled-components/cssprop';
 
 declare module 'styled-components' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/core/vite.config.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'path';
 import { mergeConfig } from 'vite';
 
-import viteconf from '../../vite.template.config';
+import viteconf from '../../vite.config';
 
 /** @type {import('vite').UserConfig} */
 export default mergeConfig(viteconf, {

packages/datetime/src/styled.d.ts

@@ -1,5 +1,6 @@
 import 'styled-components';
 import { Brand } from '@devoinc/genesys-brand-devo';
+import {} from 'styled-components/cssprop';
 
 declare module 'styled-components' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/datetime/vite.config.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'path';
 import { mergeConfig } from 'vite';
 
-import viteconf from '../../vite.template.config';
+import viteconf from '../../vite.config';
 
 /** @type {import('vite').UserConfig} */
 export default mergeConfig(viteconf, {

packages/form/src/styled.d.ts

@@ -1,5 +1,6 @@
 import 'styled-components';
 import { Brand } from '@devoinc/genesys-brand-devo';
+import {} from 'styled-components/cssprop';
 
 declare module 'styled-components' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/form/vite.config.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'path';
 import { mergeConfig } from 'vite';
 
-import viteconf from '../../vite.template.config';
+import viteconf from '../../vite.config';
 
 /** @type {import('vite').UserConfig} */
 export default mergeConfig(viteconf, {

vite.template.config.ts → vite.config.ts

@@ -1,5 +1,7 @@
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
+// Used from @storybook/react-vite dependencies
+import react from '@vitejs/plugin-react';
 
 import dts from 'vite-plugin-dts';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -21,9 +23,30 @@ export default defineConfig({
     sourcemap: true,
   },
   plugins: [
-    dts(),
-    visualizer({
-      filename: 'dist/stats.html',
+    react({
+      babel: {
+        plugins: [
+          [
+            'babel-plugin-styled-components',
+            {
+              ssr: false,
+              pure: true,
+              displayName: true,
+              fileName: false,
+            },
+          ],
+        ],
+      },
     }),
+    {
+      ...dts(),
+      apply: 'build',
+    },
+    {
+      ...visualizer({
+        filename: 'dist/stats.html',
+      }),
+      apply: 'build',
+    },
   ],
 });