Why is uncss ignore not working right?

Question

For my site i'm using uncss to remove not used bootstrap-css. But there are two elements- the bootstrap carousel slide animation and an active-state in my navigation, which do not work properly after uncss generated the new css-file.

Heres my uncss-ignore

ignore: [
    ".tab",
    ".tab-content",
    ".tab-pane",
    ".fade",
    ".fade.in",
    ".collapse",
    ".collapse.in",
    ".collapsing",
    ".open",
    "/open+/",
    ".start",
    ".start .container-shadow",
    ".active",
    ".embed-responsive-item",
    ".embed-responsive",
    ".embed-responsive-16by9",
    ".schmerzfrei iframe",
    ".embed-responsive .embed-responsive-item",
    ".embed-responsive embed",
    ".embed-responsive object",
    ".embed-responsive iframe",
    ".embed-responsive video",
    ".highlight a:hover:after, .highlight a:focus:after, .highlight.active a:after",
    ".carousel-inner > .next",
    ".carousel-inner > .prev",
    ".carousel-inner > .next",
    ".carousel-inner > .prev",
    ".carousel-inner > .next.left",
    ".carousel-inner > .prev.right",
    ".carousel-inner > .active.left",
    ".carousel-inner > .active.right",
    ".carousel-inner>.item.active",
    ".carousel-inner>.item.next.left",
    ".carousel-inner>.item.prev.right",
    ".bs.carousel",
    ".slid.bs.carousel",
    ".slide.bs.carousel"
]
}

And this is my css which is necessary but does not get recognized by uncss

.highlight a:hover:after, .highlight a:focus:after, .highlight.active a:after {
    height: 0px;
    -webkit-transition: .3s cubic-bezier(0.71, -0.58, 0.07, 1.29);
    -moz-transition: .3s cubic-bezier(0.71, -0.58, 0.07, 1.29);
    -ms-transition: .3s cubic-bezier(0.71, -0.58, 0.07, 1.29);
    -o-transition: .3s cubic-bezier(0.71, -0.58, 0.07, 1.29);
    transition: .3s cubic-bezier(0.71, -0.58, 0.07, 1.29)
}

any comment or help would be great!

score 0 · Answer 1 · answered Mar 13 '16 at 12:20

According to https://github.com/giakki/uncss/issues/140, uncss does not strip selectors that have pseudoelements on them, so there should be no need to specify all of these in the ignore list, and presumably putting them in the ignore list will also not do anything.

You could try replacing

".highlight a:hover:after, .highlight a:focus:after, .highlight.active a:after"

with

new RegExp('^.highlight.*')

This should match your selectors and would be easier to read.

Why is uncss ignore not working right?

1 Answers1