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

Parsing of quoted data URLs can produce wrong quoting in compressor.filters.css_default.CssAbsoluteFilter #878

Closed
shezi opened this issue Sep 13, 2017 · 16 comments

Comments

@shezi
Copy link

shezi commented Sep 13, 2017

I am compressing bootstrap4 with django-compress, and it wrongly quotes one of the svg backgrounds.

It turns this:
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

into this:
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5")' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

It's a bit hard to see, but there's an extra " inserted in rgba(255, 255, 255, 0.5"). This extra quoting invalidates most of the CSS that follows (up until another SVG background inserts another quote, re-starting CSS rules).

One workaround is to disable compressor.filters.css_default.CssAbsoluteFilter.

This issue could be related to #485

@karyon
Copy link
Contributor

karyon commented Sep 13, 2017

looks like a duplicate of #827. the fix is in django-compressor 2.2, please make sure you're using the latest version. if the problem still persist, we'll reopen of course :)

@karyon karyon closed this as completed Sep 13, 2017
@Hybridx24
Copy link

Hybridx24 commented Sep 15, 2017

@karyon I am actually having the same exact issue, and I am using django-compressor 2.2.

@karyon
Copy link
Contributor

karyon commented Sep 15, 2017

well, shit :) i'll have a look in the coming days hopefully.

@karyon karyon reopened this Sep 15, 2017
@karyon
Copy link
Contributor

karyon commented Sep 15, 2017

@shezi, @Hybridx24, which version of bootstrap exactly? beta1?

@Hybridx24
Copy link

Hybridx24 commented Sep 15, 2017

I am actually using Bootstrap 3.3.6 - but the issue occurs to me when I use my own custom SVG (which works perfectly pre-compression). It seems that like the OP said, something is breaking inside of background-image: url("data:image/svg+xml;...")

@Renatello
Copy link

I'm using Bootstrap v4.0.0-alpha.6 and I have the same problem. It'd be nice if you could fix this

@karyon
Copy link
Contributor

karyon commented Oct 8, 2017

@Hybridx24, @Renatello, please give me your python version, pip freeze output, input css, actual output and expected output. i have pasted the css reported by @shezi into a test and in that test, the CSSAbsoluteFilter does not change it at all.

@Hybridx24
Copy link

Hybridx24 commented Oct 8, 2017

@karyon

Python: 3.6.2
Django: 1.11.5

requirements.txt:
appdirs==1.4.3 asn1crypto==0.23.0 bcrypt==3.1.3 boto==2.48.0 certifi==2017.7.27.1 cffi==1.11.1 chardet==3.0.4 cryptography==2.0.3 defusedxml==0.5.0 diff-match-patch==20121119 dj-database-url==0.4.2 Django==1.11.5 django-allauth==0.33.0 django-appconf==1.0.2 django-autoslug==1.9.3 django-axes==2.3.3 django-compressor==2.2 django-crispy-forms==1.6.1 django-debug-toolbar==1.8 django-extensions==1.9.1 django-imagekit==4.0.1 django-import-export==0.5.1 django-ipware==1.1.6 django-loginas==0.3.3 django-mptt==0.8.7 django-postman==3.5.1 django-reversion==2.0.10 django-smart-selects==1.5.2 django-storages==1.6.5 django-tz-detect==0.2.8 djrill==2.1.0 easypost==3.6.2 enum34==1.1.6 et-xmlfile==1.0.1 Fabric3==1.13.1.post1 geoip2==2.5.0 idna==2.6 igdb-api-python==1.0 ipaddress==1.0.18 jdcal==1.3 maxminddb==1.3.0 numpy==1.13.3 oauthlib==2.0.4 odfpy==1.3.5 olefile==0.44 openpyxl==2.4.8 packaging==16.8 pandas==0.20.3 paramiko==2.3.1 pilkit==2.0 Pillow==4.1.1 psycopg2==2.7.3.1 pyasn1==0.3.7 pycparser==2.18 PyNaCl==1.1.2 pyOpenSSL==17.3.0 pyparsing==2.2.0 python-dateutil==2.6.1 python-openid==2.2.5 python3-openid==3.1.0 pytz==2017.2 PyYAML==3.12 rcssmin==1.0.6 requests==2.18.4 requests-oauthlib==0.8.0 rjsmin==1.0.12 six==1.11.0 sorl-thumbnail==12.3 sqlparse==0.2.4 stripe==1.66.0 tablib==0.12.1 unicodecsv==0.14.1 Unidecode==0.4.21 urllib3==1.22 virtualenv==15.1.0 waitress==1.0.2 xlrd==1.1.0 xlwt==1.3.0 xmltodict==0.11.0

Input CSS:

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cfilter id='a'%3E%3CfeOffset dy='-96' in='SourceGraphic' result='b'%3E%3C/feOffset%3E%3CfeColorMatrix in='b' result='b' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0'%3E%3C/feColorMatrix%3E%3CfeComposite in='SourceGraphic' in2='b' operator='in'%3E%3C/feComposite%3E%3C/filter%3E%3C/defs%3E%3Cimage width='100%' height='200%' xmlns:A='http://www.w3.org/1999/xlink' A:href='data:image/jpeg;base64,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' filter='url(%23a)'%3E%3C/image%3E%3C/svg%3E");

Output CSS:

background-image: url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'width='96'height='96'viewBox='009696'xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cfilterid='a'%3E%3CfeOffsetdy='-96'in='SourceGraphic'result='b'%3E%3C/feOffset%3E%3CfeColorMatrixin='b'result='b'type='matrix'values='00000000000000000100'%3E%3C/feColorMatrix%3E%3CfeCompositein='SourceGraphic'in2='b'operator='in'%3E%3C/feComposite%3E%3C/filter%3E%3C/defs%3E%3Cimagewidth='100%'height='200%'xmlns:A='http://www.w3.org/1999/xlink'A:href='data:image/jpeg;base64,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'filter='url(%23a)'%3E%3C/image%3E%3C/svg%3E)

Expected output:
Unknown, but you could test by pasting CSS base64 code into url bar and seeing if it works properly.

@karyon
Copy link
Contributor

karyon commented Oct 9, 2017

that compresses just fine for me as well :( could you give me your settings.py, some more context of the css file (ideally the whole one) and the template where you are including this?

@Hybridx24
Copy link

Hybridx24 commented Oct 9, 2017

@karyon The css is really just an override next/previous arrow for swiper.js, so the rest of the code is largely irrelevant. All I know is that the CSS works perfectly until I wrap{% compress css %} tags around my swiper-overrides.css file. The error I get is:

This page contains the following errors:
error on line 1 at column 10: error parsing attribute name
Below is a rendering of the page up to the first error.

As for the settings.py:

import os
import sys
import dj_database_url

from django.contrib.messages import constants as messages

# Normally you should not import ANYTHING from Django directly
# into your settings, but ImproperlyConfigured is an exception.
from django.core.exceptions import ImproperlyConfigured


def get_env_variable(var_name):
    """Get the environment variable or return exception."""
    try:
        return os.environ[var_name]
    except KeyError:
        error_msg = "Set the {} environment variable".format(var_name)
        raise ImproperlyConfigured(error_msg)


# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(__file__)))

SECRET_KEY = get_env_variable('DJANGO_SECRET_KEY')

DEBUG = True

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.postgres',
    'django.contrib.sites',
    'django.contrib.humanize',

    # 3rd Party Packages
    'compressor',
    'storages',

   'main'
]

MIDDLEWARE = [
    'debug_toolbar.middleware.DebugToolbarMiddleware',  # Should be as high up as possible
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'tz_detect.middleware.TimezoneMiddleware',  # dj-tz-detect
    'django.middleware.security.SecurityMiddleware'  # Needed to make SECURE_SSL_REDIRECT work
]

ROOT_URLCONF = '<app>.urls'

