Surfacing Styles

[HamzaAmar]

Hi @ryanflorence @mjackson @kentcdodds and Thank you so much for this framework I think this one of the best SSR framework that solve a lot of problems I already struggle with them and have best improvement in DX UX

This question I have is about How to improve DX when we want to work with surfacing styles Because I think its a little hard when we have a lot of shared components that we want to surface to the global style sometimes more than 40 components
the question is if we can do something in the components level to surface this component style to the (route page , or global shared style) like the exemple below

export const links = () => [
  { rel: "stylesheet", href: styles,  to: "where we want to put the style" }
];

or we can add new type of links like injectLink that take an array of arrays like the example below only work on components level if someone want to add it in page route level a (warning or error) appear from eslint or realtime
inside the array we have another array that has two values string or object depend on the array we know when we want to inject the link the string is the path to the file or page route we want to inject the styles and the object to be like that { rel: "stylesheet", href: styles }

• If we have string is the first parameters we need to inject the style in first lines of the files (for the cascade )
• if we put the string in the second value of the array that mean we want to inject style in the last lines in the files

export const injectLink = () => [
 [ ~/styles/shared' ,    { rel: "stylesheet", href: styles }  ],
];

export const injectLink = () => [
 [ '~/styles/about.css' ,    { rel: "stylesheet", href: styles }  ],
 [ '~/styles/home.css' ,    { rel: "stylesheet", href: styles }  ],
 [{ rel: "stylesheet", href: styles }  , ' ~/styles/contact.css' ],

];

and we can do that in compile time with changes to the className that we add to all the class something like what bem do to make className unique if we work with button components with prefix button__ for all the class inside button.css

[kentcdodds]

Thanks for your suggestions @HamzaAmar!

I think the real ask here is: "I want to write component-level CSS" which is a problem we're actively working on solving right now. @mjackson is tasked with it ultimately and I believe his current plan is to finish some experimental work @chaance did on supporting CSS Modules in Remix. I believe that should solve the problem you're talking about. But we're still evaluating.

[HamzaAmar]

Thank you so much @kentcdodds

[HamzaAmar]

Yeah with the combination of css modules and surfacing style It's solve the problem I have thanks