Autoprefixer Filter Not Working in Flask_Assets

I have tried to get the autoprefixer filter to work with flask_assets by following the instructions in the Flask_Assets documentation, but it does not appear to apply the filter. Here is my code:

# construct flask app object
from flask import Flask, render_template_string
flask_args = { 'import_name': __name__ }
flask_app = Flask(**flask_args)

from flask_assets import Environment, Bundle
assets = Environment(flask_app)
assets.config['AUTOPREFIXER_BIN'] = 'postcss'
assets.config['AUTOPREFIXER_BROWSERS'] = [ '> 1%' ]
css_min = Bundle('../styles/mycss.css', filters='autoprefixer', output='styles/test.css')
assets.register('css_assets', css_min)

@flask_app.route('/')
def landing_page():
    html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">\
            <head>{% assets "css_assets" %}\
            <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">\
            {% endassets %}\
            <title>Hello</title>\
            </head>\
            <h1>Hello World</h1>\
            <p>Just a test of flask</p>'
    return render_template_string(html), 200

if __name__ == '__main__':
    flask_app.run(host='0.0.0.0', port=5000)

I have been able to apply the cssmin, pyscss, uglifyjs and jsmin filters successfully. I can also run autoprefixer on the command line to successfully compile a transformed output:

postcss --use autoprefixer --autoprefixer.browsers "> 1%" -o test.css mycss.css

However, when trying to run autoprefixer through flask_assets registration, the process neither throws an error nor does it seem to take the required time to compile. It does produce the output file but when I examine the resulting file, none of the prefixes have been applied.

UPDATE: This problem seems to occur whenever attempting to configure options for ANY filter. I have not been able to get uglifyjs to accept 'UGLIFYJS_EXTRA_ARGS' or for the pyscss filter to adopt a new style using 'PYSCSS_STYLE' either. I have tried to set these configuration as environmental variables using os.environ['AUTOPREFIXER_BIN'] as well as attempting to pass them through flask.config['AUTOPREFIXER_BIN']. But none of the configuration settings have been applied when the filter is run. It is also not clear to me where in the code itself the configuration options are constructed by either Bundle or Environment.

One SO post claims to have found a way to get a configuration setting to work, but the post does not show the entire workflow of how flask_assets needs to be setup to ingest these options.

Perhaps someone can help me understand what I am doing wrong?

标签： python flask flask-assets webassets

1条回答

时光不老，我们不散

2楼-- · 2019-07-10 14:42

Autoprefixer:

There is nothing wrong with your code¹. You are just not using the correct filter for the latest version of Autoprefixer. If you look at the history of the releases in that link, since version 6.0.0, it started using postcss. Your code will work for versions older than 6.0.0.

Webassets has provided support for versions after 6.0.0 (inclusive), by providing the autoprefixer6 filter.

Therefore all you have to do is change the filter(s) while initializing your bundle, like so:

css_min = Bundle('../styles/mycss.css', filters='autoprefixer6', output='styles/test.css')

Other Filters' Configurations:

Don't use os.environ, that is not the way to set configuration variables for Flask and flask-extensions. The most common (and preferred) way to set configuration for extensions is by using the flask Config itself, and in large projects this is done using a separate config file. The extensions will pickup its configuration options from flask's config.

Depending on which extension you use, you can also set the config separately like you have done, but that is rarely used, from what I have seen so far.

Please check the Flask's Configuration related documentation for some good examples on how to setup configuration for your app "properly".

from flask import Flask, render_template_string
from flask_assets import Environment, Bundle

# construct flask app object
flask_args = {'import_name': __name__}
flask_app = Flask(**flask_args)

assets = Environment(flask_app)
# specify the bin path (optional), required only if not globally installed 
assets.config['AUTOPREFIXER_BIN'] = 'path/to/postcss'
assets.config['AUTOPREFIXER_BROWSERS'] = ['> 1%', ]
# use the autoprefixer6 updated filter
css_min = Bundle('../styles/mycss.css', filters='autoprefixer6',
                 output='styles/test.css')
assets.register('css_assets', css_min)


@flask_app.route('/')
def landing_page():
    html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">\
            <head>{% assets "css_assets" %}\
            <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">\
            {% endassets %}\
            <title>Hello</title>\
            </head>\
            <h1>Hello World</h1>\
            <p>Just a test of flask</p>'
    return render_template_string(html), 200


if __name__ == '__main__':
    flask_app.run(host='0.0.0.0', port=5000)

Remember to clean out the previously generated files, if the source css/js has not changed, i.e remove the output files, and the .webassets-cache folder.

₁^{Except for code style & formatting conventions!}

0人赞添加讨论(0) 举报