search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
823 stars 39 forks source link

Allow import customisation #154

Open isshesure opened 5 months ago

isshesure commented 5 months ago

Summary

Allow the styles import to be customised, so that component libraries can abstract away the underlying styling solution.

Examples

const { withPigment } = require('@pigment-css/nextjs-plugin');

module.exports = withPigment({
  importName: '@mycompany/styles.css'
})(nextJsConfig);

Then:

 import type { Metadata } from 'next';
+import '@mycompany/styles.css';

 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 };

 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>{props.children}</body>
     </html>
   );
 }

Then libraries can export their own plugin:

export const withMyCompanyLibrary = withPigment({ importName: '@mycompany/styles.css' })

Motivation

Avoid exposing Pigment CSS usage as the styling mechanism for those libraries that do not use other Pigment CSS consumer facing features.

Search keywords: import customisation

brijeshb42 commented 5 months ago

Sounds like a nice addition to the current options. I'll mark this to be taken into consideration before our stable release.