demo for issue 219

francoismassart/eslint-plugin-tailwindcss#219
francoismassart · Mar 2, 2023 · a5a6fb9 · a5a6fb9
1 parent 564944e
commit a5a6fb9
Show file tree

Hide file tree

Showing 20 changed files with 754 additions and 10 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,20 @@
 module.exports = {
-  "root": true,
-  "extends": [
+  root: true,
+  extends: [
     "plugin:tailwindcss/recommended"
-  ]
+  ],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.js'],
+      parser: '@typescript-eslint/parser',
+    },
+    {
+      files: ['*.vue'],
+      parser: 'vue-eslint-parser',
+    },
+    {
+      files: ['*.html', '*.blade.php'],
+      parser: '@angular-eslint/template-parser',
+    }
+  ],
 };
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /node_modules
 /dist
+.DS_Store
diff --git a/apps/app-one/.eslintrc.js b/apps/app-one/.eslintrc.js
@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  settings: {
+    tailwindcss: {
+      config: path.join(__dirname, "tailwind.config-one.js"),
+    }
+  }
+};
diff --git a/src/demo.blade.php → apps/app-one/src/demo.blade.php b/src/demo.blade.php → apps/app-one/src/demo.blade.php
diff --git a/src/demo.html → apps/app-one/src/demo.html b/src/demo.html → apps/app-one/src/demo.html
@@ -12,7 +12,7 @@ <h2>tailwindcss/classnames-order</h2>
         </section>
         <section>
             <h2>tailwindcss/no-custom-classname</h2>
-            <p class="container custom text-yolo">Only tailwind classes please</p>
+            <p class="container custom text-one text-two">Only tailwind classes please</p>
         </section>
         <section>
             <h2>tailwindcss/no-contradicting-classname</h2>

diff --git a/src/demo.tsx → apps/app-one/src/demo.tsx b/src/demo.tsx → apps/app-one/src/demo.tsx
diff --git a/src/demo.twig → apps/app-one/src/demo.twig b/src/demo.twig → apps/app-one/src/demo.twig
diff --git a/src/demo.vue → apps/app-one/src/demo.vue b/src/demo.vue → apps/app-one/src/demo.vue
diff --git a/src/input.css → apps/app-one/src/input.css b/src/input.css → apps/app-one/src/input.css
diff --git a/tailwind.config.js → apps/app-one/tailwind.config-one.js b/tailwind.config.js → apps/app-one/tailwind.config-one.js
@@ -4,7 +4,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        yolo: '#B4D455'
+        one: '#B4D455'
       }
     },
   },

