convert ugly playground to Tailwind (stimulus-use#76)

package.json

@@ -31,9 +31,11 @@
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-modules": "^0.1.4",
     "agadoo": "^2.0.0",
+    "autoprefixer": "^10.0.4",
     "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
     "chai-dom": "^1.8.2",
+    "css-loader": "^5.0.1",
     "cypress": "^5.4.0",
     "html2js": "^0.2.0",
     "intersection-observer": "^0.11.0",
@@ -55,11 +57,15 @@
     "microbundle": "^0.12.3",
     "mocha": "^8.1.3",
     "np": "^6.5.0",
+    "postcss": "^8.1.10",
+    "postcss-loader": "^4.1.0",
     "rimraf": "^3.0.2",
     "sinon": "^9.0.3",
     "sinon-chai": "^3.5.0",
     "sourcemap": "^0.1.0",
     "stimulus": "^1.1.1",
+    "style-loader": "^2.0.0",
+    "tailwindcss": "^2.0.1",
     "ts-loader": "^8.0.3",
     "typescript": "^3.9.7",
     "webpack": "^4.44.1",

playground/controllers/cart_controller.js

@@ -2,23 +2,18 @@ import { ApplicationController } from 'stimulus-use'
 
 export default class extends ApplicationController {
   static targets = ['counterView']
-  counter = 0
+
+  initialize() {
+    this.counter = this.data.has('counter') ? parseInt(this.data.get('counter')) : 0
+  }
 
   refreshTotal(e) {
     this.counter += e.detail.quantity
-    console.log(e.detail)
+    this.renderCounter()
   }
 
   renderCounter() {
+    this.counterViewTarget.classList.toggle('hidden', this.counter <= 0)
     this.counterViewTarget.textContent = this.counter
   }
-
-  set counter(value) {
-    this.data.set('counter', value)
-    this.renderCounter()
-  }
-
-  get counter() {
-    return parseInt(this.data.get('counter'))
-  }
 }

playground/controllers/idle_controller.js

@@ -10,15 +10,19 @@ export default class extends Controller {
 
   away(event) {
     this.statusTarget.textContent = 'away'
-    this.isIdleTarget.textContent = this.isIdle
+    if (this.hasIsIdleTarget) {
+      this.isIdleTarget.textContent = this.isIdle
+    }
   }
 
   back(event) {
     this.statusTarget.textContent = 'active'
-    this.isIdleTarget.textContent = this.isIdle
+    if (this.hasIsIdleTarget) {
+      this.isIdleTarget.textContent = this.isIdle
+    }
   }
 
   log(event) {
-    console.log("state changed", event)
+    console.log('state changed', event)
   }
 }

playground/controllers/resize_controller.js

@@ -5,15 +5,15 @@ export default class extends Controller {
   static targets = ['width', 'height']
 
   options = {
-    eventPrefix: 'card',
+    eventPrefix: 'card'
   }
 
   connect() {
     useResize(this, this.options)
   }
 
   resize({ width, height }) {
-    this.widthTarget.textContent = width
-    this.heightTarget.textContent = height
+    this.widthTarget.textContent = Math.round(width)
+    this.heightTarget.textContent = Math.round(height)
   }
 }

playground/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

playground/index.js

@@ -5,3 +5,5 @@ import { definitionsFromContext } from 'stimulus/webpack-helpers'
 const application = Application.start()
 const context = require.context('./controllers', true, /\.js$/)
 application.load(definitionsFromContext(context))
+
+import './index.css'

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

tailwind.config.js

@@ -0,0 +1,31 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        green: {
+          '50': '#f6fcf9',
+          '100': '#ecf8f3',
+          '200': '#d0eee0',
+          '300': '#b3e3cd',
+          '400': '#7bcea8',
+          '500': '#42b983',
+          '600': '#3ba776',
+          '700': '#328b62',
+          '800': '#286f4f',
+          '900': '#205b40'
+        }
+      },
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
+      }
+    }
+  },
+  variants: {
+    extend: {}
+  },
+  plugins: []
+}

webpack.config.js

@@ -3,22 +3,23 @@ const path = require('path')
 
 module.exports = {
   entry: {
-    bundle: './playground/index.js',
+    bundle: './playground/index.js'
   },
 
   output: {
     filename: '[name].js',
-    path: path.resolve(__dirname, 'public'),
+    path: path.resolve(__dirname, 'public')
   },
 
   resolve: {
     alias: {
-      'stimulus-use': path.resolve(__dirname, './dist/index.js'),
-    },
+      'stimulus-use': path.resolve(__dirname, './dist/index.js')
+    }
   },
 
   devServer: {
     contentBase: './playground',
+    watchContentBase: true
   },
 
   devtool: 'source-map',
@@ -36,13 +37,17 @@ module.exports = {
               [
                 '@babel/plugin-transform-runtime',
                 {
-                  regenerator: true,
-                },
-              ],
-            ],
-          },
-        },
+                  regenerator: true
+                }
+              ]
+            ]
+          }
+        }
       },
-    ],
-  },
+      {
+        test: /\.css$/,
+        use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader']
+      }
+    ]
+  }
 }