chore: convert tailwind to ts/esm

apps/explorer/tailwind.config.js

@@ -1,9 +1,9 @@
-const { join } = require('path');
+import { join } from 'path';
-const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
-const theme = require('../../libs/tailwindcss-config/src/theme');
+import { theme } from '@vegaprotocol/tailwindcss-config';
-const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+import { vegaCustomClasses } from '@vegaprotocol/tailwindcss-config';
 
-module.exports = {
+export default {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
     'libs/ui-toolkit/src/utils/shared.ts',

apps/governance/tailwind.config.js

@@ -1,9 +1,9 @@
-const { join } = require('path');
+import { join } from 'path';
-const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
-const theme = require('../../libs/tailwindcss-config/src/theme');
+import { theme } from '@vegaprotocol/tailwindcss-config';
-const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+import { vegaCustomClasses } from '@vegaprotocol/tailwindcss-config';
 
-module.exports = {
+export default {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
     'libs/ui-toolkit/src/utils/shared.ts',

apps/trading/tailwind.config.js

@@ -1,9 +1,9 @@
-const { join } = require('path');
+import { join } from 'path';
-const { createGlobPatternsForDependencies } = require('@nx/next/tailwind');
+import { createGlobPatternsForDependencies } from '@nx/next/tailwind';
-const theme = require('../../libs/tailwindcss-config/src/theme');
+import { theme } from '@vegaprotocol/tailwindcss-config';
-const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
+import { vegaCustomClasses } from '@vegaprotocol/tailwindcss-config';
 
-module.exports = {
+export default {
   content: [
     join(__dirname, 'pages/**/*.{js,ts,jsx,tsx}'),
     join(__dirname, 'client-pages/**/*.{js,ts,jsx,tsx}'),

libs/tailwindcss-config/.eslintrc.json

@@ -13,6 +13,18 @@
     {
       "files": ["*.js", "*.jsx"],
       "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/rollup.config.{js,ts,mjs,mts}"]
+          }
+        ]
+      }
     }
   ]
 }

libs/tailwindcss-config/.swcrc

@@ -0,0 +1,29 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "module": {
+    "type": "es6"
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$",
+    ".*.js$"
+  ]
+}

libs/tailwindcss-config/jest.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  displayName: 'tailwindcss-config',
-  preset: '../../jest.preset.js',
-  globals: {},
-  transform: {
-    '^.+\\.[tj]s$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-      },
-    ],
-  },
-  moduleFileExtensions: ['ts', 'js', 'html'],
-  coverageDirectory: '../../coverage/libs/tailwindcss-config',
-};

libs/tailwindcss-config/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/tailwindcss-config",
-  "version": "0.0.5"
+  "version": "0.0.6"
 }

libs/tailwindcss-config/project.json

@@ -5,28 +5,37 @@
   "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@nx/js:tsc",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
-      "format": ["esm", "cjs"],
       "options": {
         "outputPath": "dist/libs/tailwindcss-config",
-        "main": "libs/tailwindcss-config/src/index.js",
+        "main": "libs/tailwindcss-config/src/index.ts",
         "tsConfig": "libs/tailwindcss-config/tsconfig.lib.json",
-        "assets": ["libs/tailwindcss-config/*.md"]
+        "assets": [],
+        "project": "libs/tailwindcss-config/package.json",
+        "compiler": "swc",
+        "format": ["esm", "cjs"]
       }
     },
+    "publish": {
+      "command": "node tools/scripts/publish.mjs tailwindcss-config {args.ver} {args.tag}",
+      "dependsOn": ["build"]
+    },
     "lint": {
       "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["libs/tailwindcss-config/**/*.js"]
+        "lintFilePatterns": [
+          "libs/tailwindcss-config/**/*.ts",
+          "libs/tailwindcss-config/package.json"
+        ]
       }
     },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/libs/tailwindcss-config"],
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "libs/tailwindcss-config/jest.config.js"
+        "jestConfig": "libs/tailwindcss-config/jest.config.ts"
       }
     }
   },

libs/tailwindcss-config/src/index.js

@@ -1,11 +0,0 @@
-const theme = require('./theme');
-const themelite = require('./theme-lite');
-const vegaCustomClasses = require('./vega-custom-classes');
-const { VegaColours } = require('./vega-colours');
-
-module.exports = {
-  theme,
-  themelite,
-  plugins: [vegaCustomClasses],
-  VegaColours,
-};

libs/tailwindcss-config/src/index.ts

@@ -0,0 +1,4 @@
+export { theme } from './theme';
+export { themeLite } from './theme-lite';
+export { vegaCustomClasses } from './vega-custom-classes';
+export { VegaColours } from './vega-colours';

libs/tailwindcss-config/src/theme-lite.ts

@@ -1,8 +1,8 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+import defaultTheme from 'tailwindcss/defaultTheme';
-const colors = require('tailwindcss/colors');
+import colors from 'tailwindcss/colors';
-const theme = require('./theme');
+import { theme } from './theme';
 
