Notwithstanding Previous Misdemeanors
    Have ideas to improve npm?Join in the discussion! »

    ember-template-lint-plugin-tailwindcss

    3.0.0 • Public • Published

    ember-template-lint-plugin-tailwindcss 🌬

    A Tailwind CSS 🌬 plugin for ember-template-lint 👨🏻.

    Example of class-order rule

    Install

    yarn add -D ember-template-lint-plugin-tailwindcss
    // .template-lintrc.js
    module.exports = {
      plugins: ['ember-template-lint-plugin-tailwindcss'],
    };

    Recommended configuration

    A recommended configuration is available. To use it, merge the following object to your .template-lintrc.js file:

    // .template-lintrc.js
    module.exports = {
      plugins: ['ember-template-lint-plugin-tailwindcss'],
      extends: [
        'recommended', // this comes from ember-template-lint
        'ember-template-lint-plugin-tailwindcss:recommended'
      ]
    };

    The ember-template-lint-plugin-tailwindcss:recommended set will apply these rules.

    Configuration

    You can use all the standard ember-template-lint configuration options. For example project wide:

    // .template-lintrc.js
    module.exports = {
      plugins: ['ember-template-lint-plugin-tailwindcss'],
      extends: ['recommended', 'ember-template-lint-plugin-tailwindcss:recommended'],
      rules: {
        'class-wrap': [
          'error',
          {
            classesPerLine: 5 // this overrides default configuration
          }
        ], 
      },
    };

    Configuration options

    class-wrap

    • boolean - true to enable / false (default) to disable
    • object -- An object with the following keys:
      • classesPerLine -- integer|null: Put a line-wrap in the class attribute after N classes

    Note: This rule tends to fight with ember-template-lint-plugin-prettier, so if you are using prettier plugin, it's recommended to have class-wrap disabled.

    class-order

    • boolean - true to enable / false to disable
    • object -- object: of marchers, sorters and groups:
      • matchers -- object:
        • key: name of the matcher will be used in groups.[].matchBy
        • value: function that returns true if given class belongs to given group; false otherwise
      • sorters -- object:
        • key: name of the sorter will be used in groups.[].sortBy
        • value: function that takes two strings a and b as input and returns number greater than zero if a > b and less than zero if a < b
      • groups -- array of objects:
        • matchBy: name of respective matcher
        • sortBy: name of respective sorter
        • order: determines sorting of all the groups; lower number means group will be applied earlier
      • linebreakBetweenGroups -- false | object
        • false: do not add linebreak between each group
        • object: add a forced linebreak between each group
          • indent: number of how many spaces from class attribute start we should indent
          • onlyWithHint -- false | string:
            • false: this option is always enabled
            • string: enable this option only when class attribute starts with this string

    class-order rule will look into the groups array and pick each group one by one. It will go through all the classes and use matchBy matcher on them keeping only those that return truthy value (rest will be carried to the next group). Then the sortBy function will be used to rearrange the order of those classes. In the end the groups of sorted classes are concatenated according to the order parameter ascending.

    This means that last entry in groups should always have matchBy: "all", otherwise this plugin will throw away classes that did not match any groups.

    If you omit matchBy: "all" from your groups you can also use this plugin to make sure that only classes matched by other matchers in your groups can be used. Classes that don't match any groups will be discarded.

    Defaults
    linebreakBetweenGroups: {
      onlyWithHint: `\n`,
      indent: 2,
    },
    

    This will allow following:

    <div class="gap-4 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3">
      foo
    </div>
    
    <div
      class="                           <-- has to start with `\n` for that options to take place
        gap-4 grid grid-cols-2          <-- group-1
        lg:grid-cols-5 md:grid-cols-3   <-- group-2
      "
    >
      bar
    </div>
    matchers
    • tailwindClass: Matches if given class comes from tailwind (excluding variants)
    • tailwindVariant: Matches if given class is tailwind variant
    • all: Matches anything
    sorters
    • alphabet: Sorts by alphabet descending
    • classList: Sorts by predefined list of classes that is trying to mimic groupping by logical blocks
    groups
    groups: [
      {
        matchBy: "tailwindClass",
        sortBy: "alphabet",
        order: 2,
      },
      {
        matchBy: "tailwindVariant",
        sortBy: "alphabet",
        order: 3,
      },
      {
        matchBy: "all",
        sortBy: "alphabet",
        order: 1,
      },
    ],

    Credits

    Install

    npm i ember-template-lint-plugin-tailwindcss

    DownloadsWeekly Downloads

    226

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    1.34 MB

    Total Files

    27

    Last publish

    Collaborators

    • avatar