Middleman extension to inline your JS and css
License: GNU General Public License v3.0
This gem adds helpers for middleman that inline your stylesheets and JavaScript. To use, add activate :inline to your config.rb, and, helpers will be available in any template. Here shown in an example ERB layout:
<html>
<head>
<%= inline_js 'jquery' %>
<%= inline_css 'style', 'normalize.css' %>
...
this gem should support haml templates and sprockets but it's hardcoding the output tag and outputting the source instead of the output of sprocket.
a found a helper that does the inline in case you want to modify your gem https://gist.github.com/jeremyruppel/5751461
I am trying to inline CSS but got this exception:
NoMethodError: undefined method `render' for nil:NilClass
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-inline-0.0.2/lib/middleman-inline/extension.rb:25:in `render_resource'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-inline-0.0.2/lib/middleman-inline/extension.rb:7:in `block in inline_css'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-inline-0.0.2/lib/middleman-inline/extension.rb:6:in `map'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-inline-0.0.2/lib/middleman-inline/extension.rb:6:in `inline_css'
layouts/blog_layout.html.slim:8:in `block (2 levels) in singleton class'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/padrino-helpers-0.13.3.4/lib/padrino-helpers/output_helpers/abstract_handler.rb:33:in `capture_from_template'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/core_extensions/default_helpers.rb:68:in `capture_html'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/template_context.rb:82:in `wrap_layout'
layouts/blog_layout.html.slim:1:in `block in singleton class'
layouts/blog_layout.html.slim:-7:in `instance_eval'
layouts/blog_layout.html.slim:-7:in `singleton class'
layouts/blog_layout.html.slim:-10:in `__tilt_70336272885460'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/tilt-2.0.8/lib/tilt/template.rb:170:in `call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/tilt-2.0.8/lib/tilt/template.rb:170:in `evaluate'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/tilt-2.0.8/lib/tilt/template.rb:109:in `render'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/renderers/slim.rb:6:in `render'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/padrino-helpers-0.13.3.4/lib/padrino/rendering.rb:17:in `render'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/file_renderer.rb:79:in `render'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/method_reference.rb:43:in `send_to'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/call_with.rb:76:in `call_with'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/method_handler.rb:138:in `block in redefine_method'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/template_renderer.rb:157:in `block in render'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/activesupport-5.0.5/lib/active_support/notifications.rb:166:in `instrument'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/util.rb:21:in `instrument'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/template_renderer.rb:156:in `render'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/method_reference.rb:43:in `send_to'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/call_with.rb:76:in `call_with'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/method_handler.rb:138:in `block in redefine_method'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/sitemap/resource.rb:154:in `render'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/method_reference.rb:43:in `send_to'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/call_with.rb:76:in `call_with'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/contracts-0.13.0/lib/contracts/method_handler.rb:138:in `block in redefine_method'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-blog-4.0.2/lib/middleman-blog/blog_article.rb:64:in `render'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/rack.rb:112:in `process_request'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/rack.rb:66:in `block in call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/rack.rb:65:in `catch'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/middleman-core-4.2.1/lib/middleman-core/rack.rb:65:in `call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/urlmap.rb:68:in `block in call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/urlmap.rb:53:in `each'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/urlmap.rb:53:in `call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/show_exceptions.rb:23:in `call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/htmlcompressor-0.2.0/lib/htmlcompressor/rack.rb:36:in `call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/head.rb:12:in `call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/lint.rb:49:in `_call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/lint.rb:37:in `call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/builder.rb:153:in `call'
~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/rack-2.0.3/lib/rack/handler/webrick.rb:86:in `service'
~/.rbenv/versions/2.4.1/lib/ruby/2.4.0/webrick/httpserver.rb:140:in `service'
~/.rbenv/versions/2.4.1/lib/ruby/2.4.0/webrick/httpserver.rb:96:in `run'
~/.rbenv/versions/2.4.1/lib/ruby/2.4.0/webrick/server.rb:290:in `block in start_thread'
I have followed the instructions in the readme file.
This is my code:
= inline_css 'style', 'highlighting.css'
Alternative approach works fine but I want to inline that CSS, not just put a link outside the head:
= stylesheet_link_tag 'highlighting.css'
Is your gem compatible with latest version of middleman?
Hi Miloš,
I think I may be missing something obvious, but when I try to replicate your layout, I get an undefined method 'include_css'. The gem is installed and I've added activate :inline to my config.rb. I'm using Middleman 4.2.1. Does anything jump out as obviously wrong with my setup?
Thanks in advance,
Erik
Things seem to work okay if I call inline_css in a template, but when I include that method in a layout and try to build, I get a stack level too deep. If I had to guess I'd say this is because the inlining function isn't complete by the time the layout template pulls in the child template -- does that make sense?
Full error message:
/Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts/validators.rb:104:in `make_validator': stack level too deep (SystemStackError)
from /Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts.rb:189:in `valid?'
from /Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts/builtin_contracts.rb:104:in `block in valid?'
from /Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts/builtin_contracts.rb:103:in `any?'
from /Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts/builtin_contracts.rb:103:in `valid?'
from /Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts/validators.rb:53:in `block (2 levels) in <module:Validators>'
from /Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts/call_with.rb:18:in `[]'
from /Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts/call_with.rb:18:in `block in call_with'
from /Users/admin/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/contracts-0.13.0/lib/contracts/call_with.rb:13:in `times'
... 7540 levels...How do I compress (prefix and minify) the inline css during the build process?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.