Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compile AND inline SCSS using rel="scss" data-inline #158

Closed
Tanja-4732 opened this issue Mar 31, 2021 · 2 comments · Fixed by #160
Closed

Compile AND inline SCSS using rel="scss" data-inline #158

Tanja-4732 opened this issue Mar 31, 2021 · 2 comments · Fixed by #160

Comments

@Tanja-4732
Copy link
Contributor

I'd like to have Trunk compile and then inline the compiled SCSS of my application.

Inlining works for CSS files:

<link data-trunk rel="inline" href="src/css/main.css" />

And compiling and then linking to SCSS (with hashing) works too:

<link data-trunk rel="scss" href="src/css/main.scss" />

But what I want is to have my SCSS compiled, and then inlined, instead of being linked:

<link data-trunk rel="inline-scss" href="src/css/main.scss" />

TL;DR

I want to compile and then inline SCSS using rel="inline-scss".

I already asked on Discord:
See https://discord.com/channels/701068342760570933/757269580182847629/826760524633079831

When will this be possible/could I make a PR for that?
This was referenced Mar 31, 2021
Closed
Merged
@Tanja-4732 Tanja-4732 changed the title Compile AND inline SCSS using rel="inline-scss" Compile AND inline SCSS using rel="scss" data-inline Mar 31, 2021
@Tanja-4732
Copy link
Contributor Author

Update

As @thedodd said on Discord (see here), rel="inline-scss" should be avoided in favor of:

<link data-trunk rel="scss" href="src/inline-scss.scss" data-inline />

This means I'll have to roll back the MVP implemented in e7bdf5d (todo) and implement the data-inline attribute instead (done).

@Tanja-4732
Copy link
Contributor Author

#160 should now be ready to be merged.

Tanja-4732 added a commit to Tanja-4732/trunk that referenced this issue Apr 6, 2021
@Tanja-4732
Add data-inline to SASS/SCSS (close trunk-rs#158)
a6f5d5a 
Allows for compiling and then in-lining SASS and SCSS using a new
data-inline attribute in a data-trunk link tag.

Compiling SASS and SCSS without inlining is still supported.

This commit also fixes several spelling mistakes and updates
documentation to reflect the changes.

A non-squash version can be found at Bernd-L:inline-scss_no-squash,
in case you want to see individual commits or for reverting
individual changes.
Tanja-4732 added a commit to Tanja-4732/trunk that referenced this issue Apr 6, 2021
@Tanja-4732
Add data-inline to SASS/SCSS (close trunk-rs#158)
7b7d006 
Allows for compiling and then in-lining SASS and SCSS using a new
data-inline attribute in a data-trunk link tag.

Compiling SASS and SCSS without inlining is still supported.

This commit also fixes several spelling mistakes and updates
documentation to reflect the changes.

A non-squash version can be found at Bernd-L:inline-scss_no-squash,
in case you want to see individual commits or for reverting
individual changes.
thedodd pushed a commit that referenced this issue Apr 13, 2021
@Tanja-4732
Add data-inline to SASS/SCSS (close #158)
ef855d3 
Allows for compiling and then in-lining SASS and SCSS using a new
data-inline attribute in a data-trunk link tag.

Compiling SASS and SCSS without inlining is still supported.

This commit also fixes several spelling mistakes and updates
documentation to reflect the changes.

A non-squash version can be found at Bernd-L:inline-scss_no-squash,
in case you want to see individual commits or for reverting
individual changes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Inline SCSS (close #158) Tanja-4732/trunk
1 participant
@Tanja-4732