Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 28, 2022 10:17 pm GMT

Style your Next.js website faster with Stylify CSS

Style your Next.js website faster, more efficiently and intuitively with Stylify. Don't study selectors and syntax. Use pure CSS syntax and get automatically generated CSS with advanced optimization for production.

For easier start, you can checkout the Stylify Stackblitz playground .

Introduction

Stylify generates CSS dynamically based on what you write. The syntax is similar to css property:value. Defined utilities are combined with components selectors and in production minified to bare minimum like .color\:red,.button {color:red} to _zx, _ga{color:red}.

With Stylify, you can get very small bundles, generate additional lazyloaded CSS chunks and style the page by writting HTML and selectors .

Next.js setup

The easiest way to Setup the Next.js is using cli:

  • Run yarn create next-app
  • Select your project name

This way you will get the default Next.js application skeleton.

Stylify integration

Install the @stylify/unplugin package using NPM or Yarn:

yarn add @stylify/unpluginnpm i @stylify/unplugin

Open the next.config.js and copy the following content into it:

const { webpackPlugin } = require('@stylify/unplugin');const stylifyPlugin = (dev) => webpackPlugin({    dev: dev,    transformIncludeFilter: (id) => id.endsWith('js'),    bundles: [{        outputFile: './styles/stylify.css',        // Generate CSS from all js files        files: ['./pages/**/*.js'],    }],    extend: {        bundler: {            compiler: {                selectorsAreas: [                    // For selecting className="selector"                    '(?:^|\\s+)className="([^"]+)"',                    '(?:^|\\s+)className=\'([^\']+)\'',                    '(?:^|\\s+)className=\\{`((?:.|
)+)`\\}' ] } } }});module.exports = { reactStrictMode: true, webpack: (config, { dev }) => { // Add Stylify Webpack plugin config.plugins.push(stylifyPlugin(dev)); return config; }}

The last step, open the pages/_app.js and add path to stylify.css:

// ...import '../styles/stylify.css';function MyApp({ Component, pageProps }) {  return <Component {...pageProps} />}export default MyApp;

Styling the website

If you copy the code bellow into the pages/index.js and run yarn dev you will get a styled Hello World! text:

export default function Home() {  return <div className="color:blue">Hello World!</div>;}

Stylify watches any change in the js files and generates css into the styles/stylify.css.
If you add a selector like font-size:24px the CSS will be automatically updated .

Go ahead and try Stylify directly on Stackblitz.com .

Components

Templates bloated with utility selectors are hard to read. Stylify allows you to define components directly in files, where they are used through content options (expects javascript object without brackets) or in the compiler config.

/*@stylify-components  container: 'max-width:800px margin:0__auto'/@stylify-components*/export default function Home() {  return (    <div className="container">      <div className="color:blue">Hello World!</div>    </div>  )}

Variables

It's a good practice to avoid hardcoded values in the selectors. Variables can be defined the same way as components:

/*@stylify-variables  blue: 'steelblue',  containerWidth: '800px'/@stylify-variables@stylify-components  container: 'max-width:$containerWidth margin:0__auto'/@stylify-components*/export default function Home() {  return (    <div className="container">      <div className="color:$blue">Hello World!</div>    </div>  )}

The production build

When we run the production build using yarn build + yarn start, the jsx markup will be mangled to this:

export default function Home() {  return (    <div className="_7tcrv">      <div className="_ro073">Hello World!</div>    </div>  )}

The css is shortened too:

:root {    --blue: #4682b4;    --containerWidth: 800px}._ro073 {color: #4682b4}._7tcrv,._bcda8 { max-width: 800px }._7tcrv,._m0vnad { margin: 0 auto }

Configure anything youneed

The examples above doesn't include everything Stylify can do:

Feel free to checkout the docs to learn more .

Let me know what you think!

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

Stay in touch:
@8machy
@stylifycss
stylifycss.com
dev.to/machy8
medium.com/@8machy


Original Link: https://dev.to/machy8/style-your-nextjs-website-faster-with-stylify-css-f7k

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To