arcade-next-css v0.0.3

Arcade Next CSS

This repository is a modified fork of @zeit/next-css before it was deprecated. It was deprecated due to the NextJS release with CSS support but there were multiple steps left to completely cover all the functionality next-css was providing before. One of the most important steps left is https://github.com/vercel/next.js/discussions/27953, which allows to store CSS variables in the UI component libraries, like Arcade or React Spectrum.

@zeit/next-css is still published on NPM but it's using outdated dependencies which no longer work with PostCSS 8. This fork is aiming to use the same solution but using latest PostCSS version.

Installation

yarn add --dev arcade-next-css

NextJS config example

This setup is an example of how you can use this plugin with Arcade. Feel free to try it out with different loader options and suit it to your needs.

// next.config.js

// PostCSS config provided by Arcade
const postcssConfig = require("arcade/postcss");
// NextJS plugin to transpile packages in node_modules
const withTM = require("next-transpile-modules")(["arcade"]);
const withCSS = require("arcade-next-css");

module.exports = withTM(
  withCSS({
    // This plugin currently works only with webpack 4, so we're disabling webpack 5 setup
    webpack5: false,
    cssLoaderOptions: {
      // This flag enables CSS Modules
      // You can use it as an options object instead, to define the hashing format
      // For example, { localIdentName: "[name]-[local]-[hash:base64:5]" }
      modules: true,
    },
    postcssLoaderOptions: {
      // Passing Arcade postcss config to the postcss-loader
      postcssOptions: postcssConfig.full,
    },
    pageExtensions: ["ts", "tsx", "js", "jsx"],
  })
);