Replacement ideas for @import

[Tonksthebear]

I'm not sure if this suggestion is out of scope for this gem, but I'm working on a project that is sorely missing the @import function of webpacker. There are certain instances where partials/view_components feel too heavy handed to accomplish what I want, such as for styling different elements as buttons or form inputs.

I've been experimenting with a helper that pulls the class names from a central config file that are scoped based on the parameter order. So my code looks like:

btn:
  base: 'inline-flex items-center ...'
  primary: 'bg-indigo-600 ...'

<%=button_tag 'Example', class: tailwind(:btn, :primary)%>

As you can probably guess, it uses the first parameter to scope the request, and combines any matches it finds within that scope. In my project, I have it always adding any base styles it finds within a scope. So in this case, it combines the btn > base and btn > primary class names.

This was the least verbose way I could think of to be able to make my smaller styles reusable. It's also great for referencing these styles as stimulus css classes.

Can anyone think of a better way of managing this without webpacker? Also, is this out of scope for what this gem wants to provide?

[ccastillop]

Hey @Tonksthebear

I am just sitting in front of my old 2012 mb pro, ready to start a new done-on-weekends e-commerce app with rails 6.1, hotwire and TailwindCSS. I also need a lot a few tweaks of CSS definitions for repetitive tags such as tables, forms, and specially buttons.

I think the big problem here is how can I have SM like tailwind's @apply using Sprockets. SASS has a @extend that works as @apply.

SASS has also @import to create chunks of CSS.

Therefore, I think is better to use SASS instead of helpers.
I will play around the idea...

[jontebol]

I'm also wondering how to tackle the missing @apply. I love being able to use the asset pipeline instead of webpacker for tailwind, but not having @apply is a drawback for sure. Using rails-helpers/partials could work as a workaround, but doesn't feel quite as clean. Interested in how your experimentation goes @ccastillop!

[leehericks]

This is interesting! 🤔
YAML? Where do you put this file?

[Tonksthebear]

@ccastillop I definitely get what you're saying. SASS would be best, but I assumed tailwind required the special @apply keyword because they need to do something special to actually @include the styles. So I just decided to do the quickest solution I could think of that felt relatively clean without diving into any source code.

@leehericks I have an internal gem I made for reusable components across my various projects, so I just added a namespaces config directory for that in my config directory.

config/namespace/styles.yml

Then I made a simple helper that just concats any styles from this file with the given arguments.

Ultimately though, tailwind jit mode makes the benefits of just using the node version outweigh the benefits of relying on strictly the asset pipeline. For my uses, I just use jit mode with webpacker and stick with asset pipeline for js. #50 has interesting suggestions for how to do this without webpacker (still node). I'm still using my yaml helper because I like seeing the actual classes in web inspector, vs @apply which would hide the actual classes behind the given class name (ex. .btn).

[dhh]

I'd be happy to see @apply implemented as a sprockets processor, if possible. Not going to rely on node for this particular gem. Please do open a PR if you end up exploring that!

[Tonksthebear]

Following back on this to provide some extra info. For anyone who needs @import because they aren't using a bundler, I made classy-yaml to solve this issue. It leverages YAML files in order to provide similar functionality.