francoismassart Github contribution chart
francoismassart Github Stats
francoismassart Most Used Languages

Activity

09 Dec 2022

Francoismassart

[BUG] false positive on arbitrary value with space

Describe the bug no-custom-classname triggers on an arbitrary-value classname where the value has a space. This happens because the parser splits on space before taking […] into account.

To Reproduce Works:

<div className="tw-grid tw-grid-cols-[1fr]> 

Doesn't work: Works:

<div className="tw-grid tw-grid-cols-[1fr 1fr]> 

Expected behavior I should be able to include spaces within the […] value.

Screenshots broken-with-space

Environment (please complete the following information):

  • eslint@8.24.0
  • eslint-plugin-tailwindcss@3.7.1

Forked On 09 Dec 2022 at 05:21:51

Francoismassart

Hi @jamesarosen, Thank you for reporting the issue.

I believe this not a bug because whitespaces are used to separate classnames in the class attribute’s value of HTML.

You should replace them by underscores like they explain in the official documentation See https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace

Please try that and if it fixes your problem then close this issue.

Cheers πŸ˜€

Commented On 09 Dec 2022 at 05:21:51

Francoismassart

[BUG] The auto-fix for enforces-shorthand incorrectly rewrites p-2 pl-2 pr-2 to just px-2

Describe the bug The auto-fix for enforces-shorthand rewrites p-2 pl-2 pr-2 to just px-2, although p-2 would be correct.

To Reproduce Steps to reproduce the behavior:

  1. Open a file that is covered by ESLint
  2. Edit a className to say p-2 pl-2 pr-2
  3. Apply auto-fix
  4. The className will now be px-2

Expected behavior The resulting class name should be p-2

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information): eslint-plugin-tailwindcss version 3.7.0

Forked On 30 Nov 2022 at 03:00:15

Francoismassart

Hi @cmlenz, thank you for reporting the issue.

This was an easy fix.

Available via the latest release

npm i eslint-plugin-tailwindcss@3.7.1

https://github.com/francoismassart/eslint-plugin-tailwindcss/releases/tag/v3.7.1

Commented On 30 Nov 2022 at 03:00:15

Francoismassart

ESLint plugin for Tailwind CSS usage

On 30 Nov 2022 at 02:56:46

Francoismassart

fix: #182

Pushed On 30 Nov 2022 at 02:56:31

Francoismassart

3.7.1

Pushed On 30 Nov 2022 at 02:56:31

Francoismassart

eslint-plugin-tailwindcss

πŸ‘‹πŸ» Would you consider adding eslint-plugin-tailwindcss ? Self advertising it is πŸ˜… https://github.com/francoismassart/eslint-plugin-tailwindcss

Let me know if you need me to create a pull request πŸ™πŸ»

Forked On 27 Nov 2022 at 09:13:37

Francoismassart

#200

Commented On 27 Nov 2022 at 09:13:37

Francoismassart

docs: link to eslint-plugin-tailwindcss project

Created On 27 Nov 2022 at 09:13:15
Create Branch
Francoismassart In francoismassart/awesome-eslint Create Brancheslint-plugin-tailwindcss

Francoismassart

A list of awesome ESLint plugins, configs, etc.

On 27 Nov 2022 at 09:10:56

Francoismassart

A list of awesome ESLint plugins, configs, etc.

Forked On 27 Nov 2022 at 09:06:50

Francoismassart

docs: using negative lookahead in the whitelist

Pushed On 24 Nov 2022 at 02:12:59

Francoismassart

[Feature request] New rule: no-unnecessary-arbitrary-value

Is your feature request related to a problem? Please describe. I'm working on a team of about 30 people on a medium-sized codebase. It's common to see an arbitrary value like this:

text-[14px] 

This is exactly the same as:

text-md 

However, it creates duplicate CSS. Over time, this adds up to a significant amount of extra CSS for no benefit.

Describe the solution you'd like Detect when an arbitrary value is identical to a configured value, and offer to replace it.

