
Security News
Open Source Maintainers Feeling the Weight of the EU’s Cyber Resilience Act
The EU Cyber Resilience Act is prompting compliance requests that open source maintainers may not be obligated or equipped to handle.
@magiclabs/next-css
Advanced tools
Feature-parity with NextJS's built-in CSS with the flexibility to support your favorite pre-processor(s)!
Feature-parity with NextJS's built-in CSS with the flexibility to support your favorite pre-processor(s)!
License · Changelog · Contributing Guide
This is a NextJS configuration decorator with the goal of approximately mirroring NextJS's built-in CSS support without losing the flexibility of technology choice. For example, at Magic Labs, we are invested in LESS! However, the built-in CSS features of NextJS are very desirable, so we created @magiclabs/next-css
to bridge the gap.
@magiclabs/next-css
is available as an NPM package:
# Via NPM:
npm install --save @magiclabs/next-css
# Via Yarn:
yarn add @magiclabs/next-css
This module requires NextJS (^12.0.0
) as a peer dependency. Additionally, any Webpack dependencies related to your CSS pre-processor of choice are required to be installed separately.
The stylesheet is compiled to .next/static/css
. Next.js will automatically add the css file to the HTML. In production, a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.
Create a next.config.js
in the root of your project (next to pages/
and package.json
).
// next.config.js
const { withCSS } = require('@magiclabs/next-css'); // Please note the named export!
module.exports = withCSS({
// Array of objects configuring any CSS pre-processors you like!
preProcessors: [
{
extensions: [...], // i.e.: ["less"] or ["sass", "scss"]
use: [...], // Receives same configuration as Webpack > Module > Rule > Use
},
],
// Also valid as a factory function!
// Receives the same arguments as a NextJS custom `webpack` function.
preProcessors: (config, options) => [...],
});
preProcessors
: An array of PreProcessorItem
objects, or a function returning an array of PreProcessorItem
objects with the following shape:
extensions
: An array of String
values representing CSS file extensions (i.e.: "css"
, "less"
, "scss"
).use
: An array of objects compatible with Webpack's Module Rules#UseEntry schema.You can easily configure @magiclabs/next-css
for the following common use-cases:
First, install your LESS-specific dependencies:
# Via NPM:
npm install --save less less-loader
# Via Yarn:
yarn add less less-loader
Next, configure the pre-processor with @magiclabs/next-css
:
// next.config.js
const { withCSS } = require('@magiclabs/next-css');
module.exports = withCSS({
preProcessors: [
{
extensions: ["less"],
use: [require.resolve('less-loader')],
},
],
});
More dependencies leads to longer NPM package installation times. These are marginal for a typical project.
This is a wholesale re-implementation of NextJS CSS support, so there may be some inconsistencies between the end results. NextJS notably benefits from aggressive internal optimizations which may be missing or unaccounted for here. That being said, we try our best to match the internal implementation as closely as possible.
FAQs
Feature-parity with NextJS's built-in CSS with the flexibility to support your favorite pre-processor(s)!
The npm package @magiclabs/next-css receives a total of 0 weekly downloads. As such, @magiclabs/next-css popularity was classified as not popular.
We found that @magiclabs/next-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The EU Cyber Resilience Act is prompting compliance requests that open source maintainers may not be obligated or equipped to handle.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.