Giter Club home page Giter Club logo

css_splitter's Issues

Sprockets v3.7.0 deprecations

Hi. Seems sprockets 3.7.0 contains the deprecations for v4. I am getting the following message

DEPRECATION WARNING: You are using the a deprecated processor interface CssSplitter::SprocketsEngine.
remote: Please update your processor interface:
remote: https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors

The document mentioned outlines ways to support versions 2,3,4 or just 3 and 4, going forward.

Let me know if you would like some assistance.

Issue with media queries

I have the following setup:

Rails 4.0.1
gem 'sass-rails', '~> 4.0.0'
gem 'css_splitter', '~> 0.2.0'

production.rb

config.assets.precompile += %w( jquery-1.7.js application.css application_split2.css )

application_split2.css.split2

//= include 'application.css'

application.css.scss

...
@import "somefiles.css.scss"
...

I'm having issues with precompiling on heroku. One of the files in application.css.scss has @media queries which fail to parse with the error:

rake aborted!
Invalid CSS after "...width: auto; } ": expected selector or at-rule, was "}"
  (in /app/assets/stylesheets/application_split2.css.split2)
(sass):15
/gems/sass-3.2.9/lib/sass/scss/parser.rb:1146:in `expected'
/gems/sass-3.2.9/lib/sass/scss/parser.rb:1084:in `expected'
/gems/sass-3.2.9/lib/sass/scss/parser.rb:28:in `parse'
/gems/sass-3.2.9/lib/sass/engine.rb:342:in `_to_tree'
/gems/sass-3.2.9/lib/sass/engine.rb:315:in `_render'
/gems/sass-3.2.9/lib/sass/engine.rb:262:in `render'
/gems/sprockets-2.10.1/lib/sprockets/sass_compressor.rb:24:in `evaluate'
/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/gems/sprockets-2.10.1/lib/sprockets/context.rb:197:in `block in evaluate'
/gems/sprockets-2.10.1/lib/sprockets/context.rb:194:in `each'
/gems/sprockets-2.10.1/lib/sprockets/context.rb:194:in `evaluate'
/gems/sprockets-2.10.1/lib/sprockets/bundled_asset.rb:25:in `initialize'
/gems/sprockets-2.10.1/lib/sprockets/base.rb:377:in `new'
/gems/sprockets-2.10.1/lib/sprockets/base.rb:377:in `build_asset'
/gems/sprockets-2.10.1/lib/sprockets/index.rb:94:in `block in build_asset'
/gems/sprockets-2.10.1/lib/sprockets/caching.rb:58:in `cache_asset'
/gems/sprockets-2.10.1/lib/sprockets/index.rb:93:in `build_asset'
/gems/sprockets-2.10.1/lib/sprockets/base.rb:287:in `find_asset'
/gems/sprockets-2.10.1/lib/sprockets/index.rb:61:in `find_asset'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:211:in `block in find_asset'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:257:in `benchmark'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:210:in `find_asset'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:119:in `block in compile'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:118:in `each'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:118:in `compile'
/gems/sprockets-rails-2.0.1/lib/sprockets/rails/task.rb:60:in `block (3 levels) in define'
/gems/sprockets-2.10.1/lib/rake/sprocketstask.rb:146:in `with_logger'
/gems/sprockets-rails-2.0.1/lib/sprockets/rails/task.rb:59:in `block (2 levels) in define'
/bin/ruby_executable_hooks:15:in `eval'
/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

If I merge this file's css to another file's media query (essentially having the media query in one place instead of 2) fixes the parse error.

How can I fix this issue, as I want to have the media query in separate locations for separate modules?

P.S: This gem has been great for fixing IE issues and thanks for an awesome job

couldn't find file 'jquery'?

when I assets:precompile or view app in IE, it always show below message.

[ERROR] Error compiling asset application_split2.css:
[ERROR] Sprockets::FileNotFound: couldn't find file 'jquery'
  (in /Users/joshchang/repositories/rb_test/app/assets/stylesheets/application_split2.css.split2:1)

Even I delete everything in application.css, it still show this message.
Any suggestions?

thanks.

Request to release 0.4.1

This gem is awesome and saved me a lot of hassle. However, I definitely got burned by the "Empty *_split2.css file" gotcha mentioned in the README. I didn't know what debug: true meant or ?body=1 or any of that and had to do some digging to figure out what was going on. Currently the solution for me is:

