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, _gacolor: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/unplugin
npm i @stylify/unplugin
Enter fullscreen modeExit fullscreen mode

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: \\s+)className=\'([^\']+)\'',
                    '(?:^
        
    
});

module.exports = 
  reactStrictMode: true,
  webpack: (config,  dev ) => 
    // Add Stylify Webpack plugin
    config.plugins.push(stylifyPlugin(dev));
    return config;
  

Enter fullscreen modeExit fullscreen mode

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;
Enter fullscreen modeExit fullscreen mode

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>;

Enter fullscreen modeExit fullscreen mode

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>
  )

Enter fullscreen modeExit fullscreen mode

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>
  )

Enter fullscreen modeExit fullscreen mode

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>
  )

Enter fullscreen modeExit fullscreen mode

The css is shortened too:

:root 
    --blue: #4682b4;
    --containerWidth: 800px

._ro073 color: #4682b4
._7tcrv,._bcda8  max-width: 800px 
._7tcrv,._m0vnad  margin: 0 auto 
Enter fullscreen modeExit fullscreen mode

Configure anything youย need

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




Source link

Add a Comment

Your email address will not be published. Required fields are marked *