packages VS vulcan-next

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Hi all!I have made a guide on how to switch from Styled Components CSS-in-JS to Stylify Utility-First CSS.Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.I would be happy for any feedback if it is understandable :).Thanks in advance for any response!

Say goodbye to CSS-in-JS and Runtime scripts for injecting and compiling CSS and hello to lightning-fast coding with Stylify Utility-First CSS. As a React frontend engineer, you know the importance of efficient, streamlined solutions that don't sacrifice style or functionality. And that's exactly what Stylify offers.

const compilerConfig = { // CSS variables are note enabled by default in Stylify replaceVariablesByCssVariables: true, // https://stylifycss.com/docs/stylify/compiler#variables variabels: { textFontSize: '12px', textColor: '#000', // Tries to match a screen, can be sm, md, lg... minw400px: { textFontSize: '18px' }, // For a @media (prefer-color-scheme: dark) dark: { textColor: '#fff' }, // When screen is not found, // it falls back to a custom selector // in this case element with the ".dark" class // which will very probably be the root (html el) '.dark': { textColor: '#fff' }, } };

Apart from the colors module, there is a typography.module.css. You might want to remove it as well and rewrite these classes into Stylify CSS components using Stylify dynamic components syntax.

Stylify + SvelteKit. Style your SvelteKit website faster with Stylify. Don't study selectors and syntax. Use pure CSS syntax and get generated CSS with advanced optimization for production.

const { Bundler } = require('@stylify/bundler'); const isDev = process.argv[process.argv.length - 1] === '--w'; const bundler = new Bundler({ watchFiles: isDev, // Optional compiler: { mangleSelectors: !isDev, // https://stylifycss.com/docs/stylify/compiler#variables variables: {}, // https://stylifycss.com/docs/stylify/compiler#macros macros: {}, // https://stylifycss.com/docs/stylify/compiler#components components: {}, // ... } }); // This bundles all CSS into one file // You can configure the Bundler to bundle CSS for each page separately // See bundler link below bundler.bundle([ { files: ['./app/**/*.tsx'], outputFile: './app/styles/stylify.css' }, ]);

I have made a Stylify CSS that uses CSS-like selectors to generate optimized utility-first CSS. It can be integrated into various tools: Next, Vue, Angular, Next, Nuxt.

For scripts in Next.js, you want to build them apart from the normal Next.js build, since there is no "server start" step where you usually handle that. See how we handle that in Vulcan with Tsup:https://github.com/VulcanJS/vulcan-next/blob/main/tsup.config.tsYou can then run your built script in "yarn run dev" for instance or "postinstall" etc.

Hi, I am the maintainer of Vulcan, which is also relying on GraphQL and Next.js (https://github.com/VulcanJS/vulcan-next) but with a Mongo database. Eventhough Vulcan wouldn't be a fit given your architecture, I can at least share a few insights:

Full documentation: https://vulcan-docs.vercel.app/ (Vulcan magic is also reusable outside of Next, for instance in a pure Express server)