(Experimenting) Transform CSS Modules to enable Atomic CSS benefits 🌱

Overview

MatoCSS

Transform CSS Modules to enable Atomic CSS benefits

Please note that it is still experimenting. I do not recommend using this in production.

Usage

MatoCSS only supports Webpack now.

Webpack

You need to install our loader first.

npm install @matocss/webpack

Update webpack.config.js to add our loader for CSS Modules files.

Make sure you put the loader in the last to work.

See the example here.

{
  test: cssModuleRegex,
  use: [
    // ... another loaders
    { loader: "@matocss/webpack" },
  ],
},

License

MIT License © 2022-Present Huy Nguyen

You might also like...

A GitHub Action to enable Pages and extract various metadata about a site

A GitHub Action to enable Pages and extract various metadata about a site. It can also be used to configure various static site generators we support as starter workflows.

Jan 1, 2023

Plugin to enable PDF files as first class citizens within an Obsidian vault.

Obsidian-PDF Plugin to enable PDF files as first class citizens within an Obsidian vault. What does this plugin do for me? All PDF files in your vault

Nov 26, 2022

Enable Acrylic/Glass effect for your VS Code.

Enable Acrylic/Glass effect for your VS Code.

Visual Studio Code Extension - Vibrancy Continued The original extension has been deprecated, this version will continue to be supported and receive c

Dec 29, 2022

A prototype on how web3 technology can enable us to build an open, immutable, reproducible, and permanently accessible scientific record.

A prototype on how web3 technology can enable us to build an open, immutable, reproducible, and permanently accessible scientific record.

Web3 Research A prototype on how web3 technology can enable us to build an open, immutable, reproducible, and permanently accessible scientific record

Nov 27, 2022

An unofficial companion tool created for use alongside PhotoPrism to enable API endpoints and automation.

PhotoPrism Helper PhotoPrism Helper is an unofficial companion tool created for use alongside PhotoPrism. This project isn't associated with the Photo

Dec 25, 2022

Zenload - "Load couple loaders and apply transform one-by-one

Zenload Load couple loaders and apply transforms one-by-one. Install npm i zenload -g How to use? With env vairable ZENLOAD: NODE_OPTIONS='"--loader

Jan 25, 2022

A typescript transform that converts exported const enums into object literal.

ts-transformer-optimize-const-enum A typescript transformer that convert exported const enum into object literal. This is just like the one from @babe

Jul 27, 2022

An imports transform unplugin.

unplugin-transform-imports An imports transform unplugin based on babel inspired by babel-plugin-transform-imports. What unplugin-transform-imports Do

Nov 29, 2022

Transform URLs in strings to actual links.

Transform URLs in strings to actual links.

Transform URLs in strings to actual links. It will find valid links in the given string and create a tags for it. Internally, it uses this Regex to

Nov 4, 2022
Owner
Huy Nguyen
Huy Nguyen
A project for experimenting with Server Sent Events (SSE), a way of communication going from server to client.

A project for experimenting with Server Sent Events (SSE), a way of communication going from server to client.

Italo Menezes 4 May 16, 2022
This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

Awesome Books with ES6 and modules A basic app project built with HTML, CSS and JS ES6 to keep track of awesome books. Built With HTML/CSS and JS best

Karla Delgado 10 Aug 27, 2022
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4

Jonathan James Cosgrove 216 Sep 10, 2022
A tiny JavaScript library to enable CSS animations when user scrolls.

A tiny JavaScript library to enable CSS animations when user scrolls. This library allows you to toggle one or more classes on an element when it appe

Matthieu Bué 35 Nov 24, 2022
DGPreview - Make UIKit project enable preview feature of SwiftUI

DGPreview Make UIKit project enable preview feature of SwiftUI Requirements iOS

donggyu 5 Feb 14, 2022
Storybook add-on to enable SWC builds.

storybook-addon-swc Storybook addon that improves build time by building with swc. ?? Examples webpack4 webpack5 ?? Installation $ npm install -D stor

Karibash 49 Dec 20, 2022
ZaDark is an open source extension that helps you enable Dark Mode for Zalo on PC and Browser.

ZaDark – Zalo Dark Mode Table of Contents About Install Roadmap Contributing License Contact Awards Acknowledgments About ZaDark is an open source ext

Nguyễn Chánh Đại 64 Dec 22, 2022
A package to enable feature-flag support on Next.js via cookies and environment variables

next-feature-flags Add support for feature flags on Next.js based on cookies + environment variables. How it works It reads from cookies and Next.js's

Alexandre Santos 10 Aug 10, 2022
Enable hover capabilities for Cypress. 🛸

cypress-hover ?? Enable hover capabilities for Cypress ?? with zero dependencies! ?? Installation npm install cypress-hover Usage In your cypress/sup

Marcello 2 Sep 1, 2022
This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

The HTML5 Shiv The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explo

Alexander Farkas 9.9k Jan 2, 2023