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.

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

gather, concatenate and *then* pass to filters? #30

Open
simonwiles opened this issue Apr 15, 2011 · 6 comments · May be fixed by #294
Open

gather, concatenate and *then* pass to filters? #30

simonwiles opened this issue Apr 15, 2011 · 6 comments · May be fixed by #294
Labels

Comments

@simonwiles
Copy link

simonwiles commented Apr 15, 2011

Hi! Is there anyway to collect and concatenate the CSS or JS in a particular block and then pass it through a filter chain? In particular, I'd like to use pyScss to process my SCSS. I've created a pySCSSFilter extending FilterBase, and I'd really like to do something like:

{% compress css %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/mixins.scss" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/base.scss" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/other.scss" />
{% endcompress %}

but of course doesn't won't work as my files are processed in isolation from one another.

Is there a way?

Cheers!

@hvdklauw
Copy link

hvdklauw commented May 6, 2011

Hmm that's exactly what I wouldn't want.

What if they aren't in the same base path, and have the same @import statements but referencing different files because they are in different paths.

Right now @import doesn't even work because the content of the file is written to a temporary file before being passed to the processor.

I say process the files one by one and then concatenate so all references for compilation is correct.

@gensmann
Copy link

gensmann commented Sep 9, 2011

I'll second a vote for a way to concatenate the files before pre-compiling. This would be very helpfull when using less etc. since a standway is to keep mixins and global variables in one file and merge it in before compiling. Right now you have to repeat those vars and mixins in every css file ie if you have a set of skin color global vars that is used in multiple css files, which sort of ruins the purpose of using global vars in css frameworks like sass or less, unless you keep everything in one file.

I understand the problem hvdklauw mentions, so maybe it could be an option on each compress block wether or not to merge before pre-compiling or after?

@jezdez
Copy link
Member

jezdez commented Mar 18, 2012

@gensmann Adding an option to the compress block sounds like a plan, yup.

@sicarrots
Copy link

sicarrots commented Jul 30, 2012

It is very important when using css preprocessors such less, its 'core' feauture is allowing to use mixins. Therefore concatenting files before processing through filter is a must-have functionality. Is there any plans to merge @jannon requests do dev branch django_compressor?

@jannon jannon linked a pull request Jul 30, 2012 that will close this issue
@diox diox removed the someday label May 25, 2014
@airtonix
Copy link

airtonix commented Jun 23, 2014

with regards to Sass, my approach to this is to define all the includepaths for the sass binary then @import the other files in my scss files:

# app/settings/common.py
...
scss_args = " ".join(["--include-path %s/vendor/bourbon/app/assets/stylesheets/" % VENDOR_ROOT,
                      "--include-path %s/vendor/bootstrap-sass-official/vendor/assets/stylesheets/" % VENDOR_ROOT])
...

COMPRESS_PRECOMPILERS = (
    ('text/coffeescript', 'node_modules/.bin/coffee --compile --stdio'),
    ('text/x-scss', 'node_modules/.bin/node-sass %s {infile} {outfile}' % scss_args)
)
...
// app/common/static/css/screen.scss
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
@import "./vendor.scss";
@import "./elements.scss";
@import "./pages.scss";

body, html {
    font-family: 'Montserrat';
}
// app/common/static/css/vendor.scss
@import "_bourbon.scss";
@import "bootstrap.scss";
<! -- app/common/templates/base.html -->
...
{% compress css %}
<link href="{% static 'css/screen.scss' %}" type='text/x-scss' media='screen, projector' rel='stylesheet'>
{% endcompress %}
...

@diox diox added the feature label Sep 26, 2015
@k-funk
Copy link

k-funk commented May 19, 2016

@airtonix I started doing this, but the changes to any @import'ed files don't get watched, and so the server needs to be restarted for every css change in them.
Kinda amazed this feature hasn't been implemented yet. webassets solved this, allowing users to use SASS_AS_OUTPUT = True, which optionally concats the files first.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants