BeaconCMS / BeaconCMS/beacon

Support importing deps with relative path in `app.css`

Open
#632 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Elixir
Stars
1.3k
Forks
134
PR merge metrics
No merged PRs in 30d

Description

In short, support `@import "../../deps/petal_components/assets/default.css";`

The problem is that the `TailwindCompiler` needs to [concat custom stylesheet](https://github.com/BeaconCMS/beacon/blob/b83b29e768d3b139de3e2931742d481579e6eb9f/lib/beacon/tailwind_compiler.ex#L250-L255) with the provided user config `tailwind_css` so it will [create a temp file in a temp dir](https://github.com/BeaconCMS/beacon/blob/b83b29e768d3b139de3e2931742d481579e6eb9f/lib/beacon/tailwind_compiler.ex#L257) instead of just using the path of `app.css` which will break any relative path.

That creates a conflict between `:tailwind_css` and `Beacon.Content.Stylesheet`, ie: we should find a way to inject `Stylesheet` content into `app.css`, for eg: `@import "beacon/stylesheet";`

Contributor guide

Open the contributing guide

Research direction

Read lib/beacon/tailwind_compiler.ex at the linked concatenation and temporary-file logic, then inspect Beacon.Content.Stylesheet and how tailwind_css is combined with app.css. Done means an app.css import such as the relative dependency path resolves correctly while Stylesheet content can still be injected.

Written by the indexing model from the issue text.

Assessment

Tech stack
elixir, tailwindcss
Domain
build-system, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.