# For css_splitter, using a ref b/c that commit uses debug: false by default for _splitN stylesheets
gem 'css_splitter', git: 'git://github.com/zweilove/css_splitter.git', ref: 'a45245fb2114c90f22d2a68b10c70eb1ac641e7d'

but obviously I would rather point to v0.4.1

Not correctly parsing filter styles

I'm getting the following error when trying to load any view

Invalid CSS after "...pha(Opacity=40)": expected expression (e.g. 1px, bold), was ";"

It seems like IE proprietary filter properties aren't parsing correctly… or am I missing something here?

NoMethodError: undefined method `register_bundle_processor' for nil:NilClass

I just started getting this error, is it related to css_splitter 0.4.3?

remote:        NoMethodError: undefined method `register_bundle_processor' for nil:NilClass
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/css_splitter-0.4.3/lib/css_splitter/engine.rb:6:in `block in <class:Engine>'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/initializable.rb:30:in `instance_exec'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/initializable.rb:30:in `run'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/initializable.rb:55:in `block in run_initializers'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/initializable.rb:54:in `run_initializers'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/application.rb:352:in `initialize!'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/railtie.rb:194:in `public_send'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/railtie.rb:194:in `method_missing'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/config/environment.rb:3:in `<top (required)>'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/activesupport-4.2.0/lib/active_support/dependencies.rb:274:in `require'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/activesupport-4.2.0/lib/active_support/dependencies.rb:274:in `block in require'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/activesupport-4.2.0/lib/active_support/dependencies.rb:240:in `load_dependency'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/activesupport-4.2.0/lib/active_support/dependencies.rb:274:in `require'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/application.rb:328:in `require_environment!'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/railties-4.2.0/lib/rails/application.rb:443:in `block in run_tasks_blocks'
remote:        /tmp/build_1ee475aa8cb98aff4e21dd27f839a10f/vendor/bundle/ruby/2.1.0/gems/sprockets-rails-3.0.0/lib/sprockets/rails/task.rb:62:in `block (2 levels) in define'

split2 css file duplicates original (followed GOTCHAS but still)

Hi Guys,
I've been at it for 2 days now. Has anyone else encountered this issue?

Followed the readme carefully but unfortunately the split2 file is an exact copy.

--- APPLICATION.CSS---  
 *= require theme/style.css.scss.erb
 *= require font-awesome
 */
.foo { }
--- NOTE: style.css.erb has @import which imports several other css including bootstrap & bootstrap-responsive

--- APPLICATION_SPLIT2.CSS.SPLIT2 ---
//= include 'application.css'

--- PRODUCTION.RB ---
config.assets.precompile += %w(application.css application_split2.css)

--- GEM FILE ---
group :assets do
gem 'sass-rails', '> 3.2.3'
gem 'coffee-rails', '
> 3.2.1'
gem 'turbo-sprockets-rails3'
gem 'uglifier', '>= 1.0.3'
gem 'yui-compressor' #compress css
end

Other notes:
I have built a rake task to also check the selectors in my application.css using the count_selectors method and count is around 4909.

Any help is appreciated.
Thanks.
Sam

UPDATE: I built up on the rake task and included other methods and finally passed the precompiled application.css and the output of the "extract_part" method did extract around 4057 selectors.

Not sure what else am I missing here.

undefined method `bytesize' for nil:NilClass

Rack::Utils.bytesize blows up if the master stylesheet is empty.

NoMethodError - undefined method `bytesize' for nil:NilClass:
  rack (1.6.0) lib/rack/utils.rb:361:in `bytesize'
  sprockets (2.12.3) lib/sprockets/bundled_asset.rb:29:in `initialize'
  sprockets (2.12.3) lib/sprockets/base.rb:377:in `build_asset'
  sprockets (2.12.3) lib/sprockets/index.rb:94:in `block in build_asset'
  sprockets (2.12.3) lib/sprockets/caching.rb:58:in `cache_asset'
  sprockets (2.12.3) lib/sprockets/index.rb:93:in `build_asset'
  sprockets (2.12.3) lib/sprockets/base.rb:287:in `find_asset'
  sprockets (2.12.3) lib/sprockets/index.rb:61:in `find_asset'
  sprockets (2.12.3) lib/sprockets/environment.rb:75:in `find_asset'
  sprockets (2.12.3) lib/sprockets/base.rb:295:in `[]'
  sprockets-rails (2.2.4) lib/sprockets/rails/helper.rb:230:in `lookup_asset_for_path'
  sprockets-rails (2.2.4) lib/sprockets/rails/helper.rb:190:in `check_errors_for'
  sprockets-rails (2.2.4) lib/sprockets/rails/helper.rb:89:in `asset_path'
  actionview (4.2.0) lib/action_view/helpers/asset_url_helper.rb:267:in `stylesheet_path'
  actionview (4.2.0) lib/action_view/helpers/asset_tag_helper.rb:100:in `block in stylesheet_link_tag'
  actionview (4.2.0) lib/action_view/helpers/asset_tag_helper.rb:96:in `stylesheet_link_tag'
  sprockets-rails (2.2.4) lib/sprockets/rails/helper.rb:170:in `stylesheet_link_tag'
  css_splitter (0.4.1) app/helpers/css_splitter/application_helper.rb:18:in `block in split_stylesheet_link_tag'
  css_splitter (0.4.1) app/helpers/css_splitter/application_helper.rb:7:in `split_stylesheet_link_tag

