All Projects → tivac → Modular Css

tivac / Modular Css

Licence: mit
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Modular Css

React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (+31.2%)
Mutual labels:  webpack, postcss, css-modules
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-29.49%)
Mutual labels:  webpack, code-splitting, css-modules
Kratos Boilerplate
🔥 A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Stars: ✭ 308 (+31.62%)
Mutual labels:  webpack, postcss, css-modules
sapper-template-rollup
Starter Rollup template for Sapper apps using postcss, cssnano, tailwindcss, and svelte-preprocess.
Stars: ✭ 32 (-86.32%)
Mutual labels:  postcss, rollup, svelte
React Cool Starter
😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
Stars: ✭ 1,083 (+362.82%)
Mutual labels:  webpack, postcss, css-modules
Rollup Plugin Postcss
Seamless integration between Rollup and PostCSS.
Stars: ✭ 507 (+116.67%)
Mutual labels:  rollup, postcss, css-modules
Poi
⚡A zero-config bundler for JavaScript applications.
Stars: ✭ 5,291 (+2161.11%)
Mutual labels:  webpack, svelte, postcss
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (+189.74%)
Mutual labels:  webpack, postcss, css-modules
React Boilerplate
Production-ready boilerplate for building universal web apps with React and Redux
Stars: ✭ 53 (-77.35%)
Mutual labels:  webpack, code-splitting, css-modules
Sapper Template Firebase
Starter Rollup template for Sapper apps with Firebase functions based on https://github.com/nhristov/sapper-template-rollup.
Stars: ✭ 29 (-87.61%)
Mutual labels:  rollup, svelte, postcss
Babel Plugin Prismjs
A babel plugin to use PrismJS with standard bundlers.
Stars: ✭ 114 (-51.28%)
Mutual labels:  webpack, rollup, browserify
Template.js
A javascript template engine, simple, easy & extras, support webpack, rollup, parcel, browserify, fis and gulp
Stars: ✭ 1,201 (+413.25%)
Mutual labels:  webpack, rollup, browserify
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (-50.43%)
Mutual labels:  rollup, postcss, css-modules
Typescript Webpack React Redux Boilerplate
React and Redux with TypeScript
Stars: ✭ 182 (-22.22%)
Mutual labels:  webpack, css-modules
Front End Tooling Recipes
Collection of pre-configured front-end tooling setups for common uses.
Stars: ✭ 176 (-24.79%)
Mutual labels:  rollup, postcss
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (-2.14%)
Mutual labels:  webpack, code-splitting
Vue Plugin Template
🚀 Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
Stars: ✭ 189 (-19.23%)
Mutual labels:  webpack, rollup
Css Modules Typescript Loader
Webpack loader to create TypeScript declarations for CSS Modules
Stars: ✭ 172 (-26.5%)
Mutual labels:  webpack, css-modules
Polymer Skeleton
💀 Skeleton for Polymer 3 app with Webpack, PostCSS and Service Workers ready.
Stars: ✭ 185 (-20.94%)
Mutual labels:  webpack, postcss
Bundle Buddy Webpack Plugin
🐐🐐🐐🐐 bundle-buddy-webpack-plugin 🐐🐐🐐🐐
Stars: ✭ 199 (-14.96%)
Mutual labels:  webpack, code-splitting

modular-css Build Status Gitter

A streamlined re-interpretation of CSS Modules

Documentation

Check out the official modular-css site: http://m-css.com/

Try it

There's an online REPL where you can try out modular-css without needing to install anything!

http://m-css.com/repl

Features

Composition

.red {
    color: red;
}

.blue {
    composes: red;

    background: blue;
}

/* in the output .blue will be combination of both styles */

Values

@value alert: #F00;

.alert {
    color: alert;
}

/* will output as */

.alert {
    color: #F00;
}

Selector Scoping

.style {
    color: red;
}

:global(.style2) {
    color: blue;
}

/* Will output as */

/* Scoped with unique file-based prefix */
.f5507abd_style {
    color: red;
}

/* Remains unstyled due to :global() pseudo */
.style2 {
    color: blue;
}

Style Overrides

/* input.css */
.input {
    width: 100%;
}

/* fieldset.css */
.fieldset :external(input from "./input.css") {
    width: 50%;
}

More detailed descriptions are available on the website.

Install

https://m-css.com/guide/#usage

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].