How can I define a helper to produce a CSSModules-style css class?

[JGallardo4]

This Evil Martians article from 2022 is about ViewComponent, but it seems to have the key to making CSS modules work server-side with Phlex.

It recommends the following setup:

1. Co-locate JS, CSS, and component files for each component. For example:

├── app
│   ├── views
│   │   ├── components
│   │   │   ├── navbar
│   │   │   │   ├── navbar.css
│   │   │   │   ├── navbar.rb
│   │   │   │   ├── navbar.js

2. Use PostCSS Modules to transform any classes found under views before bundling. For example class: "container" becomes class: "c--NavBar--container"

// /postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nesting'),
    require('autoprefixer'),
    require('postcss-modules')({
      generateScopedName: (name, filename, _css) => {
        const matches = filename.match(
            /\/app\/views\/components\/?(.*)\/*.css$/);

        // Don't transform CSS files from outside the components folder
        if (!matches) return name;

        // Transforms "way_down/we_go/example" into "way-down--we-go--example"
        const identifier = matches[1].replaceAll('_', '-').
            replaceAll('/', '--');

        return `c--${ identifier }--${ name }`;
      },

      // Don't generate *.css.json files (we don't need them)
      getJSON: () => {},
    }),
  ],
};

3. Use a helper to transform CSS classes in the component the same way as above.

# /app/helpers/css_helper.rb
module CssHelper
  def class_for_component(class_name)
    "c--#{component_name}--#{class_name}"
  end
end

4. Call the helper from the component when defining HTML element classes.

# /app/views/components/navbar/navbar.rb
class Components::Navbar < Components::Base

  def view_template(&)
    div(class: helpers.class_for_component("container"), &)
  end

5. For the sake of completeness, this is what the CSS file would look like pre-processing:

/* /app/views/components/navbar/navbar.css */
.container {
  background-color: blue;
}

And post:

/* /app/assets/builds/application.css */
.c--Navbar--container {
  background-color: blue;
}

===

As you can see, the part that is missing is that I'm not sure how to get the #{ component_name } from the CSSHelper method. Any help would be greatly appreciated. I'm hoping to achieve this in a way that doesn't force me to include the component name in every helper call as that would be very tedious.

The snippet from the article linked above goes like this:

class << self
  def identifier
    @identifier ||= component_name.gsub("_", "-").gsub("/", "--")
  end
end

def class_for(name)
  "c--#{self.class.identifier}--#{name}"
end

But it's not clear to me where this code is supposed to live. I'm presuming it's specific to the ViewComponent implementation. In any case for me it throws the following error:
undefined method 'identifier' for class #<Class:0x00007726cd2f87b0>

[joeldrapper]

You should be able to use self.class.name.

[JGallardo4]

Thank you. This is exactly what I was looking for!

[joelmoss]

This will quickly fall apart as soon as you have a component class elsewhere with the same name. For example both /app/views/components/navbar/navbar.rb and /app/views/components/admin/navbar/navbar.rb will both use the same class name Navbar, and therefore will not be unique.

I also use CSS modules, but instead I use the file system path of the component, using Module.const_source_location which I can then use to generate a unique CSS module name.

def self.source_path
  Pathname.new(const_source_location(name).first)
end

[JGallardo4]

Thank you for the info!

Using self.class.name I'm getting Components::Navbar. I'm thinking that since Modules need to be unique within their namespace, all I have to do is make sure all my components are directly under the Components module. In your example I would need to define the admin navbar as Components::AdminNavbar. Therefore these two navbars would produce the CSS class prefixes c--Navbar--___ and c--AdminNavbar--___ respectively.

This is in line with my goal of building a UI kit for myself with generic components meant for composition.

However. I can see the sense in your system. In the future I may have such a big library of components that it would be useful to break down into different modules. At the same time, I may want to create a separate module with different versions of the same components. But for now, I like the simplicity of keeping the CSS class prefixes small and maybe encouraging the creation of components that are flexible enough to be truly general purpose, obviating the need for different versions of them in different modules.

In the future I could also use the complete class name in order to prevent collisions. Maybe these navbars would go from Components::Navbar and Components::Admin::Navbar to c--Navbar--__ and c--AdminNavbar--__ respectively.

[joeldrapper]

I don’t namespace components, so this would be Navbar and AdminNavbar for me. I use the kit feature extensively, so I put everything in a Components module. https://beta.phlex.fun/reference/kits.html

[JGallardo4]

Here's what I ended up doing:

# /app/helpers/css_helper.rb
module CssHelper
  def modularize(class_name)
    component = self.class.name.gsub("::", "--")
    component + "--" + class_name
  end

  module_function :modularize
end

# /app/views/components/base.rb
class Components::Base < Phlex::HTML
  include Components
  include Phlex::Rails::Helpers::Routes
  include Phlex::Rails::Helpers::ImageTag
  include Phlex::Translation
  include CssHelper # <==
end

# /app/views/components/navbar/navbar.rb
class Components::Navbar < Components::Base

  def view_template(&)
    div(class: modularize("nav"), &)
  end
end

Result: class="Components--Navbar--nav

I decided to compromise on short prefix names and just keep the full class name to make it a bit more future-proof.

And here's the CSS side of things:

// /postcss.config.js
const path = require('path');
module.exports = {
  plugins: [
    require('postcss-import-ext-glob'),
    require('postcss-import')({
      plugins: [
        require('postcss-modules')({
          generateScopedName: (name, filename, _css) => {
            const path = require('path');
            return path.relative('./app/views/', filename).
                split('/').
                toSpliced(-1).
                map((f) => String(f).charAt(0).toUpperCase() + String(f).slice(1)).
                join('--') + "--" + name;
          },
          // Don't generate *.css.json files (we don't need them)
          getJSON: () => {},
        })],
    }),
    require('postcss-nesting'),
    require('autoprefixer')
  ],
};

/* /app/assets/stylesheets/application.postcss.css */
/* Entry point for your PostCSS build */
/* Import stylesheets co-located with components */
@import-glob "../../views/**/*.css";