Rails 4 work?

Does this gem work in Rails 4 ? I made everything like in docs and nothing happend. Precompiled application_split2.css is exackly that same as application.css

Precompilation issues

CSS Splitter works like a charm for me in development, but I can't get it to work at all in production with asset pre-compilation.

When running rake assets:precompile I end up with a file named application-web_split2.css-<fingerprint>.split2 Instead of the expected application-web_split2.css that I get when running in development.

It would seem that the .split2 is not run through the css_splitter template handler, because it contains the full content of the original css file. I guess that would also explain why the file ending is still .split2 in the asset folder.

# precompilation settings in production.rb
assets_configuration.precompile += %w{ <other files> application-web.css application-web_split2.css }

# app/assets/stylesheets/application-web_split2.css.split2
//= include 'application-web.css'

# app/assets/stylesheets/application-web.css.scss
# <way, way to much stuff>

Let me know if I can help out with more information.

Sass::SyntaxError: Invalid CSS after " }": expected selector or at-rule, was "}"

I have other issue.
https://github.com/zweilove/css_splitter/issues/created_by/kntmrkm

but, I encounter another problem.

  • Rails 4.2.2
  • sass-3.4.14
  • sprockets-3.2.0

Error message is

Sass::SyntaxError: Invalid CSS after " }": expected selector or at-rule, was "}".

I'm cheking css compile by rake assets:precompile.

I know a file which cause the error.
I guess by delete part of the file.

I confirmed that Compile works without config.assets.precompile += %w(application_split2.css).

This is code of the problem.

.datepicker.datepicker-inline {
  font-size: 16px;
  width: 100%;
  table {
    width: 100%;
  }
  table tr td, table tr th {
    padding: 1px 2px;
    height: 25px;
  }
}

// custom
/*
 * Datepicker for Bootstrap
 */
.datepicker {
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  direction: ltr;
}
.datepicker-inline {
  width: 220px;
}
.datepicker.datepicker-rtl {
  direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
  float: right;
}
.datepicker-dropdown {
  top: 0;
  left: 0;
}
.datepicker-dropdown:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}
.datepicker-dropdown:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-top: 0;
  position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}
.datepicker-dropdown.datepicker-orient-top:before {
  top: -7px;
}
.datepicker-dropdown.datepicker-orient-top:after {
  top: -6px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #999;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #ffffff;
}
.datepicker > div {
  display: none;
}
.datepicker.days div.datepicker-days {
  display: block;
}
.datepicker.months div.datepicker-months {
  display: block;
}
.datepicker.years div.datepicker-years {
  display: block;
}

//////////////////////////////////////////////////////////////
.datepicker table {
  margin: 0;
  user-select: none;
}
.datepicker td,
.datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  background: #eeeeee;
  cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #999999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
  background-color: #9e9e9e;
  border-color: #808080;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
  background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
  background-color: #666666 \9;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: #428bca;
  border-color: #428bca;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
  background-color: #428bca;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
  background-color: #428bca;
}
.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.datepicker table tr td span:hover {
  background: #eeeeee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: #428bca;
  border-color: #428bca;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
  background-color: #428bca;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  background-color: #428bca;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: #999999;
}
.datepicker th.datepicker-switch {
  width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
  cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
  background: #eeeeee;
}
.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}
.datepicker thead tr:first-child th.cw {
  cursor: default;
  background-color: transparent;
}

