Example

Styled system v4

import styled from '@emotion/styled';
import {
  typography,
  space,
  color,
  themeGet
} from 'styled-system';
 
const Box = styled.div`
  ${typography}
  ${space}
  ${color}
  background-color: ${props => themeGet('colors.brand')}
`;
import styled from '@emotion/styled';
import {
  typography,
  space,
  color,
  themeGet
} from 'styled-system';
 
const Box = styled.div`
  ${typography}
  ${space}
  ${color}
  background-color: ${props => themeGet('colors.brand')}
`;
import styled from '@emotion/styled';
import {
  typography,
  space,
  color,
  themeGet
} from 'styled-system';
 
const Box = styled.div`
  ${typography}
  ${space}
  ${color}
  background-color: ${props => themeGet('colors.brand')}
`;

Example

Styled system v5

import styled from '@emotion/styled';
import {
  typography,
  space,
  color,
} from 'styled-system';
import { themeGet } from '@styled-system/theme-get';
 
const Box = styled.div`
  ${typography}
  ${space}
  ${color}
  background-color: ${props => themeGet('colors.brand')}
`;
import styled from '@emotion/styled';
import {
  typography,
  space,
  color,
} from 'styled-system';
import { themeGet } from '@styled-system/theme-get';
 
const Box = styled.div`
  ${typography}
  ${space}
  ${color}
  background-color: ${props => themeGet('colors.brand')}
`;

Breaking change

😵

Scenario #1

import { themeGet } from 'styled-system';

Scenario #2

import { typography, themeGet } from 'styled-system';

Scenario #3

import { themeGet, space } from 'styled-system';

Scenario #4

import { typography, themeGet, space } from 'styled-system';

Scenario #5

import {
  color,
  typography,
  themeGet,
  space,
  layout
} from 'styled-system';

Scenario #6

import {
  themeGet,
  color,
  typography,
  space,
  layout
} from 'styled-system';

Scenario #7

import {
  color,
  typography,
  space,
  layout,
  themeGet
} from 'styled-system';

Bonus cases

Not covered

Scenario #8

import {
  themeGet as styledSystemThemeGet
} from 'styled-system';

Scenario #9

import * as styledSystem from 'styled-system';
 
styledSystem.themeGet('color.brand');

How to use it?

🤔

Useful tool #1

Your code editor/IDE

Useful tool #2

Perl interpreter 🤓

MATCH="\
(import {[\s\S]*)\
(themeGet,?)\
([\s\S]*} from 'styled-system';)\
"
 
REPLACE="\
\1\3
import { themeGet } from '\@styled-system/theme-get'\;
"
 
perl -i -0pe "s|$MATCH|$REPLACE|gm" src/**/*.js
MATCH="\
(import {[\s\S]*)\
(themeGet,?)\
([\s\S]*} from 'styled-system';)\
"
 
REPLACE="\
\1\3
import { themeGet } from '\@styled-system/theme-get'\;
"
 
perl -i -0pe "s|$MATCH|$REPLACE|gm" src/**/*.js
MATCH="\
(import {[\s\S]*)\
(themeGet,?)\
([\s\S]*} from 'styled-system';)\
"
 
REPLACE="\
\1\3
import { themeGet } from '\@styled-system/theme-get'\;
"
 
perl -i -0pe "s|$MATCH|$REPLACE|gm" src/**/*.js
MATCH="\
(import {[\s\S]*)\
(themeGet,?)\
([\s\S]*} from 'styled-system';)\
"
 
REPLACE="\
\1\3
import { themeGet } from '\@styled-system/theme-get'\;
"
 
perl -i -0pe "s|$MATCH|$REPLACE|gm" src/**/*.js

Useful tool #3

Just use any scripting language

const fs = require('fs')
const glob = require('glob')
const regexp = /.../g
const replace = '...'
 
glob('src/**/*.{ts,tsx}', (err, files) => {
  files.forEach(filename => {
    const contents =
      fs.readFileSync(filename, { encoding: 'utf-8' })
 
    if (contents.indexOf('themeGet') !== -1) {
      fs.writeFileSync(
        filename,
        contents.replace(regexp, replace)
      )
    }
  })
})
const fs = require('fs')
const glob = require('glob')
const regexp = /.../g
const replace = '...'
 
