SolidJS•4w ago

Post CSS with Solid Start

I have one question. Does someone know to include Post-CSS in Solid-Start project? I use SCSS and I would like to make the bundles smaller by analyzing the .tsx files. My files use scss like so.

    myfile.tsx
    myflie.tsx.scss

    myfile.tsx
    myflie.tsx.scss

I use .tsx.scss to group them in my IDE. And then I just import them into the .tsx file.

import './myfile.tsx.scss';

import './myfile.tsx.scss';

8 Replies

oke•4w ago

I believe Vite can process scss automatically https://vite.dev/guide/features#css-pre-processors and Vite should automatically analyze CSS imports for you

Jason.jsonOP•4w ago

Including purge?

oke•4w ago

I don't believe Vite purges anything. It would be hard to detect which class and rules are actually used in your JavaScript code vs. what's not, especially when the content is dynamically generated like in JavaScript frameworks

oke•4w ago

You can try using this plugin if you want to use PurgeCSS https://www.npmjs.com/package/@mojojoejo/vite-plugin-purgecss

npm

@mojojoejo/vite-plugin-purgecss

Vite plugin for removing unused CSS from generated bundles with PurgeCSS.. Latest version: 1.1.0, last published: 2 years ago. Start using @mojojoejo/vite-plugin-purgecss in your project by running npm i @mojojoejo/vite-plugin-purgecss. There are no other projects in the npm registry using @mojojoejo/vite-plugin-purgecss.

oke•4w ago

Or you can also use PurgeCSS directly, since Vite also supports PostCSS out-of-the-box, given you have a PostCSS config file at root level

// Create file: postcss.config.mjs
import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';

export default {
  plugins: [
    purgeCSSPlugin({
      content: ['./**/*.html'],
    }),
  ],
};

// Create file: postcss.config.mjs
import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';

export default {
  plugins: [
    purgeCSSPlugin({
      content: ['./**/*.html'],
    }),
  ],
};

Jason.jsonOP•4w ago

Oh cool Tbh I saw booth of those solutions before asking, but I wanted to be sure or find other solutions wich would work with solid start and vite. 🙂 Also in my case I should use .tsx files instead of html.

oke•4w ago

I don't know anything about PurgeCSS to be honest, so you would have to experiment with that. But I do agree that tsx instead of html is a reasonable assumption

Jason.jsonOP•4w ago

Sure thing, also same here. I've never used it before, but I want to make my website as much optimized as I can.

Gaming

Programming

Post CSS with Solid Start

Did you find this page helpful?