//////////////////////////////////////////////////////////////
.input-append.date .add-on i,
.input-prepend.date .add-on i {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.input-daterange input {
  text-align: center;
}
.input-daterange input:first-child {
  border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
  border-radius: 0 3px 3px 0;
}

//************************
.input-daterange .add-on {
  display: inline-block;
  width: auto;
  min-width: 16px;
  height: 20px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #ffffff;
  vertical-align: middle;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  margin-left: -5px;
  margin-right: -5px;
}

//////////////////////////////////////////////////////////////
.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  color: #333333;
  font-size: 13px;
  line-height: 20px;
  padding: 5px;
}
.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
  padding: 4px 5px;
}

and, Where the problem is

.input-daterange .add-on {
  display: inline-block;
  width: auto;
  min-width: 16px;
  height: 20px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #ffffff;
  vertical-align: middle;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  margin-left: -5px;
  margin-right: -5px;
}

If I delete part of the code like following. CSS compile works well.

.input-daterange .add-on {

}

Update gems (Middleman compatibility)

I just found your gem, which would do exactly what i'm currently searching for.
I've got now some issues: we rely on middleman in the Version 3.1.6 and this makes some dependency-problems with your gem:

Bundler could not find compatible versions for gem "rack":
In Gemfile:
css_splitter (~> 0.2.0) ruby depends on 
rack (~> 1.4.5) ruby
middleman-livereload (>= 0) ruby depends on 
rack (1.5.2)

Bundler could not find compatible versions for gem "activesupport":
In Gemfile:
css_splitter (~> 0.2.0) ruby depends on 
activesupport (= 3.1.0) ruby
middleman-livereload (>= 0) ruby depends on 
activesupport (3.2.16)

How can i solve this? Is there a way for me to use your gem without using older gems than now?

Thanks a lot for your help!

License missing from gemspec

Some companies will only use gems with a certain license.
The canonical and easy way to check is via the gemspec,

via e.g.

spec.license = 'MIT'
# or
spec.licenses = ['MIT', 'GPL-2']

Even for projects that already specify a license, including a license in your gemspec is a good practice, since it is easily
discoverable there without having to check the readme or for a license file.

For example, there is a License Finder gem to help companies ensure all gems they use
meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough
issue that even Bundler now generates gems with a default 'MIT' license.

If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file),
github has created a license picker tool.

In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally
looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :).

I hope you'll consider specifying a license in your gemspec. If not, please just close the issue and let me know. In either case, I'll follow up. Thanks!

p.s. I've written a blog post about this project

couldn't find file 'jquery_ujs'

I had written this all-up, and then realized that there are commits that are not yet in the gem. So really the only question is when you are going to release this. I see you've already removed the files in question 473a72f)

Summary:
This is very similar to issue #14, but I think I can provide more detail on what's happening. I'm getting a compilation error due to the application.js in this gem. If I understand the asset pipeline correctly, this is the intended behavior when files are placed into /gems/{name}/assets, but I'm wondering whether this is the behavior you are looking for. Basically, application.js is under your gem folder, and getting pre-compiled into the output directly within my application. Unfortunately, because I do not already require jquery-rails, and it is not a dependency of this gem, so it doesn't exist and I get a compilation error. Are you even using jquery-rails? Or can it simply be removed (or perhaps application.js can be removed altogether)?

I'm getting this error:

couldn't find file 'jquery_ujs'
  (in /Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/css_splitter-0.0.2/app/assets/javascripts/css_splitter/application.js:14)
/Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/sprockets-2.2.2/lib/sprockets/context.rb:102:in `resolve'
/Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/sprockets-2.2.2/lib/sprockets/context.rb:142:in `require_asset'
/Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:215:in `process_require_directive'
/Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:165:in `block in process_directives'
/Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:163:in `each'
/Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:163:in `process_directives'
/Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:97:in `evaluate'
/Users/tim/.rvm/gems/ruby-1.9.3-p194/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'

If I include the jquery-rails gem explicitly, the project precompiles fine, and in the output, I get the following in my project: /public/assets/css_splitter/application.js

and the following at the very end of my manifest.yml:

    css_splitter/application.js: css_splitter/application.js
    css_splitter/application/index.js: css_splitter/application.js
    css_splitter/application.css: css_splitter/application.css
    css_splitter/application/index.css: css_splitter/application.css

In the meantime, I have had to include jquery-rails in my gems even though I don't use it just to get things to compile, but I would really appreciate some help in figuring this one out.

Thanks for a great gem, and hopefully this helps improve it, or you can let me know if I'm misunderstanding.

Question about test case

The following is one of the test cases:

test '#split_string_into_rules containing media queries' do
  has_media = "a{foo:bar;}@media print{b{baz:qux;}c{quux:corge;}}d{grault:garply;}"
  assert_equal ["a{foo:bar;}", "@media print{b{baz:qux;}", "c{quux:corge;}", "}", "d{grault:garply;}"], CssSplitter::Splitter.split_string_into_rules(has_media)
end

why the result is

["a{foo:bar;}", "@media print{b{baz:qux;}", "c{quux:corge;}", "}", "d{grault:garply;}"]

instead of

["a{foo:bar;}", "@media print{b{baz:qux;}c{quux:corge;}}", "d{grault:garply;}"]

Is "}" a rule?

Single rule with > 4095 selectors not split

By using too many libraries, we ended up with the CSS rule {float: right; } having over 5,000 selectors attached to it. css_splitter did put that one rule alone in a file, but it's still too many selectors for IE 9. It needs to take a rule like that and split it into 2 rules.

fail to precompile

can someone please help?

I have a /app/assets/stylesheets/themes/default/app.css.scss.
so I created /app/assets/stylesheets/themes/default/app_split2.css in the same directory

i included these lines in app_split2.css

app/assets/stylesheets/themes/default/app_split2.css

/*
 *= require 'app'
 */

in development.rb I added

config.assets.precompile += %w(
    themes/*/public.css
    themes/*/public.js
    themes/*/app.css
    themes/*/app_split2.css
    themes/*/app.js
    themes/default/sprites.css
  )

but when precomplie, i got this error :

couldn't find file 'app'
  (in /home/appcara/projects/portal-cosn/app/assets/stylesheets/themes/default/app_split2.css:4)

did i do anything wrong?

split2 css file duplicates original

Hey, I have followed your installation instructions. I am trying to split my application.css file. I have an application_split2.css.split2 with:

//= include 'application.css'

It appears to be identical to my application.css when I test with IE, instead of the "second half" of it. Is there something I may be missing?

Thanks

couldn't find file 'jquery'

I keep getting the following error when trying to precompile my split assets:

couldn't find file 'jquery'
  (in .../gems/css_splitter-0.0.2/app/assets/javascripts/css_splitter/application.js:13)

It looks like it's trying to include the css_splitter test app assets ... ?

Counting selectors does not appear to be accurate

When I run our css file through http://snippet.bevey.com/css/selectorCount.php I get a count of 4279.

When I use the count_selectors class method and pass in the same CSS file, I get a count of 2561.

I'm inclined to believe that the selector counting algorithm of this gem is incorrect, because IE is missing styles on our stylesheet, and thus I know it's exceeded 4095, as accurately indicated by the first link. :-)

Here's the gist containing our stylesheet. https://gist.github.com/4478290

This is obviously after its been compiled into one giant manifest. Since this gem counts our total number of selectors incorrectly it won't split it into two files, which is what we desperately need.

I haven't spent a lot of time on it yet, but my off the cuff guess would be that its only counting the total starting/ending curly braces and not taking into account selectors above the curly braces that are comma separated. We have a ton of those further down in our stylesheet. I'll dig into the source and see if this is the case or not.

Different splitter output in development and prod

Hey there :-)

First of all: Thanks for this gem! I could not believe, that there are actually no solutions for rails assets regarding the selector limitation in IE, except for your gem.
A small thing: To get the gem running we had to implement the helper method manually in our application helper to be available.

But now to the real problem:
In our local environment the splitter works like a charm and splits correctly. But on production the extraction starts with later rules which leads to missing rules on production for internet explorer.
I have no idea what the reason could be and I am hoping to get some input.

My first and only idea was that the compression on production might mess up the regular expressions, so I activated compression for development, but the splitting still worked like a charm.
Of cause it could be a problem with our project setup and not the gem itself, but I am really clueless where I could check and try...so I would appreciate any hint :-)

Thanks and Cheers from Hamburg ;-)

Splitted file starting with closing brace

Hey,

I succesfully managed to set up css_splitter. However the splitted file starts with a closing }. It works great though, but looks strange in source editor ;-)

Unfortunately I can't release the CSS file... company internals.

Best,

Nils

Splitting breaks if 4095th selector is nested within @media query

If the 4095th selector is nested within a @media query, the stylesheet can't be properly split.

....

@media something {
  .selector-4095 {
    color: black;
  }
  .selector-4096 {
    color: white;
  }

}

We need to create a testcase and bugfix for this issue.

Some somewhat related discussion has already happened in #2

Issue with Key frames

This is what happening when using css_splitter

Original:
@-ms-keyframes rotate-spinner {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
zoom: 1;
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
zoom: 1;
}
}

Original Split 1:
@-ms-keyframes rotate-spinner {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
zoom: 1;
}

Original Split 2:
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
zoom: 1;
}
}

Is there a way to fix it?

It tries to precompile Javascript into CSS

I've been experiencing a weird issue with this Gem. Somehow, it tries to load my application.js file in my split2 file, instead of application.css. I kept getting this error in my "largeish" app:

couldn't find file 'first'
  (in .../stylesheets/application_split2.css.split2:13)

So I decided to try to reproduce it in a smaller project. It also has the same issue:

Sprockets::FileNotFound in Hello#index

Showing /private/tmp/css-split/app/views/layouts/application.html.erb where line #5 raised:

couldn't find file 'jquery'
  (in /private/tmp/css-split/app/assets/stylesheets/application_split2.css.split2:13)

Demo project here: https://dl.dropbox.com/u/132165/css-split.zip. Just go to http://0.0.0.0:3000/ to see the error.

Is there anything I'm doing wrong?

assets:precompile fails in project doesn't use jquery

In the gem file app/assets/javascripts/css_splitter/application.js
It said:

//= require jquery
//= require jquery_ujs
//= require_tree .

It doesn't make any sense to have a .js file included in a gem that is only responsible for splitting css and adding extra dependency on JQuery

Please remove it from the gem.

Well, It seems that the folders app/assets,app/views,app/controllers could also be removed(That's what I am doing locally). It doesn't make sense to include them in this gem, too

Unacceptable performance in development

application-split.css.split2:

//= include 'application.css

But it will regenerate the whole application-split.css every time I refresh locally
Which makes testing very painful

I only have @import in application.scss, no = require_self or = require_tree

Sass::SyntaxError: @charset may only be used at the root of a document.

Hello. I'm using this gem (ver 0.4.1) following env.

  • Rails 4.2.2
  • sass-3.4.14
  • sprockets-3.2.0

My development env is works well. but, when compile in production I get a error like this,

Sass::SyntaxError: @charset may only be used at the root of a document.

and, I have scss file following.

@media screen and (min-width: 768px) {
  //.container { max-width: 940px; }
}

@media screen and (max-width: 767px) {
  .variant {
    font-size: 15px;
  }
}

/* カスタム, iPhone Retinaディスプレイ */
//@media only screen and (max-width : 320px) {  }

Oddly enough. The error solve by several change.

case 1

@media screen and (min-width: 768px) {
  //.container { max-width: 940px; }
}

@media screen and (max-width: 767px) {

}

/* カスタム, iPhone Retinaディスプレイ */
//@media only screen and (max-width : 320px) {  }

It's works well.

case 2

@media screen and (min-width: 768px) {
  //.container { max-width: 940px; }
}

@media screen and (max-width: 767px) {
  .variant {
    font-size: 15px;
  }
}

It's works well too.

Additional above, following case works.

@media screen and (min-width: 768px) {
  .container { max-width: 940px; }
}

@media screen and (max-width: 767px) {
  .variant {
    font-size: 15px;
  }
}

I couldn't specify cause of this anymore.

Thanks.

undefined method `bytesize' for nil:NilClass

