feat: tailwindcss (#786)

* feat: tailwindcss * feat: build tailwind styles in packages separatly * refactor: update gitignore * refactor: js -> ts * fix: pass test? * fix: add needed packages
equinor · Nov 28, 2023 · 1f8b5ef · 1f8b5ef
1 parent e7eb338
commit 1f8b5ef
Show file tree

Hide file tree

Showing 19 changed files with 108 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,7 @@ venv
 
 .DS_Store
 __pycache__
-*.pyc
+*.pyc
+
+packages/dm-core/build.css
+packages/dm-core-plugins/build.css
diff --git a/example/index.html b/example/index.html
@@ -2,21 +2,21 @@
 <html lang="en">
   <head>
     <link
-      rel="stylesheet"
       href="https://cdn.eds.equinor.com/font/equinor-font.css"
+      rel="stylesheet"
     />
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <meta content="#000000" name="theme-color" />
     <meta
-      name="description"
       content="Web site created using create-react-app"
+      name="description"
     />
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="src/index.tsx"></script>
+    <script src="src/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/example/package.json b/example/package.json
@@ -16,7 +16,7 @@
     "tsconfig-paths-webpack-plugin": "^4.0.0"
   },
   "devDependencies": {
-    "@types/node": "^16.11.58",
+    "@types/node": "^20.10.0",
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.7",
     "@types/react-plotly.js": "^2.6.0",
@@ -25,9 +25,12 @@
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.42.0",
     "eslint-plugin-react": "^7.33.2",
+    "postcss": "^8.4.31",
     "serve": "14.2.1",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
     "vite-plugin-checker": "^0.6.2",

diff --git a/example/postcss.config.ts b/example/postcss.config.ts
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -7,6 +7,7 @@ import {
   useDocument,
 } from '@development-framework/dm-core'
 import React from 'react'
+import './main.css'
 
 function App() {
   const idReference: string = `${import.meta.env.VITE_DATA_SOURCE}/$${

diff --git a/example/src/main.css b/example/src/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/example/tailwind.config.ts b/example/tailwind.config.ts
@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './index.html',
+    './src/**/*.{ts,js,tsx,jsx}',
+    '../packages/dm-core/src/**/*.{ts,js,tsx,jsx}',
+    '../packages/dm-core-plugins/src/**/*.{ts,js,tsx,jsx}',
+  ],
+  theme: {
+    fontFamily: {
+      sans: ['Equinor', 'sans-serif'],
+    },
+    extend: {
+      colors: {
+        current: 'currentColor',
+        'equinor-green': '#007079',
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -31,7 +31,8 @@
     "jsx": "react-jsx",
     "types": [
       "vite/client",
-      "vite-plugin-svgr/client"
+      "vite-plugin-svgr/client",
+      "node"
     ]
   },
   "include": [

diff --git a/jest.config.base.js b/jest.config.base.js
@@ -23,4 +23,7 @@ module.exports = {
     },
   },
   coverageReporters: ['json-summary', 'text', 'lcov'],
+  moduleNameMapper: {
+    '\\.(css|less)$': '<rootDir>/styleMock.js',
+  },
 }
diff --git a/packages/dm-core-plugins/package.json b/packages/dm-core-plugins/package.json
@@ -15,6 +15,7 @@
     "mermaid": "^10.0.0",
     "react-hook-form": "^7.48.2",
     "react-toastify": "^9.1.3",
+    "ts-node": "^10.9.1",
     "yaml": "^2.3.2"
   },
   "devDependencies": {
@@ -25,16 +26,20 @@
     "@types/jest": "^29.5.0",
     "@types/js-yaml": "^4.0.5",
     "@types/luxon": "^3.3.3",
+    "@types/node": "^20.10.0",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
+    "autoprefixer": "^10.4.16",
     "eslint-plugin-react": "^7.33.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "postcss": "^8.4.31",
     "react-router-dom": ">=5.1.2",
     "shx": " 0.3.4",
+    "tailwindcss": "^3.3.5",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.3.1",
     "typescript": "^5.1.6"
@@ -52,7 +57,8 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "prebuild": "shx rm -rf dist",
-    "build": "tsc",
+    "build": "tsc && npx tailwindcss -o build.css --minify && yarn copy-css-file",
+    "copy-css-file": "cp ./build.css ./dist/",
     "test": "jest test",
     "test-watch": "jest test --watchAll"
   }

diff --git a/packages/dm-core-plugins/src/index.tsx b/packages/dm-core-plugins/src/index.tsx
@@ -1,5 +1,6 @@
 import { TUiPluginMap } from '@development-framework/dm-core'
 import { lazy } from 'react'
+import '../build.css'
 
 export { WidgetProvider } from './form/context/WidgetContext'
 

diff --git a/packages/dm-core-plugins/src/main.css b/packages/dm-core-plugins/src/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/dm-core-plugins/styleMock.js b/packages/dm-core-plugins/styleMock.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/packages/dm-core-plugins/tailwind.config.ts b/packages/dm-core-plugins/tailwind.config.ts
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{ts,js,tsx,jsx}'],
+  theme: {
+    fontFamily: {
+      sans: ['Equinor', 'sans-serif'],
+    },
+    extend: {
+      colors: {
+        current: 'currentColor',
+        'equinor-green': '#007079',
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/packages/dm-core/package.json b/packages/dm-core/package.json
@@ -18,22 +18,27 @@
     "luxon": "^3.4.3",
     "react-icons": "4.10.1",
     "react-oauth2-code-pkce": "^1.10.1",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "ts-node": "^10.9.1"
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
     "@types/dompurify": "^3.0.4",
     "@types/jest": "^29.5.3",
     "@types/luxon": "^3.3.3",
+    "@types/node": "^20.10.0",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
+    "autoprefixer": "^10.4.16",
     "eslint-plugin-react": "^7.33.2",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
+    "postcss": "^8.4.31",
     "shx": " 0.3.4",
+    "tailwindcss": "^3.3.5",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.3.1",
     "typescript": "^5.1.6"
@@ -47,8 +52,8 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "prebuild": "shx rm -rf dist",
-    "build": "tsc && yarn copy-css-file",
-    "copy-css-file": "cp ./src/styles/main.css ./dist/",
+    "build": "tsc && npx tailwindcss -o build.css && yarn copy-css-file",
+    "copy-css-file": "cp ./build.css ./dist/ && cp ./src/styles/main.css ./dist/",
     "test": "jest test"
   }
 }
diff --git a/packages/dm-core/src/index.tsx b/packages/dm-core/src/index.tsx
@@ -1,3 +1,5 @@
+import '../build.css'
+
 export * from './hooks'
 
 export { AuthContext, AuthProvider } from 'react-oauth2-code-pkce'

diff --git a/packages/dm-core/src/styles/main.css b/packages/dm-core/src/styles/main.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   margin: 0;

diff --git a/packages/dm-core/tailwind.config.ts b/packages/dm-core/tailwind.config.ts
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{ts,js,tsx,jsx}'],
+  theme: {
+    fontFamily: {
+      sans: ['Equinor', 'sans-serif'],
+    },
+    extend: {
+      colors: {
+        current: 'currentColor',
+        'equinor-green': '#007079',
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/styleMock.js b/styleMock.js
@@ -0,0 +1 @@
+module.exports = {}