-module.exports = {
+export const themeLite = {
   ...theme,
   colors: {
     ...theme.colors,

libs/tailwindcss-config/src/theme.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export const theme = {
   screens: {
     xs: '500px',
     sm: '640px',

libs/tailwindcss-config/src/vega-colours.ts

@@ -1,4 +1,4 @@
-const VegaColours = {
+export const VegaColours = {
   yellow: {
     DEFAULT: '#D7FB50',
     dark: '#9BE106',
@@ -32,7 +32,3 @@ const VegaColours = {
     400: '#626262',
   },
 };
-
-module.exports = {
-  VegaColours,
-};

libs/tailwindcss-config/src/vega-custom-classes-lite.ts

@@ -1,8 +1,8 @@
-const plugin = require('tailwindcss/plugin');
+import plugin from 'tailwindcss/plugin';
-const colors = require('tailwindcss/colors');
+import colors from 'tailwindcss/colors';
-const themelite = require('./theme-lite');
+import { themeLite } from './theme-lite';
 
-const vegaCustomClassesLite = plugin(function ({ addUtilities }) {
+export const vegaCustomClassesLite = plugin(function ({ addUtilities }) {
   addUtilities({
     '.percent-change-up::before': {
       content: ' ',
@@ -35,19 +35,19 @@ const vegaCustomClassesLite = plugin(function ({ addUtilities }) {
       textTransform: 'uppercase',
       textDecoration: 'none',
       backgroundColor: 'rgba(0, 143, 74, 0.1)',
-      border: `1px solid ${themelite.colors.darkerGreen}`,
+      border: `1px solid ${themeLite.colors.darkerGreen}`,
-      color: themelite.colors.darkerGreen,
+      color: themeLite.colors.darkerGreen,
       '&:hover': {
-        backgroundColor: themelite.colors.darkerGreen,
+        backgroundColor: themeLite.colors.darkerGreen,
         color: colors.white,
       },
       '&.selected': {
-        backgroundColor: themelite.colors.darkerGreen,
+        backgroundColor: themeLite.colors.darkerGreen,
         color: colors.white,
       },
     },
     '.buyButtonDark': {
-      color: themelite.colors.darkerGreen,
+      color: themeLite.colors.darkerGreen,
       '&:hover': {
         color: colors.black,
       },
@@ -59,19 +59,19 @@ const vegaCustomClassesLite = plugin(function ({ addUtilities }) {
       textTransform: 'uppercase',
       textDecoration: 'none',
       backgroundColor: 'rgba(255, 8, 126, 0.1)',
-      border: `1px solid ${themelite.colors.pink}`,
+      border: `1px solid ${themeLite.colors.pink}`,
-      color: themelite.colors.pink,
+      color: themeLite.colors.pink,
       '&:hover': {
         color: colors.white,
-        backgroundColor: themelite.colors.pink,
+        backgroundColor: themeLite.colors.pink,
       },
       '&.selected': {
-        backgroundColor: themelite.colors.pink,
+        backgroundColor: themeLite.colors.pink,
         color: colors.white,
       },
     },
     '.sellButtonDark': {
-      color: themelite.colors.pink,
+      color: themeLite.colors.pink,
       '&:hover': {
         color: colors.black,
       },
@@ -110,5 +110,3 @@ const vegaCustomClassesLite = plugin(function ({ addUtilities }) {
     // },
   });
 });
-
-module.exports = vegaCustomClassesLite;

libs/tailwindcss-config/src/vega-custom-classes.ts

@@ -1,8 +1,8 @@
-const plugin = require('tailwindcss/plugin');
+import plugin from 'tailwindcss/plugin';
-const colors = require('tailwindcss/colors');
+import colors from 'tailwindcss/colors';
-const theme = require('./theme');
+import { theme } from './theme';
 
-const vegaCustomClasses = plugin(function ({ addUtilities }) {
+export const vegaCustomClasses = plugin(function ({ addUtilities }) {
   addUtilities({
     '.calt': {
       fontFeatureSettings: "'calt'",
@@ -32,7 +32,7 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     '.dark .syntax-highlighter-wrapper .hljs': {
       background: theme.colors.vega.cdark[900],
       color: theme.colors.vega.green.DEFAULT,
-      border: 0,
+      border: '0',
     },
     '.syntax-highlighter-wrapper .hljs-literal': {
       color: theme.colors.vega.pink.DEFAULT,
@@ -60,5 +60,3 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     },
   });
 });
-
-module.exports = vegaCustomClasses;

libs/tailwindcss-config/tsconfig.spec.json

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
-  },
-  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
-}

tsconfig.base.json

@@ -47,7 +47,7 @@
       "@vegaprotocol/react-helpers": ["libs/react-helpers/src/index.ts"],
       "@vegaprotocol/smart-contracts": ["libs/smart-contracts/src/index.ts"],
       "@vegaprotocol/tailwindcss-config": [
-        "libs/tailwindcss-config/src/index.js"
+        "libs/tailwindcss-config/src/index.ts"
       ],
       "@vegaprotocol/tendermint": ["libs/tendermint/src/index.ts"],
       "@vegaprotocol/trades": ["libs/trades/src/index.ts"],