osrd-project: create tailwind preset at root

osrd-project: create base rollup.config generator osrd-project: add base postcss.config
OpenRailAssociation · Apr 26, 2024 · 26c16e5 · 26c16e5
1 parent ff77d09
commit 26c16e5
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 147 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,10 +29,13 @@
     "lerna": "lerna",
     "lerna:publish": "lerna publish from-package --no-private --yes"
   },
+  "type": "module",
   "devDependencies": {
     "@rollup/plugin-eslint": "^9.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-postcss": "^4.0.2",
     "@types/react": "^18.2.40",
     "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^7.3.1",

diff --git a/postcss-base.config.cjs b/postcss-base.config.cjs
@@ -0,0 +1,16 @@
+module.exports = function generateBasePostcssConfig(
+  tailwindConfigRelativePath = './tailwind.config.js'
+) {
+  return {
+    plugins: {
+      'postcss-import': {},
+      'postcss-assets': {},
+      'tailwindcss/nesting': {},
+      tailwindcss: { config: tailwindConfigRelativePath },
+      autoprefixer: {},
+      'postcss-preset-env': {
+        features: { 'nesting-rules': false },
+      },
+    },
+  };
+};
diff --git a/rollup-base.config.js b/rollup-base.config.js
@@ -0,0 +1,37 @@
+import eslint from '@rollup/plugin-eslint';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import livereload from 'rollup-plugin-livereload';
+import postcss from 'rollup-plugin-postcss';
+import process from 'process';
+
+const formats = ['esm'];
+const isDev = process.env.NODE_ENV === 'development';
+
+/** @type {import("rollup").RollupOptions} */
+const generateRollupBaseConfig = (projectName, external) => ({
+  input: 'src/index.ts',
+  output: formats.map((format) => ({
+    file: `dist/index.${format}.js`,
+    format,
+    name: projectName,
+    sourcemap: true,
+  })),
+  plugins: [
+    eslint(),
+    typescript(),
+    postcss({
+      extract: 'theme.css',
+      sourceMap: true,
+      plugins: [],
+    }),
+    terser(),
+    isDev &&
+      livereload({
+        watch: 'dist',
+      }),
+  ],
+  external,
+});
+
+export default generateRollupBaseConfig;
diff --git a/tailwind-preset.js b/tailwind-preset.js
@@ -0,0 +1,100 @@
+export default {
+  theme: {
+    extend: {
+      colors: {
+        transparent: 'transparent',
+        black: {
+          1: '#00000003',
+          2: '#00000005',
+          25: '#00000040',
+          75: '#000000BF',
+          50: '#94918E',
+          100: '#000000',
+        },
+        white: {
+          50: '#FFFFFF80',
+          75: '#FFFFFFBF',
+          100: '#FFFFFF',
+        },
+        ambientA: {
+          5: '#F6F8F9',
+          10: '#EFF3F5',
+          15: '#E9EFF2',
+        },
+        ambientB: {
+          5: '#FAF9F5',
+          10: '#F7F6EE',
+          15: '#F2F0E4',
+        },
+        ambientC: {
+          5: '#F6F9F6',
+          10: '#F0F4F1',
+          15: '#EAF0EB',
+        },
+        ambientD: {
+          5: '#F8F7FD',
+          10: '#F4F3FC',
+          15: '#EFEDF7',
+        },
+        grey: {
+          5: '#F5F5F5',
+          10: '#EBEBEA',
+          20: '#D3D1CF',
+          30: '#B6B2AF',
+          40: '#94918E',
+          50: '#797671',
+          60: '#5C5955',
+          70: '#494641',
+          80: '#312E2B',
+          90: '#1F1B17',
+        },
+        primary: {
+          5: '#E3EDFC',
+          10: '#C4DAF5',
+          20: '#98C0F5',
+          30: '#72A8F7',
+          40: '#3C8AFF',
+          50: '#256AFA',
+          60: '#1844EF',
+          70: '#201EDE',
+          80: '#1F0F96',
+          90: '#180F47',
+        },
+        info: {
+          5: '#E6F7FF',
+          30: '#70C1E5',
+          60: '#216482',
+          80: '#053348',
+        },
+        success: {
+          5: '#E6F7EE',
+          30: '#3CCA80',
+          60: '#0B723C',
+          80: '#003F1E',
+        },
+        warning: {
+          5: '#FDF5E1',
+          30: '#EAA72B',
+          60: '#7D521E',
+          80: '#432807',
+        },
+        error: {
+          5: '#FFEEED',
+          30: '#FF6868',
+          60: '#D91C1C',
+          80: '#6B0000',
+        },
+        highlight: {
+          30: '#FFF700',
+          50: '#E8D900',
+        },
+      },
+    },
+    fontFamily: {
+      sans: ['IBM Plex sans', 'sans-serif'],
+      serif: ['IBM Plex serif', 'serif'],
+      mono: ['IBM Plex mono', 'monospace'],
+    },
+  },
+  plugins: [],
+};
diff --git a/ui-core/postcss.config.cjs b/ui-core/postcss.config.cjs
@@ -1,12 +1,3 @@
-module.exports = {
-  plugins: {
-    'postcss-import': {},
-    'postcss-assets': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: { config: './tailwind.config.js' },
-    autoprefixer: {},
-    'postcss-preset-env': {
-      features: { 'nesting-rules': false },
-    },
-  },
-};
+const generateBasePostcssConfig = require('../postcss-base.config.cjs');
+
+module.exports = generateBasePostcssConfig();
diff --git a/ui-core/rollup.config.js b/ui-core/rollup.config.js
@@ -1,35 +1,2 @@
-import eslint from '@rollup/plugin-eslint';
-import terser from '@rollup/plugin-terser';
-import typescript from '@rollup/plugin-typescript';
-import livereload from 'rollup-plugin-livereload';
-import postcss from 'rollup-plugin-postcss';
-import process from 'process';
-
-const formats = ['esm'];
-const isDev = process.env.NODE_ENV === 'development';
-
-/** @type {import("rollup").RollupOptions} */
-export default {
-  input: 'src/index.ts',
-  output: formats.map((format) => ({
-    file: `dist/index.${format}.js`,
-    format,
-    name: 'osrdcore',
-    sourcemap: true,
-  })),
-  plugins: [
-    eslint(),
-    typescript(),
-    postcss({
-      extract: 'theme.css',
-      sourceMap: true,
-      plugins: [],
-    }),
-    terser(),
-    isDev &&
-      livereload({
-        watch: 'dist',
-      }),
-  ],
-  external: ['react'],
-};
+import generateBaseRollupConfig from '../rollup-base.config.js';
+export default generateBaseRollupConfig('osrdcore', ['react']);
diff --git a/ui-core/tailwind.config.js b/ui-core/tailwind.config.js
@@ -1,103 +1,6 @@
+import osrdUiPreset from '../tailwind-preset.js';
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
+  presets: [osrdUiPreset],
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
-
-  theme: {
-    extend: {
-      colors: {
-        transparent: 'transparent',
-        black: {
-          1: '#00000003',
-          2: '#00000005',
-          25: '#00000040',
-          75: '#000000BF',
-          50: '#94918E',
-          100: '#000000',
-        },
-        white: {
-          50: '#FFFFFF80',
-          75: '#FFFFFFBF',
-          100: '#FFFFFF',
-        },
-        ambientA: {
-          5: '#F6F8F9',
-          10: '#EFF3F5',
-          15: '#E9EFF2',
-        },
-        ambientB: {
-          5: '#FAF9F5',
-          10: '#F7F6EE',
-          15: '#F2F0E4',
-        },
-        ambientC: {
-          5: '#F6F9F6',
-          10: '#F0F4F1',
-          15: '#EAF0EB',
-        },
-        ambientD: {
-          5: '#F8F7FD',
-          10: '#F4F3FC',
-          15: '#EFEDF7',
-        },
-        grey: {
-          5: '#F5F5F5',
-          10: '#EBEBEA',
-          20: '#D3D1CF',
-          30: '#B6B2AF',
-          40: '#94918E',
-          50: '#797671',
-          60: '#5C5955',
-          70: '#494641',
-          80: '#312E2B',
-          90: '#1F1B17',
-        },
-        primary: {
-          5: '#E3EDFC',
-          10: '#C4DAF5',
-          20: '#98C0F5',
-          30: '#72A8F7',
-          40: '#3C8AFF',
-          50: '#256AFA',
-          60: '#1844EF',
-          70: '#201EDE',
-          80: '#1F0F96',
-          90: '#180F47',
-        },
-        info: {
-          5: '#E6F7FF',
-          30: '#70C1E5',
-          60: '#216482',
-          80: '#053348',
-        },
-        success: {
-          5: '#E6F7EE',
-          30: '#3CCA80',
-          60: '#0B723C',
-          80: '#003F1E',
-        },
-        warning: {
-          5: '#FDF5E1',
-          30: '#EAA72B',
-          60: '#7D521E',
-          80: '#432807',
-        },
-        error: {
-          5: '#FFEEED',
-          30: '#FF6868',
-          60: '#D91C1C',
-          80: '#6B0000',
-        },
-        highlight: {
-          30: '#FFF700',
-          50: '#E8D900',
-        },
-      },
-    },
-    fontFamily: {
-      sans: ['IBM Plex sans', 'sans-serif'],
-      serif: ['IBM Plex serif', 'serif'],
-      mono: ['IBM Plex mono', 'monospace'],
-    },
-  },
-  plugins: [],
 };