search

JPeer264 / node-rename-css-selectors

📝 Rename css classes and id's in files
MIT License
66 stars 9 forks source link

Possible to perform processing on LESS files? #2

Closed davewallace closed 7 years ago

davewallace commented 7 years ago

I was hoping to test this library out on Bootstrap 3, to see if renaming their selectors with a prefix would be a workable solution. My other issue is a blocker to test on compiled CSS output and so I ran the default processCss() function on BS3's latest .less structure and generator regex errors:

$ gulp refix-process
[16:12:03] Using gulpfile C:\dev\bs-modified\gulpfile.js
[16:12:03] Starting 'refix-process'...
[16:12:03] Finished 'refix-process' after 2.79 ms
C:\dev\bs-modified\node_modules\rcs-core\lib\options\selectorLibrary.js:168
                regex = resultArray.length === 0 ? undefined : new RegExp(resultArray.join("|"), 'g');
                                                               ^

SyntaxError: Invalid regular expression: /.alert-variant(@alert-warning-bg;|.alert-variant(@alert-success-bg;|.alert-variant(@alert-danger-bg;|.alert-variant(@alert-info-bg;|.alert-dismissable|.alert-dismissible|.alert-success|.alert-warning|.alert-danger|.alert-info|.alert-link|.close|.alert|.2|.0/: Unterminated group
    at new RegExp (native)
    at SelectorLibrary.getAll (C:\dev\bs-modified\node_modules\rcs-core\lib\options\selectorLibrary.js:168:64)
    at C:\dev\bs-modified\node_modules\rcs-core\lib\options\replace.js:158:45
    at C:\dev\bs-modified\node_modules\graceful-fs\graceful-fs.js:78:16
    at tryToString (fs.js:414:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:401:12)

So next I tried the default processCss() on BS3's unminified dist CSS source (bootstrap.css) which again generated a regex throw:

$ gulp refix-process
[16:17:53] Using gulpfile C:\dev\bs-modified\gulpfile.js
[16:17:53] Starting 'refix-process'...
[16:17:53] Finished 'refix-process' after 2.81 ms
C:\dev\bs-modified\node_modules\rcs-core\lib\options\selectorLibrary.js:168
                regex = resultArray.length === 0 ? undefined : new RegExp(resultArray.join("|"), 'g');
                                                               ^

SyntaxError: Invalid regular expression: /.glyphicon-object-align-horizontal|.glyphicon-sort-by-attributes-alt|.glyphicon-object-align-vertical|.glyphicon-sort-by-alphabet-alt|.glyphicon-object-align-bottom|.glyphicon-circle-arrow-right|.glyphicon-sort-by-attributes|.glyphicon-object-align-right|.glyphicon-option-horizontal|.glyphicon-registration-mark|.glyphicon-resize-horizontal|.glyphicon-sort-by-order-alt|.glyphicon-object-align-left|.glyphicon-circle-arrow-down|.glyphicon-circle-arrow-left|.glyphicon-ice-lolly-tasted|.visible-print-inline-block|.glyphicon-sort-by-alphabet|.glyphicon-object-align-top|.glyphicon-exclamation-sign|.glyphicon-circle-arrow-up|.glyphicon-option-vertical|.glyphicon-text-background|.glyphicon-resize-vertical|.glyphicon-triangle-bottom|.glyphicon-triangle-right|.glyphicon-cloud-download|.glyphicon-facetime-video|.glyphicon-copyright-mark|.glyphicon-menu-hamburger|.glyphicon-tree-deciduous|.visible-sm-inline-block|.visible-md-inline-block|.glyphicon-sort-by-order|.glyphicon-triangle-left|.list-group-item-heading|.list-group-item-success|.visible-lg-inline-block|.list-group-item-warning|.modal-scrollbar-measure|.gradient(startColorstr=|.visible-xs-inline-block|.glyphicon-shopping-cart|.glyphicon-floppy-remove|.glyphicon-align-justify|.glyphicon-remove-circle|.glyphicon-question-sign|.glyphicon-collapse-down|.glyphicon-chevron-right|.glyphicon-fast-backward|.glyphicon-step-backward|.glyphicon-cloud-upload|.glyphicon-triangle-top|.glyphicon-step-forward|.glyphicon-chevron-left|.glyphicon-modal-window|.glyphicon-download-alt|.glyphicon-indent-right|.glyphicon-baby-formula|.glyphicon-tree-conifer|.glyphicon-fast-forward|.glyphicon-sound-stereo|.glyphicon-resize-small|.glyphicon-warning-sign|.glyphicon-floppy-saved|.glyphicon-chevron-down|.glyphicon-align-center|.glyphicon-folder-close|.list-group-item-danger|.glyphicon-resize-full|.glyphicon-indent-left|.glyphicon-align-right|.glyphicon-floppy-open|.glyphicon-remove-sign|.glyphicon-floppy-save|.glyphicon-play-circle|.glyphicon-sound-dolby|.glyphicon-arrow-right|.glyphicon-superscript|.glyphicon-folder-open|.glyphicon-floppy-disk|.glyphicon-credit-card|.glyphicon-certificate|.glyphicon-collapse-up|.glyphicon-thumbs-down|.form-control-feedback|.glyphicon-heart-empty|.glyphicon-text-height|.glyphicon-volume-down|.glyphicon-star-empty|.glyphicon-fullscreen|.glyphicon-hand-right|.list-group-item-info|.glyphicon-map-marker|.glyphicon-volume-off|.visible-print-inline|.progress-bar-striped|.glyphicon-headphones|.glyphicon-text-width|.glyphicon-new-window|.glyphicon-align-left|.glyphicon-chevron-up|.list-group-item-text|.glyphicon-compressed|.progress-bar-warning|.glyphicon-arrow-down|.glyphicon-arrow-left|.glyphicon-ban-circle|.glyphicon-screenshot|.glyphicon-blackboard|.glyphicon-piggy-bank|.glyphicon-minus-sign|.glyphicon-sunglasses|.glyphicon-text-color|.glyphicon-menu-right|.progress-bar-success|.form-control-static|.glyphicon-dashboard|.glyphicon-phone-alt|.carousel-indicators|.glyphicon-unchecked|.glyphicon-paperclip|.glyphicon-hand-left|.glyphicon-sound-5-1|.glyphicon-sound-6-1|.glyphicon-sound-7-1|.glyphicon-thumbs-up|.glyphicon-ok-circle|.visible-print-block|.glyphicon-save-file|.glyphicon-open-file|.glyphicon-equalizer|.glyphicon-info-sign|.glyphicon-hand-down|.glyphicon-hourglass|.glyphicon-duplicate|.btn-group-justified|.glyphicon-ice-lolly|.glyphicon-education|.glyphicon-volume-up|.navbar-fixed-bottom|.glyphicon-plus-sign|.glyphicon-menu-down|.glyphicon-briefcase|.glyphicon-text-size|.progress-bar-danger|.glyphicon-eye-close|.glyphicon-menu-left|.glyphicon-subscript|.glyphicon-share-alt|.dropdown-menu-right|.glyphicon-subtitles|.glyphicon-eye-open|.glyphicon-scissors|.glyphicon-list-alt|.glyphicon-download|.glyphicon-arrow-up|.glyphicon-bullhorn|.glyphicon-hd-video|.glyphicon-transfer|.glyphicon-calendar|.glyphicon-envelope|.nav-tabs-justified|.glyphicon-earphone|.glyphicon-level-up|.glyphicon-zoom-out|.glyphicon-backward|.glyphicon-th-large|.dropdown-menu-left|.glyphicon-sd-video|.btn-group-vertical|.blockquote-reverse|.glyphicon-bookmark|.glyphicon-asterisk|.glyphicon-menu-up|.glyphicon-refresh|.visible-xs-inline|.glyphicon-log-out|.glyphicon-cutlery|.glyphicon-barcode|.dropdown-backdrop|.navbar-static-top|.glyphicon-retweet|.alert-dismissable|.alert-dismissible|.glyphicon-forward|.visible-sm-inline|.visible-md-inline|.glyphicon-zoom-in|.glyphicon-hand-up|.glyphicon-th-list|.glyphicon-comment|.progress-bar-info|.glyphicon-ok-sign|.glyphicon-pushpin|.glyphicon-picture|.glyphicon-bitcoin|.glyphicon-console|.visible-lg-inline|.col-xs-offset-11|.table-responsive|.glyphicon-signal|.col-sm-offset-12|.col-sm-offset-11|.col-sm-offset-10|.visible-lg-block|.glyphicon-search|.glyphicon-knight|.visible-md-block|.glyphicon-pencil|.glyphicon-bishop|.visible-sm-block|.glyphicon-upload|.glyphicon-repeat|.visible-xs-block|.carousel-caption|.col-lg-offset-11|.gradient(enabled|.carousel-control|.glyphicon-header|.col-xs-offset-10|.glyphicon-remove|.glyphicon-export|.col-xs-offset-12|.glyphicon-import|.col-md-offset-12|.col-md-offset-11|.navbar-fixed-top|.glyphicon-record|.glyphicon-log-in|.glyphicon-expand|.glyphicon-qrcode|.col-md-offset-10|.glyphicon-filter|.glyphicon-wrench|.glyphicon-camera|.glyphicon-italic|.glyphicon-magnet|.glyphicon-random|.glyphicon-adjust|.progress-striped|.col-lg-offset-12|.col-lg-offset-10|.col-lg-offset-0|.col-lg-offset-1|.glyphicon-grain|.col-lg-offset-4|.glyphicon-share|.glyphicon-check|.glyphicon-globe|.col-lg-offset-5|.glyphicon-tasks|.col-lg-offset-6|.glyphicon-tower|.glyphicon-stats|.col-md-offset-2|.col-md-offset-3|.col-md-offset-4|.glyphicon-glass|.glyphicon-print|.col-md-offset-7|.glyphicon-phone|.col-md-offset-0|.col-md-offset-8|.col-md-offset-9|.glyphicon-plane|.glyphicon-pause|.col-xs-offset-0|.col-md-offset-1|.col-xs-offset-1|.glyphicon-music|.col-lg-offset-7|.col-xs-offset-2|.col-lg-offset-8|.glyphicon-eject|.col-sm-offset-1|.glyphicon-paste|.glyphicon-alert|.form-horizontal|.col-sm-offset-2|.glyphicon-queen|.col-sm-offset-3|.glyphicon-inbox|.glyphicon-heart|.glyphicon-minus|.col-xs-offset-3|.col-xs-offset-4|.text-capitalize|.popover-content|.col-xs-offset-5|.col-xs-offset-6|.col-xs-offset-7|.col-sm-offset-4|.col-xs-offset-8|.col-xs-offset-9|.dropdown-header|.col-sm-offset-5|.glyphicon-apple|.glyphicon-erase|.container-fluid|.glyphicon-flash|.col-sm-offset-6|.glyphicon-cloud|.navbar-collapse|.col-md-offset-5|.col-lg-offset-2|.col-md-offset-6|.col-sm-offset-7|.col-sm-offset-8|.col-sm-offset-9|.col-lg-offset-9|.glyphicon-ruble|.list-group-item|.glyphicon-saved|.glyphicon-scale|.col-lg-offset-3|.dropdown-toggle|.col-sm-offset-0|.glyphicon-trash|.checkbox-inline|.table-condensed|.glyphicon-save|.glyphicon-send|.navbar-default|.panel-collapse|.col-xs-pull-12|.col-xs-pull-11|.col-xs-pull-10|.col-xs-push-12|.col-xs-push-11|.col-xs-push-10|.pre-scrollable|.modal-backdrop|.text-uppercase|.text-lowercase|.carousel-inner|.img-responsive|.col-sm-pull-12|.col-sm-pull-11|.col-sm-pull-10|.col-sm-push-12|.col-sm-push-11|.col-sm-push-10|.glyphicon-lamp|.glyphicon-tent|.glyphicon-pawn|.glyphicon-king|.glyphicon-copy|.col-md-pull-12|.col-md-pull-11|.col-md-pull-10|.col-md-push-12|.col-md-push-11|.col-md-push-10|.glyphicon-open|.navbar-inverse|.glyphicon-sort|.glyphicon-link|.glyphicon-bell|.glyphicon-fire|.glyphicon-leaf|.glyphicon-gift|.glyphicon-stop|.glyphicon-play|.col-lg-pull-12|.col-lg-pull-11|.col-lg-pull-10|.col-lg-push-12|.col-lg-push-11|.col-lg-push-10|.glyphicon-move|.glyphicon-edit|.glyphicon-tint|.glyphicon-list|.glyphicon-bold|.glyphicon-font|.glyphicon-book|.glyphicon-tags|.glyphicon-flag|.glyphicon-lock|.glyphicon-road|.glyphicon-time|.glyphicon-file|.glyphicon-home|.glyphicon-film|.glyphicon-user|.glyphicon-star|.glyphicon-euro|.glyphicon-plus|.table-bordered|.col-sm-pull-1|.col-sm-pull-0|.panel-warning|.label-success|.label-primary|.col-sm-push-9|.col-sm-push-8|.col-sm-push-7|.col-sm-push-6|.col-sm-push-5|.col-sm-push-4|.col-sm-push-3|.col-sm-push-2|.col-sm-push-1|.col-sm-push-0|.glyphicon-oil|.glyphicon-rub|.glyphicon-jpy|.glyphicon-yen|.glyphicon-xbt|.glyphicon-btc|.label-default|.glyphicon-bed|.col-xs-pull-9|.col-xs-pull-8|.col-xs-pull-6|.col-xs-pull-5|.alert-warning|.col-xs-pull-4|.col-xs-pull-3|.col-xs-pull-2|.col-md-pull-9|.col-md-pull-8|.col-md-pull-7|.col-md-pull-6|.col-md-pull-5|.col-md-pull-4|.col-md-pull-3|.col-md-pull-2|.col-md-pull-1|.col-md-pull-0|.col-xs-pull-1|.col-xs-pull-0|.pagination-sm|.col-md-push-9|.col-md-push-8|.col-md-push-7|.col-md-push-6|.col-md-push-5|.col-md-push-4|.col-md-push-3|.col-md-push-2|.col-md-push-1|.col-md-push-0|.pagination-lg|.alert-success|.col-xs-push-9|.glyphicon-gbp|.glyphicon-usd|.col-xs-push-8|.col-xs-push-7|.glyphicon-hdd|.col-xs-push-6|.col-xs-push-5|.col-xs-push-4|.col-xs-push-3|.col-xs-push-2|.col-xs-push-1|.col-xs-push-0|.media-heading|.col-lg-pull-9|.col-lg-pull-8|.col-lg-pull-7|.col-lg-pull-6|.col-lg-pull-5|.col-lg-pull-4|.col-lg-pull-3|.col-lg-pull-2|.col-lg-pull-1|.col-lg-pull-0|.dl-horizontal|.modal-content|.list-unstyled|.col-lg-push-9|.col-lg-push-8|.col-lg-push-7|.col-lg-push-6|.col-lg-push-5|.col-lg-push-4|.col-lg-push-3|.col-lg-push-2|.col-lg-push-1|.col-lg-push-0|.navbar-toggle|.tooltip-inner|.tooltip-arrow|.popover-title|.panel-heading|.label-warning|.img-thumbnail|.panel-default|.glyphicon-tag|.navbar-header|.panel-primary|.nav-justified|.panel-success|.col-sm-pull-9|.table-striped|.col-sm-pull-8|.glyphicon-cog|.glyphicon-off|.col-sm-pull-7|.col-sm-pull-6|.col-sm-pull-5|.glyphicon-eur|.dropdown-menu|.col-sm-pull-4|.col-sm-pull-3|.form-group-sm|.form-group-lg|.col-sm-pull-2|.control-label|.visible-print|.col-xs-pull-7|.glyphicon-th|.navbar-brand|.center-block|.glyphicon-cd|.modal-footer|.modal-header|.progress-bar|.alert-danger|.panel-footer|.hidden-print|.glyphicon-ok|.text-primary|.form-control|.text-success|.label-danger|.text-justify|.radio-inline|.navbar-right|.btn-group-xs|.modal-dialog|.text-warning|.panel-danger|.has-feedback|.media-bottom|.btn-group-sm|.btn-group-lg|.media-middle|.media-object|.bottom-right|.text-danger|.form-inline|.has-warning|.btn-primary|.btn-success|.btn-warning|.modal-title|.has-success|.page-header|.list-inline|.img-rounded|.table-hover|.bottom-left|.btn-default|.btn-toolbar|.nav-divider|.panel-group|.nav-stacked|.panel-title|.tab-content|.media-right|.navbar-form|.text-nowrap|.navbar-text|.navbar-left|.navbar-link|.text-center|.bg-primary|.bg-success|.bg-warning|.text-muted|.btn-danger|.panel-info|.modal-body|.collapsing|.img-circle|.pull-right|.panel-body|.list-group|.media-list|.media-left|.visible-lg|.media-body|.navbar-nav|.form-group|.visible-md|.visible-sm|.visible-xs|.alert-info|.help-block|.modal-open|.breadcrumb|.pagination|.alert-link|.text-right|.label-info|.navbar-btn|.jumbotron|.icon-prev|.text-left|.col-xs-10|.col-sm-10|.hidden-lg|.col-md-10|.has-error|.col-lg-10|.col-xs-11|.pull-left|.col-sm-11|.col-md-11|.col-lg-11|.col-xs-12|.nav-pills|.icon-next|.col-md-12|.container|.text-info|.col-lg-12|.btn-group|.text-hide|.top-right|.Microsoft|.btn-block|.thumbnail|.bg-danger|.glyphicon|.hidden-xs|.hidden-sm|.hidden-md|.col-sm-12|.col-xs-6|.col-lg-5|.col-md-5|.col-sm-5|.col-xs-5|.disabled|.btn-link|.col-lg-9|.col-md-9|.icon-bar|.col-lg-4|.col-md-4|.col-sm-4|.col-xs-4|.previous|.col-sm-9|.col-lg-3|.col-md-3|.col-sm-3|.col-xs-3|.col-lg-2|.col-md-2|.carousel|.col-xs-9|.col-sm-2|.col-lg-8|.col-xs-2|.col-lg-1|.collapse|.col-md-1|.col-sm-1|.col-xs-1|.col-md-8|.col-sm-8|.col-xs-8|.btn-info|.tab-pane|.dropdown|.clearfix|.col-lg-7|.col-md-7|.checkbox|.col-sm-7|.nav-tabs|.col-xs-7|.col-lg-6|.progress|.top-left|.modal-sm|.modal-lg|.col-md-6|.col-sm-6|.tooltip|.bg-info|.well-sm|.well-lg|.popover|.caption|.divider|.warning|.btn-lg|.btn-sm|.btn-xs|.navbar|.hidden|.bottom|.active|.dropup|.danger|.alert|.caret|.badge|.pager|.right|.modal|.label|.table|.arrow|.panel|.focus|.media|.close|.radio|.affix|.lead|.left|.well|.prev|.open|.next|.mark|.fade|.item|.hide|.nav|.btn|.row|.top|.h6|.h1|.h4|.h2|.h5|.h3/: Unterminated group
    at new RegExp (native)
    at SelectorLibrary.getAll (C:\dev\bs-modified\node_modules\rcs-core\lib\options\selectorLibrary.js:168:64)
    at C:\dev\bs-modified\node_modules\rcs-core\lib\options\replace.js:158:45
    at C:\dev\bs-modified\node_modules\graceful-fs\graceful-fs.js:78:16
    at tryToString (fs.js:414:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:401:12)

Any ideas/thoughts?

JPeer264 commented 7 years ago

Can you provide me the sourcecode?

Again, maybe you try gulp-rcs 👍

JPeer264 commented 7 years ago

I just tried it with bootstrap.css. There is indeed a bug - I will solve that as soon I have time.

JPeer264 commented 7 years ago

Your problem should now be fixed with v0.1.0. I will also update gulp-rcs soon.

You might get other errors if you want to rename .less files. In those files are mixins, functions and other stuff, so it is pretty hard to filter all those .less features. It is better to rename already processed .less files to prevent any errors. So if you want to rename selectors in .less you will still get errors, as it triggers .alert-variant(@alert-warning-bg;, which is not a valid CSS syntax.

davewallace commented 7 years ago

Nice one, thanks @JPeer264 :)