WSGI_APPLICATION = '<app>.wsgi.application'

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.contrib.auth.context_processors.auth',
                'django.template.context_processors.debug',
                'django.template.context_processors.i18n',
                'django.template.context_processors.media',
                'django.template.context_processors.static',
                'django.template.context_processors.tz',
                'django.contrib.messages.context_processors.messages',

                "django.template.context_processors.request",
            ],
            'debug': True,  # Note: Enabled on dev/staging sites only.
            'string_if_invalid': 'INVALID VARIABLE (Check Template): %s'  # Note: Enabled on dev/staging sites only.
        },
    },
]

# dj-tz-detect
TZ_DETECT_COUNTRIES = ('US',)

SITE_ID = 1

DATABASES = {'default': dj_database_url.config()}

ALLOWED_HOSTS = ['*']

AWS_S3_SECURE_URLS = True
AWS_QUERYSTRING_AUTH = False
AWS_ACCESS_KEY_ID = get_env_variable('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = get_env_variable('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = '<app>'
AWS_S3_CUSTOM_DOMAIN = "s3.amazonaws.com/{0}".format(AWS_STORAGE_BUCKET_NAME)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',  # django-compressor
)

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "staticfiles"),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = "https://{0}/media/".format(AWS_S3_CUSTOM_DOMAIN)
STATIC_URL = "https://{0}/static/".format(AWS_S3_CUSTOM_DOMAIN)

DEFAULT_FILE_STORAGE = '<app>.s3utils.MediaS3BotoStorage'
STATICFILES_STORAGE = '<app>.s3utils.CachedS3BotoStorage'

COMPRESS_STORAGE = STATICFILES_STORAGE
COMPRESS_URL = STATIC_URL
COMPRESS_ROOT = STATIC_ROOT

COMPRESS_ENABLED = True
COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter', 'compressor.filters.cssmin.rCSSMinFilter']
COMPRESS_JS_FILTERS = ['compressor.filters.jsmin.JSMinFilter']

@jameysharp
Copy link

RCSSmin also mangles the same rule from Bootstrap 4, although in a different way than I guess CssAbsoluteFilter did; the minifier strips the spaces out of the data: URL. So if you're having trouble with a django-compressor version that has this bug fixed already, you might be hitting ndparker/rcssmin#8 instead.

@karyon
Copy link
Contributor

karyon commented Jun 11, 2019

re-reading this and #910 it seems to me that the original issue (wrong quoting) has indeed been fixed and the remaining issue (removed whitespace) is described in #910. thanks @Hybridx24, @jsma and @jameysharp.

@karyon karyon closed this as completed Jun 11, 2019
@dwasyl
Copy link

dwasyl commented Dec 5, 2019

For what it's worth I have been running into this same problem when compressor.filters.css_default.CssAbsoluteFilter was enabled, and compressing Bootstrap 4.

@karyon
Copy link
Contributor

karyon commented Dec 5, 2019

@dwasyl was RCSSmin also enabled? can you please paste the output of pip freeze, the input css, actual output and expected output?

@dwasyl
Copy link

dwasyl commented Jun 12, 2020

@karyon Sorry, I hadn't gotten back to this project in a little while. I'm using CSSMin, but not RCSSMin.

What I'm seeing as my uncompressed value is this:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e)

Then, after compression:
url("data:image/svg+xml,%3csvgxmlns='http://www.w3.org/2000/svg'width='30'height='30'viewBox='003030'%3e%3cpathstroke='rgba(255,255,255,0.5)'stroke-linecap='round'stroke-miterlimit='10'stroke-width='2'd='M47h22M415h22M423h22'/%3e%3c/svg%3e)

In settings, I have:

COMPRESS_CSS_FILTERS = [
    'compressor.filters.css_default.CssAbsoluteFilter',
    'compressor.filters.cssmin.CSSMinFilter'
]

As far as PIP freeze:

django-compressor==2.2
rcssmin==1.0.6

@karyon
Copy link
Contributor

karyon commented Jun 19, 2020

thanks. that looks indeed like #910.

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

No branches or pull requests

6 participants