🌬
ember-template-lint-plugin-tailwindcss
A Tailwind CSS
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 ingroups.[].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 ingroups.[].sortBy
-
value
: function that takes two stringsa
andb
as input and returns number greater than zero ifa > b
and less than zero ifa < 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 whenclass
attribute starts with this string
-
-
-
-
disableForMustaches
--false | true
:-
true
: won't attempt to insert any linebreaks ifclass
attribute contains any mustache statement -
false
: evenclass
attributes containing mustache statements will be line broken if other settings says so
-
-
warnForConcat
--false | true
:-
true
: will mark concatenated dynamic class attributes as problematic -
false
: won't mark concatenated dynamic class attributes as problematic
-
-
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
{
warnForConcat: false // // Note: This is the default to preserve backwards compatibility for `2.x` version; Will be flipped to `true` in `5.x`
disableForMustaches: true, // Note: This is the default to preserve backwards compatibility for `2.x` version; Will be flipped to `false` in `5.x`
linebreakBetweenGroups: {
onlyWithHint: `\n`,
indent: 2,
}
}
This will allow following:
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
- Headwind vscode extension for the initial list for sorting the classes & the idea.
- ember-template-lint-plugin-prettier for the guidance on how-to build an ember-template-lint-plugin.