Atomic CSS Webpack Plugin

Chinese Docs

Atomized CSS development enhancement plugin. Inspired by Tailwindcss.

• Framework independent
• Support completely custom configuration (now you have to have one config file, plugin will not support default config anymore)
• Flexible naming rules (it's better than Tailwindcss in this way)
• On-demanded usage(you can custom your config file follow your need, you won't get one redundant css classes file)
• Support utils to custom css utils
• Support !important (it's better than Tailwindcss)
• with purgecss to remove useless css content

With VSCode Plugin 「IntelliSense for CSS class names in HTML」experience better.

demo

atomic css webpack plugin

useage

npm i -D atomic-css-webpack-plugin@latest

example

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const AtomicCSSWebpackPlugin = require("atomic-css-webpack-plugin");

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./app.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.[hash].js",
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Atomic CSS Webpack Plugin",
      minify: "auto"
    }),
    new AtomicCSSWebpackPlugin({
      config: path.resolve(__dirname, "./myconfig.js")
    }) // you can use your customized config file or you just use the default config
  ]
};

plugin config

Field	Explain	Type	Default	Required
config	Config file path	string	''	true
versoin	webpack big version	string/number 5 or 4	'4'	false
assets	Css asset output path (if you set 'css', atomic.css will output in css dir)	string	''	false
publicPath	Css asset output publicPath	string	'/'	false
importWay	use link or style tag import css	'link'/'inline'	'inline'	false
parser	customer parse logic for your own config file	function(config){}	null	false

config rules

config file is one js module object, just like below:

module.exports = {
  atomic: {
    text: {
      // className prefix
      color: {
        // css property
        "-white": "#fff" // className postfix : css value
      },
      "text-align": {
        "-center!": "center" // postfix with `!` you will get `!important` class
      }
    },
    p: {
      "padding-left": {
        "l-10": "10px"
      },
      "padding-right": {
        "r-10": "10px"
      },
      "padding-left$padding-right": {
        // if you want to set more than one property, use `$` to split
        "x-10": "10px"
      }
    }
  },
  utils: {
    link: {
      css: {
        color: "blue",
        cursor: "pointer"
      },
      actions: {
        hover: {
          color: "red"
        }
      }
    }
  }
};

with above config file, you will get below css classes:

.text-white {
  color: #fff;
}
.text-center {
  text-align: center !important;
}
.pl-10 {
  padding-left: 10px;
}
.pr-10 {
  padding-right: 10px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.link {
  color: blue;
  cursor: pointer;
}
.link:hover {
  color: red;
}

but if you only used text-center, finally you will get css file as below

.text-center {
  text-align: center !important;
}