glob('src/**/*.{ts,tsx}', (err, files) => {
  files.forEach(filename => {
    const contents =
      fs.readFileSync(filename, { encoding: 'utf-8' })
 
    if (contents.indexOf('themeGet') !== -1) {
      fs.writeFileSync(
        filename,
        contents.replace(regexp, replace)
      )
    }
  })
})
const fs = require('fs')
const glob = require('glob')
const regexp = /.../g
const replace = '...'
 
glob('src/**/*.{ts,tsx}', (err, files) => {
  files.forEach(filename => {
    const contents =
      fs.readFileSync(filename, { encoding: 'utf-8' })
 
    if (contents.indexOf('themeGet') !== -1) {
      fs.writeFileSync(
        filename,
        contents.replace(regexp, replace)
      )
    }
  })
})
const fs = require('fs')
const glob = require('glob')
const regexp = /.../g
const replace = '...'
 
glob('src/**/*.{ts,tsx}', (err, files) => {
  files.forEach(filename => {
    const contents =
      fs.readFileSync(filename, { encoding: 'utf-8' })
 
    if (contents.indexOf('themeGet') !== -1) {
      fs.writeFileSync(
        filename,
        contents.replace(regexp, replace)
      )
    }
  })
})

Pros:

1. Widely supported
2. Ton of tutorials
3. Lot's of assist tools

Cons:

1. Low maintainability
2. Low readability
3. Doesn't scale
4. Need 2 replaces

Scenario #1 (reminder)

import { themeGet } from 'styled-system';

🧙‍♀️ regexp magic 🧙

import { } from 'styled-system';
import { themeGet } from '@styled-system/theme-get';

Highlights

1. Capturing groups (regexp) -> Holes
2. Holes can be named
3. Holes can (optionally) accept regexp
4. No need to escape any chars (really!)

What is comby.dev syntax

• named hole :[var]
• named hole with regex :[var~regex]
• nameless hole with regex:[~regex]

foo.bar(argument)

foobar(unwrap(argument))

How we can solve it with regex?

Time for Comby.dev

Some useful comby.dev features

Let's use Comby.dev for themeGet import

CLI

COMBY_M="$(cat <<"MATCH"
import {
:[before]themeGet:[~,?]:[after]
} from 'styled-system'
MATCH
)"
 
COMBY_R="$(cat <<"REWRITE"
import {:[before]:[after]} from 'styled-system'
import { themeGet } from '@styled-system/theme-get'
REWRITE
)"
 
comby "$COMBY_M" "$COMBY_R" .js -i -d src
COMBY_M="$(cat <<"MATCH"
import {
:[before]themeGet:[~,?]:[after]
} from 'styled-system'
MATCH
)"
 
COMBY_R="$(cat <<"REWRITE"
import {:[before]:[after]} from 'styled-system'
import { themeGet } from '@styled-system/theme-get'
REWRITE
)"
 
comby "$COMBY_M" "$COMBY_R" .js -i -d src
COMBY_M="$(cat <<"MATCH"
import {
:[before]themeGet:[~,?]:[after]
} from 'styled-system'
MATCH
)"
 
COMBY_R="$(cat <<"REWRITE"
import {:[before]:[after]} from 'styled-system'
import { themeGet } from '@styled-system/theme-get'
REWRITE
)"
 
comby "$COMBY_M" "$COMBY_R" .js -i -d src
COMBY_M="$(cat <<"MATCH"
import {
:[before]themeGet:[~,?]:[after]
} from 'styled-system'
MATCH
)"
 
COMBY_R="$(cat <<"REWRITE"
import {:[before]:[after]} from 'styled-system'
import { themeGet } from '@styled-system/theme-get'
REWRITE
)"
 
comby "$COMBY_M" "$COMBY_R" .js -i -d src

Pros:

1. Super easy
2. Dedicated for code
3. Web playground for testing
4. Dedicated gitter channel
5. Ready-to-use cli command

Cons:

1. Low maintainability true
2. Low readability false
3. Doesn't scale true
4. Need 2 replaces true

What are codemods

Code that rewrites code

Video of AST explorer

light mode warning ⚠️

JsCodeShift API showcase

