Bourbon SCSS removal with codemod

A list of codemod steps to remove Bourbon from an scss codebase. Replace the -d src/ flag with a directory of your choice. For the project I'm converting now, each command should be run with the -d src/ flag, and then with the -d globals flag to catch all locations where scss files may live.

Transition

Basic calls to transition (e.g., @include transition(opacity 200ms linear)):

codemod -m -d src/ --extensions scss '@include transition\((.+?)\);' 'transition: \1;'

Sub-calls (anything matching @include transition-X, like transition-delay):

codemod -m -d src/ --extensions scss '@include transition-(.+?)\((.+?)\);' 'transition-\1: \2;'

Transform

Basic calls:

codemod -m -d src/ --extensions scss '@include transform\((.+?)\);' 'transform: \1;'

Transform origin:

codemod -m -d src/ --extensions scss '@include transform-origin\((.+?)\);' 'transform-origin: \1;'

Backface Visibility

codemod -m -d src/ --extensions scss '@include backface-visibility\((.+?)\);' 'backface-visibility: \1;'

Animations

Basic calls:

codemod -m -d src/ --extensions scss '@include animation\((.+?)\);' 'animation: \1;'

Sub-calls (anything matching @include animation-X, like animation-name):

codemod -m -d src/ --extensions scss '@include animation-(.+?)\((.+?)\);' 'animation-\1: \2;'

Border Image

codemod -m -d src/ --extensions scss '@include border-image\((.+?)\);' 'border-image: \1;'

Keyframes

codemod -m -d src/ --extensions scss '@include keyframes\((.+?)\) ?{' '@keyframes \1 {'

Linear Gradient

codemod -m -d src/ --extensions scss '@include (linear-gradient\(.+?\));' 'background: \1;'

Perspective

codemod -m -d src/ --extensions scss '@include perspective\((.+?)\);' 'perspective: \1;'

User Select

codemod -m -d src/ --extensions scss '@include user-select\((.+?)\);' 'user-select: \1;'

Background

codemod -m -d src/ --extensions scss '@include background\((.+?)\);' 'background: \1;'

Display

codemod -m -d src/ --extensions scss '@include display\((.+?)\);' 'display: \1;'

Flex

codemod -m -d src/ --extensions scss '@include flex-(.+?)\((.+?)\);' 'flex-\1: \2;'

Box Orient

codemod -m -d src/ --extensions scss '@include box-orient\((.+?)\);' 'box-orient: \1;'

Box Align

codemod -m -d src/ --extensions scss '@include box-align\((.+?)\);' 'box-align: \1;'

Media

Bourbon media queries are trickier and should be removed by hand. Search for @include media.

To remove Bourbon entirely

There are some very handy mixins that come with Bourbon, some of which you may be using and want to keep:

• triangle
• clearfix
• placeholder