In my app.

# app/assets/stylesheets/application_split2.css.split2
/* = include application.css */
# app/views/layouts/application.html.slim
= split_stylesheet_link_tag "application"

I got undefined method 'bytesize' for nil:NilClass when I start the app, same error while I try to compile assets.

Which happens in https://github.com/sstephenson/sprockets/blob/v2.2.2/lib/sprockets/processed_asset.rb#L12

The @source is nil. While pathname is "#<Pathname:/Users/linjunpop/Code/Pracstrat/fo-web/app/assets/stylesheets/application_split2.css.split2>"

undefined method `split_stylesheet_link_tag' for #<#<Class:0x007fdaa1692700>:0x007fda9f2c0d40>

I'm having an issue with trying to precompile assets for staging environment.

I'm running:

ruby 1.9.3p327
rails 3.2.13.rc2

and I've followed your steps by adding the following:

  1. the css splitter gem to my GEMFILE.
  2. updating the application.rb config.assets.precompile to add my newly added application_split2.css file.
    note i didn't add the config.assets.compress = true to the applications.rb file b/c RubyMine gave me a message saying 'cannot find compress'
  3. i created a new application_split2.css.scss.split2 file within the assets pipeline and made it reference the application.css.scss file by importing it like so:
  • //= include 'application.css'
    4) i added the method call '= split_stylesheet_link_tag "application", :media => "all"' within application.html.haml file in layouts directory like so:

    %head
    = raw analytical.head_prepend_javascript
    %meta{:charset => "utf-8"}
    %meta{"http-equiv" => "X-UA-Compatible", :content => "IE=edge,chrome=1"}
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1, maximum-scale=1"}
    %title= content_for?(:title) ? yield(:title) : "Projectwedding"
    %meta{:content => "", :name => "description"}
    %meta{:content => "", :name => "author"}
    = favicon_link_tag
    = split_stylesheet_link_tag "application", :media => "all"
    = stylesheet_link_tag "print", :media => "print"

    = javascript_include_tag "application"
    /[if lt IE 9]
    = javascript_include_tag "html5shiv"
    = csrf_meta_tags
    = javascript_tag "var AUTH_TOKEN = '#{form_authenticity_token}';" if protect_against_forgery?
    = raw analytical.head_append_javascript
    = dfp_helper_head
    = yield(:head)
    %body{:class=>page_class}


Steps followed after updating the files:

  1. bundle install
  2. RAILS_ENV=staging rake assets:precompile
  3. restarted rails server

THEN got the following error when going to http://localhost:3000

NoMethodError in Home#index

  • Showing /Users/bradkahl/RubymineProjects/projectwedding-ng/app/views/layouts/application.html.haml where line #12 raised:
  • undefined method `split_stylesheet_link_tag' for #<#Class:0x007fdaa1692700:0x007fda9f2c0d40>
  • 9: %meta{:content => "", :name => "description"}
    10: %meta{:content => "", :name => "author"}
    11: = favicon_link_tag
    12: = split_stylesheet_link_tag "application", :media => "all"
    13: = stylesheet_link_tag "print", :media => "print"
    14:
    15: = javascript_include_tag "application"

