Trouver le bon moteur css pour l'accompagnement du dsfr

[maxgfr]

La problématique, c'est qu'on souhaite garder les Server components.

Le probleme du css in js ou des libs comme styled-components ou emotion est que le process se fait au load du frontend. Donc c'est le client qui génère le css a la volée

Sauf que nous, on aimerait gérer ça directement au niveau de la compilation, et envoyer directement le css au client

Pour cela, nous sommes obligé de passer par du zero-runtime css

Cette issue a pour but de tester les différentes approches disponibles

[maxgfr]

l'existant

Pour info, styled-components a un css module mais il faut utiliser le use-client car ça se fait au niveau du front

[maxgfr]

panda css

En vrai c'est parfait, ça se rapproche pas mal de styled-components, on peut mettre le code dans le fichier du composant directement. Tout est parfait, le seul hic vient du fait que j'était obligé de lacher un !important sur un h2, comme si le css se générer avant même les règles dsfr et que c'était dsfr qui l'emportait... :(

A voir a voir

[maxgfr]

vanilla-extract

alors là c'est aussi du typage automatique, donc ça fait plais

Le seul inconvenient est qu'il faut le mettre dans un fichier à part, donc ça se rapproche de ce qu'on a sur l'actuel avec du sass. Bon par contre c'est typé, et ça ça fait plais

[maxgfr]

linaria

En gros, là c'est comme styled-component, et pandacss mais sans le typage, donc bon, je préfere partir sur panda perso. a voir si ça vaut le coup de faire un poc dessus aussi

import { css } from '@linaria/core';
import { modularScale, hiDPI } from 'polished';
import fonts from './fonts';

// Write your styles in `css` tag
const header = css`
  text-transform: uppercase;
  font-family: ${fonts.heading};
  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {
    font-size: ${modularScale(2.5)};
  }
`;

ou

import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: ${families.serif};
`;

const Container = styled.div`
  font-size: ${sizes.medium}px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

// Then use the resulting component
<Container color="#333">
  <Title>Hello world</Title>
</Container>;

Pour info, l'autocompletion fonctionne avec une extension et non le typescript, c'est donc vraiment pareil que styled-components