Merge pull request #294 from ably/tailwind-3-upgrade

[ACT-119] Tailwind 3 upgrade

.gitignore

@@ -6,3 +6,4 @@ vendor
 cypress/screenshots
 cypress/videos
 server_killer.rb
+yarn-error.log

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (12.0.0)
+    ably-ui (12.0.0.dev.9a060af)
       view_component (>= 2.33, < 2.50)
 
 GEM

README.md

@@ -80,7 +80,6 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
          1. Add postCSS import with `npm install postcss-import`
    1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
    1. Make sure you are installing v2 with `npm install -D [email protected]`
-   1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D [email protected]`
 3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
 4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
 

lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '12.0.0'
+  VERSION = '12.0.0.dev.9a060af'
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "12.0.0",
+  "version": "12.0.0-dev.9a060af",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -43,8 +43,7 @@
     "postcss-loader": "^4.0.4",
     "prettier": "^2.3.0",
     "svg-spritemap-webpack-plugin": "^3.7.1",
-    "tailwindcss": "^2.0.1",
-    "tailwindcss-filters": "^3.0.0",
+    "tailwindcss": "^3.3.6",
     "webpack": "^5.3.2",
     "webpack-cli": "^4.2.0",
     "yargs": "^16.2.0"

preview/Gemfile

@@ -37,7 +37,7 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '12.0.0', require: 'ably_ui'
+gem 'ably-ui', '12.0.0.dev.9a060af', require: 'ably_ui'
 
 # https://stackoverflow.com/questions/71191685/visit-psych-nodes-alias-unknown-alias-default-psychbadalias
 gem 'psych', '< 4'

preview/Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (12.0.0)
+    ably-ui (12.0.0.dev.9a060af)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.5.1)
       actionpack (= 6.0.5.1)
@@ -176,7 +176,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
-  ably-ui (= 12.0.0)
+  ably-ui (= 12.0.0.dev.9a060af)
   bootsnap (>= 1.4.2)
   byebug
   dotenv-rails

preview/babel.config.js

@@ -50,18 +50,8 @@ module.exports = function (api) {
       "@babel/plugin-syntax-dynamic-import",
       isTestEnv && "babel-plugin-dynamic-import-node",
       "@babel/plugin-transform-destructuring",
-      [
-        "@babel/plugin-proposal-class-properties",
-        {
-          loose: true,
-        },
-      ],
-      [
-        "@babel/plugin-proposal-object-rest-spread",
-        {
-          useBuiltIns: true,
-        },
-      ],
+      "@babel/plugin-transform-class-properties",
+      "@babel/plugin-transform-object-rest-spread",
       [
         "@babel/plugin-transform-runtime",
         {

preview/config/webpack/development.js

@@ -1,12 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || "development";
 
 const environment = require("./environment");
-const chokidar = require("chokidar");
-
-environment.config.devServer.before = (_, server) => {
-  chokidar
-    .watch(["app/views"])
-    .on("change", () => server.sockWrite(server.sockets, "content-changed"));
-};
 
 module.exports = environment.toWebpackConfig();

preview/config/webpack/environment.js

@@ -1,5 +1,40 @@
 const { environment } = require("@rails/webpacker");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
 
+environment.config.delete('node');
 environment.resolvedModules.append("preview", "preview/node_modules");
 
+// Use to inspect webpack config
+const log = environment => {
+  // eslint-disable-next-line no-extend-native
+  RegExp.prototype.toJSON = RegExp.prototype.toString;
+  // eslint-disable-next-line no-console
+  console.log(JSON.stringify(environment.toWebpackConfig(), null, ' '));
+};
+
+environment.plugins.delete('MiniCssExtract');
+
+environment.plugins.insert(
+  'MiniCssExtract',     
+  new MiniCssExtractPlugin({
+    filename: 'css/[name]-[contenthash:8].css',
+    chunkFilename: 'css/[name]-[contenthash:8].chunk.css'
+  },
+  { before: 'Manifest' }
+));
+
+
+const cssMiniCSSExtractLoader = environment.loaders.get('css').use.findIndex(obj => typeof obj === 'string' && obj.includes('mini-css-extract-plugin'));
+environment.loaders.get('css').use[cssMiniCSSExtractLoader] = MiniCssExtractPlugin.loader;
+
+const cssPostCSSLoader = environment.loaders.get('css').use.find(obj => obj.loader === 'postcss-loader');
+cssPostCSSLoader.options = {
+  postcssOptions: { config: path.resolve(__dirname, '..', '..', 'postcss.config.js') },
+  sourceMap: true,
+};
+
+const sassMiniCSSExtractLoader = environment.loaders.get('sass').use.findIndex(obj => typeof obj === 'string' && obj.includes('mini-css-extract-plugin'));
+environment.loaders.get('sass').use[sassMiniCSSExtractLoader] = MiniCssExtractPlugin.loader;
+
 module.exports = environment;

preview/package.json

@@ -2,26 +2,32 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "12.0.0",
+    "@ably/ui": "12.0.0-dev.9a060af",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.4.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "postcss": "^7",
+    "postcss": "^8.4.31",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "tailwindcss-filters": "^3.0.0"
+    "tailwindcss": "3.3.5"
   },
   "engines": {
     "node": "^16.14.2",
     "yarn": "^1.22.4"
   },
   "version": "0.1.0",
   "devDependencies": {
-    "@tailwindcss/postcss7-compat": "^2.0.3",
-    "autoprefixer": "^9",
-    "webpack-dev-server": "^3.11.0"
+    "@babel/plugin-transform-class-properties": "^7.23.3",
+    "@babel/plugin-transform-object-rest-spread": "^7.23.4",
+    "autoprefixer": "^10.4.16",
+    "css-loader": "^6.8.1",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss-loader": "7.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }

preview/tailwind.config.js

@@ -2,19 +2,17 @@ const extendConfig = require("@ably/ui/tailwind.extend.js");
 
 module.exports = extendConfig((ablyUIConfig) => ({
   ...ablyUIConfig,
-  purge: {
-    content: [
-      "./app/views/**/*.html.erb",
-      "./app/assets/**/*.js",
-      "./app/assets/**/*.css",
-      "./app/javascript/**/*.js",
-      "./app/javascript/**/*.css",
-      "./app/components/**/*.html.erb",
-      "./app/components/**/*.rb",
-      ...ablyUIConfig.purge.content,
-    ],
-    options: {
-      ...ablyUIConfig.purge.options,
-    },
-  },
+  content: [
+    "./app/views/**/*.html.erb",
+    "./app/assets/**/*.js",
+    "./app/assets/**/*.css",
+    "./app/javascript/**/*.js",
+    "./app/javascript/**/*.css",
+    "./app/components/**/*.html.erb",
+    "./app/components/**/*.rb",
+    ...ablyUIConfig.content,
+  ],
+  safelist: [
+    ...ablyUIConfig.safelist,
+  ]
 }));