Releases: chrise86/view_component-scoped_styles
Releases · chrise86/view_component-scoped_styles
Release list
v0.6.1
v0.6.0
Added
config.view_component.generate.stylesheet = trueto auto-generate a sidecar-compatible.cssfile when runningview_component:component, injectinclude ViewComponent::ScopedStyles, and addcomponent_classto the generated ERB template.component_class(..., from: OtherComponent)to reference scoped classes from another component in templates.:component(OtherComponent[, class_name])compile-time CSS references for sidecar stylesheets andstylesblocks, including use inside selector functions like:where()and:has().
Fixed
- Require ActiveSupport's enumerable extensions explicitly so scoped class map generation has
index_withavailable outside Rails load paths.
v0.5.0
Breaking changes
This release is incompatible with 0.4.x. Scoped class names and compiled CSS selectors change unless you opt into the previous behaviour.
- Default
css_class_prefixis now"{class_name}_"instead of"c-". For example,.componentbecomes.component_a1b2c3d4rather than.c-a1b2c3d4. css_class_prefixis a template string supporting{class_name}and{component_name}(namespaces joined by/). Per-componentcss_class_prefixuses the same interpolation.- Forward slashes in interpolated class names are escaped in compiled CSS selectors (e.g.
Admin/UserCardComponent→Admin\/UserCardComponent).
Upgrade from 0.4.x: set config.css_class_prefix = "c-" in your initializer (and per-component overrides if any) to keep existing class names, then regenerate components.scoped.css in development. Otherwise update templates and markup to match the new scoped class names.
Added
ViewComponent::ScopedStyles::CssClassPrefixfor prefix interpolation and CSS selector escaping.
v0.4.1
Fixed
- Railtie component discovery now respects the configured
components_pathinstead of always scanningapp/components.
v0.4.0
Added
assets_pathandstylesheet_nameglobal configuration options to customize where the bundled scoped stylesheet is written (defaults:app/assets/stylesheetsandcomponents.scoped.css).