What am I missing?

Your help is greatly appreciated!

sass问题

sass 错误代码:
/*
Error: Invalid CSS after "*": expected selector, was "{"
on line 6 of sass/index.sass

1: $width:100%
2:
3:
4: $height:20px
5:
6: *{
7: margin:0;
8: padding:0
9: }

Backtrace:
sass/index.sass:6
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/scss/parser.rb:1278:in expected' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/scss/parser.rb:1208:in expected'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/scss/static_parser.rb:21:in parse_selector' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:438:in visit_rule'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in visit' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:162:in block in visit'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/stack.rb:79:in block in with_base' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/stack.rb:135:in with_frame'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/stack.rb:79:in with_base' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:162:in visit'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in block in visit_children' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in map'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in visit_children' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:171:in block in visit_children'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:183:in with_environment' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:170:in visit_children'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in block in visit' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:190:in visit_root'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in visit' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:161:in visit'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:10:in visit' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/root_node.rb:36:in css_tree'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/tree/root_node.rb:29:in render_with_sourcemap' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/engine.rb:389:in _render_with_sourcemap'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/engine.rb:307:in render_with_sourcemap' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/plugin/compiler.rb:462:in update_stylesheet'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/plugin/compiler.rb:215:in block in update_stylesheets' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/plugin/compiler.rb:209:in each'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/plugin/compiler.rb:209:in update_stylesheets' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/plugin/compiler.rb:443:in on_file_changed'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/plugin/compiler.rb:320:in block in watch' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/config.rb:23:in call'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/processor.rb:115:in _process_changes' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/processor.rb:19:in block in loop_for'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/processor.rb:15:in loop' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/processor.rb:15:in loop_for'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/loop.rb:84:in _wait_for_changes' C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/event/loop.rb:42:in block in setup'
C:/Ruby24/lib/ruby/gems/2.4.0/gems/sass-listen-4.0.0/lib/sass-listen/internals/thread_pool.rb:6:in `block in add'
/
body:before {
white-space: pre;
font-family: monospace;
content: "Error: Invalid CSS after "
": expected selector, was "{"\A on line 6 of sass/index.sass\A \A 1: $width:100%\A 2: \A 3: \A 4: $height:20px\A 5: \A 6: *{\A 7: margin:0;\A 8: padding:0\A 9: }"; }

sass里的代码:
$width:100%

$height:20px

*{
margin:0;
padding:0
}

// 那位知道是什么原因吗?

Rubygems.org with 0.4.0

Is there a reason, why the rubygem still is on 0.2.0 and there was no release since October?
I included now the gem directly from github and it works like a charm for me locally!

But: Our Build-system is not that happy, I'm not sure, where the error exactly comes from. We're working with rvm there and making a successful bundle install, but then, we got the Errormessage like this:

git://github.com/zweilove/css_splitter.git (at master) is not checked out. Please run `bundle install` (Bundler::GitError)

I think the problem is the direct linking from github, but not sure about it.

split2 file is always empty

We recently updated our application from the 0.2.0 release of the gem to the current master. Now our application_split2.css file is always empty even though it is well past the 4095 selector count. After a bit of debugging, this clause in splitter.rb:42 always evaluates to true for every rule in the file. Therefore, nothing is ever written to the split file.

if rule =~ /^\s*}$/
  current_media = nil
  # skip the line if the close bracket is the first rule for the new file
  next if first_hit
end

I wrote a simple test to verify:

def test_split_string_failure
    second_part = CssSplitter::Splitter.split_string(File.read('test/dummy/app/assets/stylesheets/test_stylesheet_with_media_queries.css'), 2)
  refute_empty second_part
end

Is anyone else seeing this issue?

Rails 3 sprockets engine issue

Hi. This commit c5e37a8 introduced a regression. For rails 3.2 and sprockets 2.2.3 assets.register_bundle_processor is never called. So the engine is not registered.

circular dependency thrown in version 0.4.4 during asset precompile from minimal Rails app

I'm trying to use css_splitter gem to break up the large combined CSS file for a Rails app. Unfortunately, something is not right as I'm running into the circular dependency issue regarding require_tree and require_self that should have disappeared post version 0.4.0. Any help is greatly appreciated.

Here's how to replicate the issue

  1. Created a fresh rails 4.1.6 app

  2. added to Gemfile
    gem 'css_splitter'

  3. added to application.css

    foo { width: 100; }

  4. created application_spilt2.css

    /*
    *= require 'application'
    */

  5. added to initializers/assets.rb
    Rails.application.config.assets.precompile += %w( application_split2.css )