export const transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  return j(fileInfo.source)
    .find(/* styled-system import with themeGet */)
    .replaceWith(/* import without themeGet */)
    .insertAfter(/* @styled-system/theme-get import */)
    .toSource();
};
export const transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  return j(fileInfo.source)
    .find(/* styled-system import with themeGet */)
    .replaceWith(/* import without themeGet */)
    .insertAfter(/* @styled-system/theme-get import */)
    .toSource();
};
export const transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  return j(fileInfo.source)
    .find(/* styled-system import with themeGet */)
    .replaceWith(/* import without themeGet */)
    .insertAfter(/* @styled-system/theme-get import */)
    .toSource();
};
export const transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  return j(fileInfo.source)
    .find(/* styled-system import with themeGet */)
    .replaceWith(/* import without themeGet */)
    .insertAfter(/* @styled-system/theme-get import */)
    .toSource();
};
export const transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  return j(fileInfo.source)
    .find(/* styled-system import with themeGet */)
    .replaceWith(/* import without themeGet */)
    .insertAfter(/* @styled-system/theme-get import */)
    .toSource();
};
export const transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  return j(fileInfo.source)
    .find(/* styled-system import with themeGet */)
    .replaceWith(/* import without themeGet */)
    .insertAfter(/* @styled-system/theme-get import */)
    .toSource();
};

Time for for codmod writing

const transform: Transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  const isThemeGet = (specifier) =>
    specifier.type === 'ImportSpecifier' &&
    specifier.imported.name === 'themeGet';
 
  return j(fileInfo.source)
    .find(j.ImportDeclaration, {
      source: { value: 'styled-system' },
      specifiers: (specifiers) =>
        specifiers?.some(isThemeGet) ?? false,
    })
    .replaceWith(({ node }) => {
      const specifiersWithoutThemeGet =
        node.specifiers?.filter(
          (specifier) =>
            !isThemeGet(specifier)
        ) ?? [];
 
      return specifiersWithoutThemeGet.length > 0
        ? j.importDeclaration(
            specifiersWithoutThemeGet,
            node.source,
            node.importKind
          )
        : null;
    })
    .insertAfter(
      j.template
        .statement`
          import {
            theme-get
          } from '@styled-system/theme-get'
        `
    )
    .toSource();
};
const transform: Transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  const isThemeGet = (specifier) =>
    specifier.type === 'ImportSpecifier' &&
    specifier.imported.name === 'themeGet';
 
  return j(fileInfo.source)
    .find(j.ImportDeclaration, {
      source: { value: 'styled-system' },
      specifiers: (specifiers) =>
        specifiers?.some(isThemeGet) ?? false,
    })
    .replaceWith(({ node }) => {
      const specifiersWithoutThemeGet =
        node.specifiers?.filter(
          (specifier) =>
            !isThemeGet(specifier)
        ) ?? [];
 
      return specifiersWithoutThemeGet.length > 0
        ? j.importDeclaration(
            specifiersWithoutThemeGet,
            node.source,
            node.importKind
          )
        : null;
    })
    .insertAfter(
      j.template
        .statement`
          import {
            theme-get
          } from '@styled-system/theme-get'
        `
    )
    .toSource();
};
const transform: Transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  const isThemeGet = (specifier) =>
    specifier.type === 'ImportSpecifier' &&
    specifier.imported.name === 'themeGet';
 
  return j(fileInfo.source)
    .find(j.ImportDeclaration, {
      source: { value: 'styled-system' },
      specifiers: (specifiers) =>
        specifiers?.some(isThemeGet) ?? false,
    })
    .replaceWith(({ node }) => {
      const specifiersWithoutThemeGet =
        node.specifiers?.filter(
          (specifier) =>
            !isThemeGet(specifier)
        ) ?? [];
 
      return specifiersWithoutThemeGet.length > 0
        ? j.importDeclaration(
            specifiersWithoutThemeGet,
            node.source,
            node.importKind
          )
        : null;
    })
    .insertAfter(
      j.template
        .statement`
          import {
            theme-get
          } from '@styled-system/theme-get'
        `
    )
    .toSource();
};
const transform: Transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  const isThemeGet = (specifier) =>
    specifier.type === 'ImportSpecifier' &&
    specifier.imported.name === 'themeGet';
 
  return j(fileInfo.source)
    .find(j.ImportDeclaration, {
      source: { value: 'styled-system' },
      specifiers: (specifiers) =>
        specifiers?.some(isThemeGet) ?? false,
    })
    .replaceWith(({ node }) => {
      const specifiersWithoutThemeGet =
        node.specifiers?.filter(
          (specifier) =>
            !isThemeGet(specifier)
        ) ?? [];
 
      return specifiersWithoutThemeGet.length > 0
        ? j.importDeclaration(
            specifiersWithoutThemeGet,
            node.source,
            node.importKind
          )
        : null;
    })
    .insertAfter(
      j.template
        .statement`
          import {
            theme-get
          } from '@styled-system/theme-get'
        `
    )
    .toSource();
};
const transform: Transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  const isThemeGet = (specifier) =>
    specifier.type === 'ImportSpecifier' &&
    specifier.imported.name === 'themeGet';
 
  return j(fileInfo.source)
    .find(j.ImportDeclaration, {
      source: { value: 'styled-system' },
      specifiers: (specifiers) =>
        specifiers?.some(isThemeGet) ?? false,
    })
    .replaceWith(({ node }) => {
      const specifiersWithoutThemeGet =
        node.specifiers?.filter(
          (specifier) =>
            !isThemeGet(specifier)
        ) ?? [];
 
      return specifiersWithoutThemeGet.length > 0
        ? j.importDeclaration(
            specifiersWithoutThemeGet,
            node.source,
            node.importKind
          )
        : null;
    })
    .insertAfter(
      j.template
        .statement`
          import {
            theme-get
          } from '@styled-system/theme-get'
        `
    )
    .toSource();
};
const transform: Transform = (fileInfo, api) => {
  const { jscodeshift: j } = api;
 
  const isThemeGet = (specifier) =>
    specifier.type === 'ImportSpecifier' &&
    specifier.imported.name === 'themeGet';
 
  return j(fileInfo.source)
    .find(j.ImportDeclaration, {
      source: { value: 'styled-system' },
      specifiers: (specifiers) =>
        specifiers?.some(isThemeGet) ?? false,
    })
    .replaceWith(({ node }) => {
      const specifiersWithoutThemeGet =
        node.specifiers?.filter(
          (specifier) =>
            !isThemeGet(specifier)
        ) ?? [];
 
      return specifiersWithoutThemeGet.length > 0
        ? j.importDeclaration(
            specifiersWithoutThemeGet,
            node.source,
            node.importKind
          )
        : null;
    })
    .insertAfter(
      j.template
        .statement`
          import {
            theme-get
          } from '@styled-system/theme-get'
        `
    )
    .toSource();
};