diff --git a/apps/app-two/.eslintrc.js b/apps/app-two/.eslintrc.js
@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  settings: {
+    tailwindcss: {
+      config: path.join(__dirname, "tailwind.config-two.js"),
+    }
+  }
+};
diff --git a/apps/app-two/src/demo.blade.php b/apps/app-two/src/demo.blade.php
@@ -0,0 +1,9 @@
+@if ($errors->any())
+<p class="lg:inline-block mt-2 mt-0 text-sm leading-5 text-red-600 inline">
+  {{ $errors->first() }}
+</p>
+@endif @if (session()->has('status'))
+<p class="flex flex-shrink mt-2 mb-2 text-sm leading-5 text-gray-900 custom">
+  {{ session('status') }}
+</p>
+@endif
diff --git a/apps/app-two/src/demo.html b/apps/app-two/src/demo.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>demo.html</title>
+    </head>
+    <body>
+        <h1>Hello eslint-plugin-tailwindcss</h1>
+        <section>
+            <h2>tailwindcss/classnames-order</h2>
+            <p class="m-0 flex p-0">Invalid classnames order</p>
+            <p class="flex w-12 lg:w-4 sm:w-6">Invalid classnames order in variants</p>
+        </section>
+        <section>
+            <h2>tailwindcss/no-custom-classname</h2>
+            <p class="container custom text-one text-two">Only tailwind classes please</p>
+        </section>
+        <section>
+            <h2>tailwindcss/no-contradicting-classname</h2>
+            <p class="p-2 m-0 m-2 m-5">Two different values for margin</p>
+        </section>
+    </body>
+</html>
diff --git a/apps/app-two/src/demo.tsx b/apps/app-two/src/demo.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const MyComponent = () => {
+  return <section className={'flex w-12 lg:w-4 sm:w-6 container custom'}>
+    <h1  className={'p-2 m-0 m-2 m-5'}>Hello tsx</h1>
+  </section>
+}
diff --git a/apps/app-two/src/demo.twig b/apps/app-two/src/demo.twig
@@ -0,0 +1,65 @@
+{% extends "_base/layout" %}
+
+{% set media = entry.media.with([['media:image', { withTransforms: ['media'] }]]).all() %}
+
+{% block content %}
+  <section class="relative pt-100">
+    <div class="absolute inset-0 bg-gradient-to-b from-gray-100 via-gray-100 to-white">
+      <div class="custom absolute w-full h-full opacity-40 bg-cover bg-center" style="background-image: url('/dist/assets/img/pattern.svg')"></div>
+    </div>
+  </section>
+
+  <section class="mb-150">
+    <div class="relative w-5/6 mx-auto">
+      <div class="flex flex-wrap">
+        {% block sidebar %}
+        {% endblock %}
+        <div class="w-full lg:w-2/3 xl:w-3/4 max-w-5xl pt-50 pt-0" data-aos="fade-up" data-aos-delay="150">
+          <h1 class="font-heading font-bold leading-none uppercase text-2xl md:text-3xl lg:text-4xl xl:text-5xl" data-aos="fade-up">
+            {{ entry.title }}
+          </h1>
+
+          <div class="wysiwyg mt-25">
+            {{ entry.text|raw }}
+          </div>
+
+          {% if media|length %}
+            <div data-controller="gallery">
+              {% for item in media %}
+                {% set image = item.image[0] ?? null %}
+                {% set url = item.video ?? image.url %}
+                <a
+                  href="{{ url }}"
+                  {% if item.video %}
+                    data-src="https://www.youtube-nocookie.com/embed/{{ url|youtubeCode }}"
+                  {% else %}
+                    data-src="{{ url }}"
+                  {% endif %}
+                  class="relative bg-white block pt-9/16 overflow-hidden group mt-50"
+                  data-aos="fade-up"
+                >
+                  {% if item.video %}
+                    <div class="absolute z-20 bottom-0 left-0 flex items-center pointer-events-none p-30 font-heading text-sm uppercase text-white">
+                      Bekijk video
+                      {{ svg('@webroot/dist/assets/img/arrow.svg')|attr({ class: 'text-gray-200 transition ml-10 group-hover:translate-x-10' }) }}
+                    </div>
+                    <div class="absolute z-10 inset-0 bg-gradient-to-b from-transparent to-black opacity-50 pointer-events-none"></div>
+                  {% endif %}
+                  {% if image %}
+                    <img
+                      src="{{ image.getUrl('media') }}"
+                      class="absolute inset-0 h-full w-full object-cover hover:scale-110 transition duration-500"
+                      alt="">
+                  {% endif %}
+                </a>
+              {% endfor %}
+            </div>
+          {% endif %}
+
+          {% block extra %}
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock %}
diff --git a/apps/app-two/src/demo.vue b/apps/app-two/src/demo.vue
@@ -0,0 +1,22 @@
+<script>
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="container sm:w-3 sm:w-4 lg:w-6">
+    <h1>Vue SFC</h1>
+    <button @click="count++">Count is: {{ count }}</button>
+  </div>
+</template>
+
+<style scoped>
+button {
+  font-weight: bold;
+}
+</style>
diff --git a/apps/app-two/src/input.css b/apps/app-two/src/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/app-two/tailwind.config-two.js b/apps/app-two/tailwind.config-two.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{php,html,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        two: '#B4D455'
+      }
+    },
+  },
+  plugins: [],
+}