bg-[#f8f8f8]
// fixes to
bg-light 
text-[var(--gray)]
// fixes to
text-dark 

This is all dependent on the project's configuration.

Out of scope:

  • Similar (but not exact) colors are not flagged. Only exact matches are done.
  • No unit conversion is done to/from rem/px, for example.

Describe alternatives you've considered

  1. The current rule is no-arbitrary-value, but that shuts them off completely.
  2. More granularity on no-arbitrary-value. There are specific things that tend to get duplicated, like text-, bg-, and border-. Disabling arbitrary values on these could help prevent these from spreading.
  3. Instead of going completely for the "all values", make a very targeted rule for the most common offenders.

**Risks: Arbitrary values come later in the stylesheet, so a fixer will not be 100% safe to run. However, these should already be considered bugs, hopefully caught by no-contradicting-classname.

Additional context I'm working on this right now for a private project, so I'll get it done regardless in the next couple weeks, but I thought it may be useful to have it more broadly available.

Forked On 16 Nov 2022 at 01:43:50

Francoismassart

@threehams, the last example you listed might be incorrect:

text-[var(--gray)]
// fixes to
text-dark 

The variable could hold a different/updated value based on the css variable usage. For example a product page using a themed text color, by redeclaring the --var

Commented On 16 Nov 2022 at 01:43:50

Francoismassart

started

Started On 16 Nov 2022 at 12:45:37

Francoismassart

3.8.0-beta.0

Pushed On 16 Nov 2022 at 08:15:31

Francoismassart

[Feature request] Only validate callees

Describe the solution you'd like Having the callees option is great; where we can consolidate classes into variables and still have this plugin parse the contents; ctl('flex flex-col').

During conversions of large projects, it's typical that a normal React component will have lots of other, non-Tailwind classes in the default className prop. I'd love to see an option where ONLY the callees are parsed and not the default className. So className="my-other-class" won't be parsed, but className={ctl('flex flex-col')} would be.

Describe alternatives you've considered I'm not sure there's a workaround for this at the moment.

Additional context Nope! But thanks for creating this tool!

Forked On 16 Nov 2022 at 07:55:11

Francoismassart

@zslabs You can try this out with npm i -D eslint-plugin-tailwindcss@3.8.0-beta.0

Commented On 16 Nov 2022 at 07:55:11

Francoismassart

feat: add `skipClassAttribute` option

Created On 16 Nov 2022 at 07:51:39
Create Branch

Francoismassart

ESLint plugin for Tailwind CSS usage

On 16 Nov 2022 at 07:50:56

Francoismassart

[Feature request] Only validate callees

Describe the solution you'd like Having the callees option is great; where we can consolidate classes into variables and still have this plugin parse the contents; ctl('flex flex-col').

During conversions of large projects, it's typical that a normal React component will have lots of other, non-Tailwind classes in the default className prop. I'd love to see an option where ONLY the callees are parsed and not the default className. So className="my-other-class" won't be parsed, but className={ctl('flex flex-col')} would be.

Describe alternatives you've considered I'm not sure there's a workaround for this at the moment.

Additional context Nope! But thanks for creating this tool!

Forked On 16 Nov 2022 at 07:47:22

Francoismassart

Hi @zslabs, Because this feature is easy to implement, I'll add a new setting called skipClassAttribute which is false by default.

Setting it as true would ignore the value of the class and/or className attribute(s).

But a className attribute containing a template literal which hosts an expression with one the callee would still be linted.

e.g. for the no-custom-classname rule

className={`custom my-other-class ${ctl('yolo')}`} 

would warn you about yolo being a custom class.

WDYT?

Commented On 16 Nov 2022 at 07:47:22

Francoismassart

chore: update tailwindcss and its eslint-plugin

Created On 14 Nov 2022 at 09:18:52
Create Branch
Francoismassart In francoismassart/Next-js-Boilerplate Create Branchchore/update-tailwindcss-and-eslint-plugin

Francoismassart

πŸš€ Boilerplate and Starter for Next.js 13+, Tailwind CSS 3.2 and TypeScript ⚑️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Cypress + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS

On 14 Nov 2022 at 09:10:38

Francoismassart

πŸš€ Boilerplate and Starter for Next.js 13+, Tailwind CSS 3.2 and TypeScript ⚑️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Cypress + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS

Forked On 14 Nov 2022 at 09:07:42

Francoismassart

[BUG] failure eslint error with DaisyUI

Describe the bug When linting with Trunk.io (using Eslint linter) an error is thrown. I am not sure if this is related with this plugin, or if it is related with DaisyUI.

To Reproduce Steps to reproduce the behavior:

  1. Add eslint-plugin-tailwindcss
  2. Add trunk
  3. Add DaisyUI
  4. See error

Expected behavior No lint error should occur.

Screenshots image

Environment (please complete the following information):

  • OS: [macOS]
  • Softwares + version used:
    • "daisyui": "^2.18.0",
    • "eslint-plugin-tailwindcss": "^3.6.0",
    • Trunk: 0.14.1-beta
    • eslint@8.18.0

Additional context Add any other context about the problem here.

eslint config file or live demo https://user-images.githubusercontent.com/1493018/177493802-1d98d00c-674c-486c-a133-ce35a25de57d.mp4

Trunk.yml

version: 0.1
cli:
  version: 0.14.1-beta
lint:
  ignore:
    - linters: ["eslint"]
      paths:
        # Ignore generated files
        - build/**
        # Trunk
        - .trunk/**
        - .trunk/out/*.yaml
  enabled:
    - actionlint@1.6.15
    - eslint@8.18.0
    - gitleaks@8.8.11
    - hadolint@2.10.0
    - markdownlint@0.31.1
    - prettier@2.7.1
    - shellcheck@0.8.0
    - shfmt@3.5.0
    - svgo@2.8.0
    - taplo@release-taplo-cli-0.6.8 

.eslintrc.js

/**
 * @type {import('@types/eslint').Linter.BaseConfig}
 */
module.exports = {
  extends: [
    '@remix-run/eslint-config',
    '@remix-run/eslint-config/node',
    '@remix-run/eslint-config/jest-testing-library',
    'plugin:tailwindcss/recommended',
    'prettier'
  ],
  plugins: ['tailwindcss'],
  // we're using vitest which has a very similar API to jest
  // (so the linting plugins work nicely), but it means we have to explicitly
  // set the jest version.
  settings: {
    jest: {
      version: 27
    }
  },
  rules: {
    'tailwindcss/no-custom-classname': 'off'
  }
} 

tailwind.config.js

module.exports = {
  content: ['./app/**/*.{ts,tsx,jsx,js}'],
  theme: {
    extend: {}
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('daisyui')
  ]
  // daisyui: {
  //   darkTheme: 'dark'
  // }
} 

Forked On 14 Nov 2022 at 08:19:48

Francoismassart

Version 3.7.0 has been released and it should fix the issue

npm i -D eslint-plugin-tailwindcss or npm i -D eslint-plugin-tailwindcss@3.7.0

If the issue persists, please open a new ticket.

Cheers.

Commented On 14 Nov 2022 at 08:19:48

Francoismassart

[BUG] Sorting classes does not work the same way as Tailwind's sort order

Describe the bug The docs for this plugin state that it uses "order process from the official prettier-plugin-tailwindcss". However, while trying this plugin out for the first time today, most of the examples given on that page are not sorted the same way using this plugin:


Tailwind docs: image

Actual Results: <div class="flex h-24 p-3 ml-4 text-gray-700 border-2 border-gray-300 shadow-md"></div>


Tailwind Docs: image

Actual Results: <div class="scale-125 opacity-50 hover:opacity-75 hover:scale-150"></div>


Tailwind Docs: image

Actual Results: <div class="grid grid-cols-2 lg:grid-cols-4 sm:grid-cols-3"></div>


Is my end somehow set up wrong? Or is this plugin not actually meant to use the tailwind class order?

My .eslint.rc config file:

{
	"plugins": ["tailwindcss"],
	"extends": ["plugin:tailwindcss/recommended"]
} 

Expected behavior This plugin should be sorting classes in the same way listed in the Tailwind docs.

Environment (please complete the following information):

  • OS: MacOS
  • "eslint": "^8.22.0",
  • "eslint-plugin-tailwindcss": "^3.6.0",
  • VSCode 1.70.2

Forked On 14 Nov 2022 at 08:18:09

Francoismassart

For twig files I need to investigate but it is not related to the subject of this issue.

Version 3.7.0 has been released and it should fix the issue of this issue

npm i -D eslint-plugin-tailwindcss or npm i -D eslint-plugin-tailwindcss@3.7.0

If the ordering issue persists, please open a new ticket.

Cheers.

Commented On 14 Nov 2022 at 08:18:09

Francoismassart

[BUG] Custom tailwind classes give tailwindcss/classnames-order warnings

Describe the bug The tailwindcss/classnames-order rule gives warnings when i use custom classes that i've defined in tailwind.config.js.

To Reproduce Steps to reproduce the behavior:

  1. Create a custom sub-class of an already existing class like shadow-*, ex: shadow-light Like this:
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        light: '0px 4px 12px rgba(0, 0, 0, 0.1)',
      }
    }
  }
} 
  1. Add the tailwindcss/classnames-order rule with the following configuration:
