Skip to content

Instantly share code, notes, and snippets.

@kristojorg

kristojorg/styled-specificity-codemod.js

Last active February 9, 2022 12:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kristojorg/abe305a2ecf49e173c56ef42e977f362 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kristojorg/abe305a2ecf49e173c56ef42e977f362 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kristojorg renamed this gist Dec 28, 2017. 1 changed file with 2 additions and 5 deletions.
    7 changes: 2 additions & 5 deletions styled-specificity-codemod → styled-specificity-codemod.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,6 @@ module.exports = (file, api, options) => {
    return j.taggedTemplateExpression(tag, quasi);

    // Get the identifier for styled in either styled.View`...` or styled(View)`...`
    // Note we aren't checking the name of the callee
    // this should check if it is a "styled" tagged template expression
    const callee = tagTypes[tag.type](tag);
    if (callee.type !== 'Identifier' || callee.name !== 'styled')
    @@ -29,6 +28,8 @@ module.exports = (file, api, options) => {
    const firstEl = quasi.quasis[0];
    const lastEl = quasi.quasis[quasi.quasis.length - 1];

    // modify them as needed. Whitepsace is ugly here, but
    // I use prettier to update this after.
    firstEl.value.raw = `
    && { ${firstEl.value.raw}`;
    firstEl.value.cooked = `
    @@ -47,7 +48,3 @@ module.exports = (file, api, options) => {
    .toSource();
    };

    /**
    * Take the first element in quasis, and prepend && { to the raw and cooked values
    * Take the last element in quasis and append } to the raw and cooked values
    */
  2. kristojorg created this gist Dec 28, 2017.
    53 changes: 53 additions & 0 deletions styled-specificity-codemod
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    const tagTypes = {
    Identifier: node => node,
    CallExpression: node => node.callee,
    MemberExpression: node => node.object,
    };

    module.exports = (file, api, options) => {
    const j = api.jscodeshift;
    const ast = j(file.source);

    // find the taggedtemplate expressions
    return ast
    .find(j.TaggedTemplateExpression)
    .replaceWith(path => {
    const { quasi, tag } = path.node;

    // if it is not one of the right types, continue
    if (!(tag.type in tagTypes))
    return j.taggedTemplateExpression(tag, quasi);

    // Get the identifier for styled in either styled.View`...` or styled(View)`...`
    // Note we aren't checking the name of the callee
    // this should check if it is a "styled" tagged template expression
    const callee = tagTypes[tag.type](tag);
    if (callee.type !== 'Identifier' || callee.name !== 'styled')
    return j.taggedTemplateExpression(tag, quasi);

    // get the internals of the expression in order to wrap it.
    const firstEl = quasi.quasis[0];
    const lastEl = quasi.quasis[quasi.quasis.length - 1];

    firstEl.value.raw = `
    && { ${firstEl.value.raw}`;
    firstEl.value.cooked = `
    && { ${firstEl.value.cooked}`;

    lastEl.value.raw = `${lastEl.value.raw} }`;
    lastEl.value.cooked = `${lastEl.value.cooked} }`;

    // return a new taggedTemplateExpression
    const newTemplateLiteral = j.templateLiteral(
    quasi.quasis,
    quasi.expressions
    );
    return j.taggedTemplateExpression(tag, newTemplateLiteral);
    })
    .toSource();
    };

    /**
    * Take the first element in quasis, and prepend && { to the raw and cooked values
    * Take the last element in quasis and append } to the raw and cooked values
    */