chore(POC): try to use css in DS

.changeset/short-yaks-smile.md

@@ -0,0 +1,5 @@
+---
+"@talend/scripts-core": minor
+---
+
+feat: add support for css

docs/adr-transition-from-scss-to-css.md

@@ -0,0 +1,44 @@
+# Transition from scss to CSS [Draft]
+
+## Context
+
+Our current use of SCSS is primarily for nesting capabilities, a feature which we have found to be less essential over time.
+The SCSS compilation step is adding significant overhead to our build process, and the advanced features of SASS/SCSS are largely underutilized in our projects. Simplifying our styling workflow by using plain CSS could decrease compilation time and streamline our development process.
+
+## Decision
+
+We will start a transition from using SCSS to using plain CSS in our codebase. This decision involves rewriting existing SCSS files into CSS and updating our build and development processes to remove the SASS compiler.
+
+## Consequences
+
+- Reduced Compilation Time: Removing the SCSS compilation step will decrease build times, making our development and deployment processes faster and more efficient.
+
+- Simplification of Code: Transitioning to CSS simplifies our stylesheets by eliminating unnecessary complexities and focusing on essential styling.
+
+- Ease of Maintenance: CSS is universally understood by front-end developers without the need for additional knowledge of SASS/SCSS syntax, which can make our codebase more accessible to new team members.
+
+- Potential Loss of Features: While this change will simplify our toolchain, we will lose some of the features provided by SCSS, such as variables and mixins. However, given our current usage primarily involves nesting, this loss is considered manageable.
+
+- Rewriting Effort: Existing SCSS files need to be carefully rewritten in CSS. This task requires a one-time development effort to ensure that styles remain consistent and functional across the platform.
+
+## Implementation Plan
+
+- Provide a tool to make it possible.
+
+- Iteration will be made over the code every time a component is modified.
+
+- Gradual Refactoring: Implement the transition in phases, starting with less complex stylesheets. This approach minimizes risk by allowing iterative testing and adjustment.
+  Update Build Process: Modify the build tools and processes to remove SASS compilers and integrate with the new CSS-based workflow.
+
+- Documentation and Training: Update project documentation to reflect the new styling practices and conduct training sessions for the development team on effective CSS management without SCSS features.
+
+- By documenting this decision in this ADR, we ensure that the rationale and implications are clear and well-communicated to all stakeholders involved. This change aligns with our goals of streamlining our development processes and maintaining a robust and efficient codebase.
+
+## Tips
+
+A [script](https://gist.github.com/jmfrancois/16b52b313d35eef589fa2935431d4b70) has been created for this occasion
+
+`node sassToCss.js /home/jmfrancois/ui/packages/design-system/src /home/jmfrancois/ui/packages/design-system/src`
+
+Before applying this script you can use this regexp
+`var\(([a-z-]*), (.*)\)` to remove the default value in `_tokens.scss` before applying the script

packages/design-system/css.js

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+const fs = require('fs');
+const sass = require('sass');
+const path = require('path');
+const pathToFileURL = require('url').pathToFileURL;
+
+const CWD = process.cwd();
+const nodeModulesPath = path.join(CWD, 'node_modules');
+const SRC_PATH = process.argv[2]; // /home/user/project/src
+const TARGET_PATH = process.argv[3]; // /home/user/project/lib
+
+function getPkgRoot(filename) {
+	const dir = path.dirname(filename);
+	if (fs.existsSync(path.join(dir, 'package.json'))) {
+		return path.join(dir, '/');
+	}
+	return getPkgRoot(dir);
+}
+
+function getInfo(importPath) {
+	let scope, name, rest, mainPath;
+	if (importPath.startsWith('@')) {
+		[scope, name, ...rest] = importPath.split('/');
+		mainPath = require.resolve(`${scope}/${name}`);
+	} else {
+		[name, ...rest] = importPath.split('/');
+		mainPath = require.resolve(name);
+	}
+	const info = {
+		base: getPkgRoot(mainPath),
+		url: rest.join('/'),
+	};
+	return info;
+}
+
+function transform(filename) {
+	const scssFileDirectory = path.dirname(filename);
+	let content;
+	let target = filename.replace(SRC_PATH, TARGET_PATH);
+
+	if (filename.match(/\/_.*\.scss/) === null) {
+		//compile
+		// https://sass-lang.com/documentation/js-api/interfaces/Options
+		const opts = {
+			sourceMap: true,
+			loadPaths: [nodeModulesPath, scssFileDirectory, CWD],
+			importers: [
+				{
+					findFileUrl(url) {
+						// Load paths only support relative URLs.
+						if (url.startsWith('~')) {
+							const info = getInfo(url.replace('~', ''));
+							// console.log(new URL(info.url, pathToFileURL(info.base)));
+							return new URL(info.url, pathToFileURL(info.base));
+						}
+						return new URL(url, pathToFileURL(loadPath));
+					},
+				},
+			],
+		};
+		const sassResult = sass.compile(filename, { ...opts });
+		content = sassResult.css;
+		target = target.replace('.scss', '.css');
+		// console.log('transform', filename, target);
+	} else {
+		content = fs.readFileSync(filename).toString();
+		// console.log('copy', filename, target);
+	}
+	if (!fs.existsSync(path.dirname(target))) {
+		fs.mkdirSync(path.dirname(target), { recursive: true });
+	}
+	fs.writeFileSync(target, content);
+}
+
+function findAllSrcFiles(current = SRC_PATH, buff = []) {
+	return fs.readdirSync(current, { withFileTypes: true }).reduce((acc, info) => {
+		if (info.isDirectory()) {
+			return acc.concat(findAllSrcFiles(path.join(current, info.name)));
+		}
+		if (info.name.endsWith('.scss')) {
+			acc.push(path.join(current, info.name));
+		}
+		return acc;
+	}, buff);
+}
+const result = findAllSrcFiles();
+
+result.forEach(filename => {
+	transform(filename);
+});

packages/design-system/custom.d.ts

@@ -9,3 +9,8 @@ declare module '*.scss' {
 	const contents: Record<string, string>;
 	export default contents;
 }
+
+declare module '*.css' {
+	const contents: Record<string, string>;
+	export default contents;
+}

packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.css

@@ -0,0 +1,20 @@
+.panelWrapper {
+  box-shadow: var(--coral-elevation-shadow-neutral-s);
+  overflow: hidden;
+}
+.panelWrapper__alone {
+  border-radius: var(--coral-radius-s);
+}
+.panelWrapper__first {
+  border-radius: var(--coral-radius-s) var(--coral-radius-s) 0 0;
+}
+.panelWrapper__last {
+  border-radius: 0 0 var(--coral-radius-s) var(--coral-radius-s);
+}
+.panelWrapper__notLast {
+  border-bottom: var(--coral-border-s-solid) var(--coral-color-neutral-border-weak);
+}
+
+.panelContent {
+  padding: var(--coral-spacing-xs);
+}

packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx

@@ -5,11 +5,10 @@ import classNames from 'classnames';
 import { DataAttributes } from '../../../types';
 import { useId } from '../../../useId';
 import { variants } from '../../Status/Primitive/StatusPrimitive';
+import styles from './CollapsiblePanel.module.css';
 import CollapsiblePanelHeader from './CollapsiblePanelHeader';
 import { PanelHeaderAction } from './types';
 
-import styles from './CollapsiblePanel.module.scss';
-
 type CollapsiblePanelCommonPropsType = {
 	children: ReactChild;
 	managed?: boolean;

packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.css

@@ -0,0 +1,49 @@
+.headerWrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: var(--coral-spacing-xxs);
+  background-color: var(--coral-color-accent-background-weak);
+  width: 100%;
+  border: none;
+  min-height: var(--coral-sizing-l);
+  padding: var(--coral-spacing-xs);
+}
+.headerWrapper__size-s {
+  min-height: var(--coral-sizing-s);
+  padding: var(--coral-spacing-xxs);
+}
+.headerWrapper__clickable {
+  cursor: pointer;
+}
+.headerWrapper__clickable:hover {
+  background-color: var(--coral-color-accent-background-weak-hover);
+}
+.headerWrapper__clickable:active {
+  background-color: var(--coral-color-accent-background-weak-active);
+}
+.headerWrapper > .headerTitle {
+  flex-grow: 1;
+}
+.headerWrapper > *:not(.headerTitle) {
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  font: var(--coral-heading-m);
+  text-align: left;
+}
+.headerTitle__size-s {
+  font: var(--coral-heading-s);
+}
+.headerTitle__disabled {
+  color: var(--coral-color-neutral-text-disabled);
+}
+
+.iconWrapper {
+  width: var(--coral-sizing-s);
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}

packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx

@@ -10,10 +10,9 @@ import { SizedIcon } from '../../Icon';
 import { StackHorizontal } from '../../Stack';
 import { Status } from '../../Status';
 import { variants } from '../../Status/Primitive/StatusPrimitive';
+import styles from './CollapsiblePanelHeader.module.css';
 import { PanelHeaderAction } from './types';
 
-import styles from './CollapsiblePanelHeader.module.scss';
-
 export type CollapsiblePanelHeaderPropsType = {
 	controlId: string;
 	sectionId: string;

packages/design-system/src/components/Badge/button/BadgeButton.module.css

@@ -0,0 +1,19 @@
+.badge__button {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+  border-radius: var(--coral-radius-s);
+  font: var(--coral-paragraph-m-bold);
+  height: var(--coral-sizing-xs);
+  padding: var(--coral-spacing-xxs) var(--coral-spacing-xs);
+  color: var(--coral-color-accent-text);
+}
+.badge__button:hover {
+  background: var(--coral-color-accent-background-weak-hover);
+  color: var(--coral-color-accent-text-strong-hover);
+}
+.badge__button:active {
+  background: var(--coral-color-accent-background-weak-active);
+  color: var(--coral-color-accent-text-strong-active);
+}

packages/design-system/src/components/Badge/button/BadgeButton.tsx

@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import { DataAttributes } from 'src/types';
 
 import { Clickable } from '../../Clickable/Clickable';
-
-import styles from './BadgeButton.module.scss';
+import styles from './BadgeButton.module.css';
 
 type BadgeButtonProps = {
 	/**