-
-
Save haydenbbickerton/21ed306de8bfded6d09b0e1a5709cb99 to your computer and use it in GitHub Desktop.
| <template> | |
| <div class="ur-legacy-styles"> | |
| <slot></slot> | |
| </div> | |
| </template> | |
| <script> | |
| export default { | |
| name: 'ur-legacy-styles', | |
| }; | |
| </script> | |
| <style scoped lang="scss"> | |
| .ur-legacy-styles /deep/ { | |
| @import "./legacy-styles.scss"; | |
| } | |
| </style> |
The beauty of the legacy styles component is that it will prefix every single rule imported from the legacy css file. So whether you want to pass a large section of a page (like a <div class="header") or just a simple <button>, it will be styled using the old website CSS. And that goes down to any depth and any selectors that get imported.
I've actually not seen this approach used anywhere else, which made me somewhat hesitant at first but it has worked swimmingly well even for components like modal backdrops and portal components, and has stood up very well across the large amount of traffic and different sites used under the United rentals umbrella.
If paired with a custom element solution like vuidget, you could conceivably have something like:
<body>
<bootstrap-3-styles>
<div class="container">
...
</div>
</bootstrap-3-styles>
<bootstrap-4-styles>
<div class="grid">
...
</div>
</bootstrap-4-styles>
<zurb-foundation-styles>
<button class="button">
...
</div>
</zurb-foundation-styles>
</body>
with a single, async and lazy loadable script tag per style-set, making them compatible with all browsers/platforms back to IE8.
This
<ur-legacy-styles>component is actually still in use on the live https://www.unitedrentals.com/ site. Assuming thatlegacy-styles.scssis a compressed and concatenated copy of all a sites CSS, it is a simple way to make an iframe-like component that will apply all of a previous sites styling to any number of components passed through to the slot. No other attributes or events were used/listened to, so as to not encourage communication between multiple versions of site components (and hopefully "choke off" the old versions).