brikou / css-in-js-generator Goto Github PK

On line 3073 the definition for inputGroup references formControl before it is defined.
This causes the wrong selector to be used.

Look like this is because the rule on line 3315

.btn-toolbar .input-group {
  width: auto;
}

Causes input-group to be generated before form-control which is defined later in the file.

Here is a screenshot of the css.

It'd be really nice to run npx css-in-js-generator out.js

I would like to use the package on the browser. But because of the usage of prettier, it breaks. I already use prettier after I get the output. Moving this to index.js will eventually separate the server side specific code.

Error using with emotion 10

• emotion not in dependencies

With emotion 10 import is @emotion/core

.display2 {
  color: 'red';
}
.display-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.1;
}

These seem to generate the same class name in JS:

export const display2 = css`
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.1;
`;
export const display2 = css`color: "red";`;

Not sure if there is a good solution.

So .form-check-label no longer has it's own styling, only related styles depending on the sibling input. This creates a rather strange bit of output!

    &:disabled ~ .form-check-label,
    &[disabled] ~ .form-check-label {
        opacity: 0.5;
    }

    &.${isValid} {
        border-color: #198754;
    }

In the following example, the transformer demonstrates the following rule:

.alert-dismissible .close {
    position: relative;
    top: -0.75rem;
    right: -1.25rem;
    padding: 0.75rem 1.25rem;
    color: inherit;
}

being converted into:

export const alertDismissible = css`
  & .${close} {
    position: relative;

    top: -0.75rem;

    right: -1.25rem;

    padding: 0.75rem 1.25rem;

    color: inherit;
  }
`

This should come with a warning as, per emotions documentation:

To nest a class selector using the class generated with css you can interpolate it but this is strongly recommended against and should only be used in rare circumstances because it will break when used with composition.

Meaning that it'll break when trying to force specificity using cx

This looks like a really great project.

I have developed an IDE https://transform.now.sh/ and would love to have this on the site. Let me know if you can help or else, I will be happy to do it myself when I have time.

I am seeing that there are a lot of newlines in injectGlobal