activeguild / css-to-vanilla-extract

Generate vanilla-extract typescript file from the CSS (SCSS/SASS) file.

https://gist.github.com/activeguild

Hi there 👋

css-to-vanilla-extract's Issues

index.node is not a valid Wiin32 application

Hey!
Awesome tool, thanks for this it is really useful!

I cant get it to work on my project. Getting error when trying to run:

Any thought on a way to fix this?

Property changed the ordering

I have a suggestion, is it better not to change the order of the properties...

selector overridden by error

The same css selector with non-conflicting styles applied, but only the one written at the end is converted correctly during the conversion

styles of L1-L11 doesn‘t appear in the results

Incorrectly formats string for grid template areas

Hey, love this tool, just noticed this.

This css:

.container {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-template-columns: 1fr 1fr 0.2fr 1.8fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "lorem ipsum dolor sit"
    "lorem ipsum dolor sit"
    "lorem ipsum dolor sit"
    "lorem ipsum dolor sit"
    "lorem ipsum dolor sit"; 
}

converts too:

export const container = style({
    display: 'grid',
    gridTemplateColumns: '1fr 1fr 0.2fr 1.8fr',
    gridTemplateRows: '1fr 1fr 1fr 1fr 1fr',
    gridAutoColumns: '1fr',
    gap: '0px 0px',
    gridAutoFlow: 'row',
    gridTemplateAreas:
        'lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit',
});

the property gridTemplateAreas needs to include double quotes to break them up. should look like this:

export const container = style({
    display: 'grid',
    gridTemplateColumns: '1fr 1fr 0.2fr 1.8fr',
    gridTemplateRows: '1fr 1fr 1fr 1fr 1fr',
    gridAutoColumns: '1fr',
    gap: '0px 0px',
    gridAutoFlow: 'row',
    gridTemplateAreas:
        '"lorem ipsum dolor sit" "lorem ipsum dolor sit"  "lorem ipsum dolor sit" "lorem ipsum dolor sit" "lorem ipsum dolor sit"',
});

I would love to help out with a PR if you could point me in the right direction, i am not very familiar with Rust but have been looking for a reason to learn. <3

stress test: bootstrap grid css converting to vanilla-extract

Steps:

• go to https://github.com/twbs/bootstrap and download the latest compiled version of the bootstrap 5.3.0-alpha1
• from the archive, take file: dist/css/bootstrap-grid.css
• go to Playground https://css-to-vanilla-extract.netlify.app/
• copy/paste the content of the CSS file and check .container style conversion

Expected: convert all styles
Result: most of the styles with @media converted badly. !important missed, etc.

bootstrap-grid.css.txt

Slectors is incorrect

Hi, I found taht this is wrong, u can refer to this:

lost the "#"