// .eslintrc.js
'tailwindcss/classnames-order': [
  'warn',
  {
    config: 'tailwind.config.js',
  },
], 
  1. run yarn lint

Expected behavior eslint recognizes the class shadow-light and does not give a tailwindcss/classnames-order warning

Environment:

  • OS: macOS
  • Softwares + version used:
    • VSCode 1.66.2
    • node 16.13.0

Additional context This happens only with customised tailwind classes, regular custom classes work fine.

Forked On 14 Nov 2022 at 08:14:45

Francoismassart

Version 3.7.0 has been released and it should fix the issue

npm i -D eslint-plugin-tailwindcss or npm i -D eslint-plugin-tailwindcss@3.7.0

If the issue persists, please open a new ticket.

Cheers.

Commented On 14 Nov 2022 at 08:14:45

Francoismassart

[BUG] font size CSS classes wrong order

Describe the bug When using font sizing classes with breakpoint modifiers (:sm, :md and son on), the plugin does not fix the ordering: classes stay in the wrong order.

To Reproduce The tailwind.options.js of the project has the following rule:

fontSize: {
    'size-10': '.625rem',
    'size-12': '.75rem',
    'size-14': '.875rem',
    'size-16': '1rem',
    'size-18': '1.125rem',
    'size-20': '1.25rem',
    'size-22': '1.375rem',
    'size-24': '1.5rem',
    'size-26': '1.625rem',
    'size-28': '1.75rem',
    'size-32': '2rem',
    'size-36': '2.25rem',
    'size-44': '2.75rem',
    'size-56': '3.5rem',
}, 

