Support for prefixes / 'namespaces'?

[Jeremy Ramsey]

Is it possible to configure Gorko to prefix all of the utility classes it generates? For example, if I have a configuration like this:

$gorko-colors: (
  'dark': #1a1a1a,
  'light': #f3f3f3
);

$gorko-config: (
  'bg': (
    'items': $gorko-colors,
    'output': 'standard',
    'property': 'background'
  ),
  ...
)

I would like to be able to set a prefix (hopefully just once, and not setting it for each property), and have that be applied to all of the generated classes. If my prefix were 'my', then the above would result in something like:

.my-bg-dark {
  background: '#1a1a1a';
}

.my-bg-light {
  background: '#f3f3f3'
}

My use case is we are implementing a design system for our organization, but would like to allow for teams to leverage other css framework in addition. This would help prevent class name collision.

[Andy Bell]

That’s a great suggestion. Happy to accept a PR for that if you're up for it?

[Jeremy Ramsey]

Sorry for the delayed response. I'm looking into this now. My initial thought is to add a "_global" map to $gorko-config and then specify a namespace value there. something like

$gorko-config: (
  '_global': (
    'namespace': 'my-prefix-'
  ),
  ...

Then add a helper function to pull that value out and use it with the generate-css mixin. Should this namespace be applied to CSS variables as well? Should it be configurable to do either/or? How does this sound?

[Andy Bell]

I think we can simplify that even further!

$gorko-config: (
  'namespace': 'my-prefix-',
 )

It'll be even easier to access in the generators then

[Jonathan Taylor]

This is great! 🔥

One small comment, should be the trailing dash - should be added in the implementation of namespace so users get nicely separated selectors without having to know to add the trailing dash?

Just a thought.

[Andy Bell]

It's a handy thought. I'd be inclined to let the author add the prefix verbatim though, instead of making assumptions. They might want to use radComponents_ for example.

[Jeremy Ramsey]

I think we can simplify that even further!

$gorko-config: (
  'namespace': 'my-prefix-',
 )

It'll be even easier to access in the generators then

Ok. I headed down that path originally, but it broke the cycle mixin. However, that was an easy fix by type checking on the properties.

I had decided to use the same map in maps style since all of the other gorko-config properties were defined that way. Figured I could leverage any additional mixins/functions that were already expecting this format. I also thought it might be nice to have a separate map defined for future global configurations.

What I may do is a combination of both? Something like:

$gorko-config:(
  'namespace': (
    'prefix': 'my-prefix-',
    'apply-to-vars': true
  )
)

At this point I've implemented both options, and implementing a 3rd way shouldn't be a problem. Just let me know which you prefer and i'll submit the PR

[Andy Bell]

Ah I see, so instead of --color-primary, it would be --my-prefix-color-primary?

[Jeremy Ramsey]

yeah, but only if you wanted me to take it that far. So far my use case for Gorko has been limited to the utility classes, but if having the option to namespace variables would be helpful, I can add that while i'm in there.

[Andy Bell]

yeh for sure. I think we've got a plan then :)

[Jeremy Ramsey]

This was implemented with #26