[SOLVED] Why is my CSS rule not applied in Firefox Quantum? Does is have CSS rules limits?

Recently I had an issue with new Firefox Quantum that is so annoying. it seems like IE 6-9 css rule limits, like these:

Any rules after the first 4,095 are ignored.
Any stylesheets included via @import, or , are ignored after the first 31.
@import statements nested 4 or more levels deep are ignored.

We are using stylus @extends to extend the classes. and some of these classes/css properties has more than 50 css selectors, everything is fine in chrome (all versions), firefox (all versions but the new quantum version) and IE9+. everything is completely missed up in new firefox quantum (version 57). we had this issue with IE 8-7-6 but we didn't care about IE. now we have this issue with the lastest firefox quantum browser.

For example this is a peace of my code(css selectors that extended with stylus extends):

.absolute,
.inline-input .input-icon > i,
.check-box-green input,
.radio-button-green input,
.check-box-green input + label,
.radio-button-green input + label,
.check-box-green input + label:before,
.radio-button-green input + label:before,
.check-box-green input + label:after,
.radio-button-green input + label:after,
.submit:after,
.trumpet .submit:after,
.submit:before,
.trumpet .submit:before,
.submit-icon-left > i,
.trumpet .submit-icon-left > i,
.submit.loading .spinning,
.trumpet .submit.loading .spinning,
.form .row.required > span:first-child:after,
.sidebar .sidebar-menu,
.sidebar li a.selected:after,
.sidebar li.parent .toggle-menu,
.sidebar li.parent .toggle-menu:before,
.sidebar.admin .admin-nav a > span,
.sidebar.admin .admin-nav li .notif:before,
.sidebar > :last-child,
.modal:before,
.modal .in,
.modal .title:after,
.modal .x,
.topbar .item:after,
.topbar .right .item:after,
.topbar .left .item:after,
.topbar i .item:after,
.topbar span .item:after,
.topbar .messages .msg-count,
.item .avatar i,
.item .avatar.avatar img,
.table-data[ data-table-pagination ]:before,
.table-pagination .pl .next,
.table-pagination .pl .prev,
.check-box,
.radio,
.check-box + label:before,
.radio + label:before,
.check-box + label:after,
.radio + label:after,
.drop-down .menu-drop-inactive,
.progress-bar-wrapper .progress-bar,
.input-error:before,
.input-error:after,
.appended-error > span:before,
.x-loading:before,
.loading-box,
.loading-box .x-loading,
.loading-circles,
.loading-circles:after,
.cell-loading:before,
.message-box .message-title:before,
.logo svg,
.expandable .handler:after,
.xntitle-new:before,
.xntitle-new .new,
.alert_message:before,
.tbl-tdcolspan,
.breadcrumb > *:before,
.tip-desc::before,
.tip-title,
.tip-title::before,
.tip-title .tip-title::after,
.circle,
#lightbox .popup-btn,
#lightbox #submit-loader,
#banner_hover,
.step_camp ol.steps li img.img-arrow,
.step_camp ol.steps li img.img-tik,
.step_camp ol.steps li .img-place,
.step_camp ol.steps li div.progress,
#live_loading,
.icn,
.fademe::before,
.fademe::after,
.env-label span,
.password-eye #show-pass,
.text-information > i,
.ui-datepicker.ui-datepicker.ui-datepicker:before,
.ui-datepicker.ui-datepicker.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker.ui-datepicker.ui-datepicker .ui-datepicker-next:before,
.loading-data:after,
.noUi-connect,
.noUi-origin,
.tabination-tab li::after,
.campaign-creation .text-information > i,
.steps-header .steps .step:after,
.steps-footer .step-next > i,
.select-budget .block label,
.banners-content .upload-banner-container .drag-and-drop:before,
.banners-content .upload-banner-container .generate:before,
.banners-content .upload-banner-container .drag-and-drop .inner,
.banners-content .upload-banner-container .generate .inner,
.banners-content .upload-banner-container.dragging:before,
.banners-content .upload-banner-container.dragging:after,
.uploaded-banners .file:before,
.uploaded-banners .file-progress,
.uploaded-banners .file-view,
.uploaded-banners .file-view:before,
.review .review-list .review-row .edit-step,
.review .row-c-banner .files-selected + .show-more,
.review .row-c-video .files-selected + .show-more,
.review .review-logo .files-selected + .show-more,
.review .row-c-targeting ul > li .edit-button,
.review .row-c-price .total-price .title > i,
.iframe-content .iframe-preview .preview-box:empty:before,
.file-box.uploaded:before,
.file-box.has-error:before,
.file-box .file-icon,
.file-box .file-status,
.telegram-message-preview .inner-box,
.telegram-message-preview .inner-box .example-text:after {

  position: absolute;

}

As you can see, it has 118 css class selectors that has position: absolute property, all browser supports it but the new firefox quantum and IE 6-8 does not. and this ends up with a missed up page.

Anyone knows about this problem?
Is this the same issue with IE css rules limits?
I can't find any document about this problem of firefox quantum! how to fix this issue?

Thanks.