$ rake assets:precompile
Sprockets::CircularDependencyError: /home/jkolen/Splitter/sp1/app/assets/stylesheets/application.css has already been required
/usr/local/rvm/gems/ruby-2.1.2@splitter_test/gems/sprockets-2.12.4/lib/sprockets/base.rb:392:in circular_call_protection' /usr/local/rvm/gems/ruby-2.1.2@splitter_test/gems/sprockets-2.12.4/lib/sprockets/base.rb:373:inbuild_asset'
....

I don't know if it's a red herring, but tracing through sprockets I noticed that the bundle option starts off true for application.css and then changes to false which leads to the thrown exception.

Here are the gem versions in the bundle:

Using rake 10.4.2
Using i18n 0.7.0
Using json 1.8.3
Using minitest 5.8.3
Using thread_safe 0.3.5
Using tzinfo 1.2.2
Using activesupport 4.1.6
Using builder 3.2.2
Using erubis 2.7.0
Using actionview 4.1.6
Using rack 1.5.5
Using rack-test 0.6.3
Using actionpack 4.1.6
Using mime-types 2.99
Using mail 2.6.3
Using actionmailer 4.1.6
Using activemodel 4.1.6
Using arel 5.0.1.20140414130214
Using activerecord 4.1.6
Using coffee-script-source 1.10.0
Using execjs 2.6.0
Using coffee-script 2.4.1
Using thor 0.19.1
Using railties 4.1.6
Using coffee-rails 4.0.1
Using hike 1.2.3
Using multi_json 1.11.2
Using tilt 1.4.1
Using sprockets 2.12.4
Using css_splitter 0.4.4
Using jbuilder 2.4.0
Using jquery-rails 3.1.4
Using libv8 3.16.14.13
Using bundler 1.6.2
Using sprockets-rails 2.3.3
Using rails 4.1.6
Using rdoc 4.2.1
Using ref 2.0.0
Using sass 3.2.19
Using sass-rails 4.0.5
Using sdoc 0.4.1
Using spring 1.6.1
Using sqlite3 1.3.11
Using therubyracer 0.12.2
Using turbolinks 2.5.3
Using uglifier 2.7.2

Gem just seems to duplicate original CSS

I seem to be having the issue where the gem only duplicates the original stylesheet when it creates the one that should have the excess selectors. Could someone help me troubleshoot?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.