Usage

cli

jscodeshift -t theme-get.ts src/**/*.js
          

Bonus

Code can be easily unit tested

defineInlineTest(
  transform,
  {},
  `
import { a, themeGet, b } from 'styled-system';
  `,
  `
import { a, b } from 'styled-system';
import { themeGet } from '@styled-system/theme-get';
  `
)
defineInlineTest(
  transform,
  {},
  `
import { a, themeGet, b } from 'styled-system';
  `,
  `
import { a, b } from 'styled-system';
import { themeGet } from '@styled-system/theme-get';
  `
)
defineInlineTest(
  transform,
  {},
  `
import { a, themeGet, b } from 'styled-system';
  `,
  `
import { a, b } from 'styled-system';
import { themeGet } from '@styled-system/theme-get';
  `
)

Pros:

1. Extremely powerful
2. Typescript support
3. Easy setup for unit tests

Cons:

1. Low maintainability false
2. Low readability false
3. Doesn't scale false
4. Need 2 replaces false
5. Poor documentation
6. Entry barrier (not that scary)

What to keep in mind (a recap 📝)

1. Regular expressions are useful to know
2. Comby is super easy for simple code rewrite
3. Codemods takes time for setup but outmatches others in complicated cases

Thank you

Bartosz Szewczyk

👨🏼‍💻 Tech Lead @ Codete

@sztobar

Useful links

comby.dev how-it-works talk

regexr.com a js regexp assist tool

jscodeshift-theme-get-styled-system-v5 themeGet codemod (with bonus cases covered!)