If I type this and save the file (ESLint is configured to fix all the issues while saving)

<p class="md:text-size-12 lg:text-size-10 sm:text-size-14">
    hello
</p> 

I end up with the same thing as above instead of:

<p class="sm:text-size-14 md:text-size-12 lg:text-size-10">
    hello
</p> 

Expected behavior The expected behavior should be:

<p class="sm:text-size-14 md:text-size-12 lg:text-size-10">
    hello
</p> 

Environment:

  • OS: macOS Big Sur 11.4
  • Softwares + version used:
    • Node v14.17.4
    • npm 6.14.14
    • tailwindcss 3.0.*
    • eslint-plugin-tailwindcss ^3.6.1

partial eslint config

module.exports = {
    // ...
    plugins: ['tailwindcss'],
    extends: [
        // ...
        'plugin:tailwindcss/recommended',
    ],
    rules: {
        // ...
        'tailwindcss/no-custom-classname': 'off',
    },
}; 

If you have any idea regarding that issue, feel free to share it. :)

Forked On 14 Nov 2022 at 08:14:30

Francoismassart

Version 3.7.0 has been released and it should fix the issue

npm i -D eslint-plugin-tailwindcss or npm i -D eslint-plugin-tailwindcss@3.7.0

If the issue persists, please open a new ticket.

Cheers.

Commented On 14 Nov 2022 at 08:14:30