Stylely

The Next Generation StyleSheets

• No More Media Queries
• No More Pseudo Selectors
• New Shorthand CSS Properties

Stylely is inspired by TailwindCSS, Chakra UI and Open Props

Read Official Docmentation to know more about it.

Demo

.foo {
  bg: white;
  bd: 1px solid black;
  color: black;
  focus-bg: black;
  focus-bd-color: 1px solid white;
  focus-color: white;
}

would be converted into,

.foo {
  background: white;
  border: 1px solid black;
  color: black;
}
.foo:focus {
  background: black;
  border-color: white;
  color: white;
}

Installation

Step 1: Install plugin:

npm i -D postcss stylely

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to [official docs] and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [require("stylely")],
};