Skip to content

Webpack plugin to automatically generate and inject CSS utilities to your application

Notifications You must be signed in to change notification settings

kamranahmedse/stylos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Stylos - Generate and inject CSS utilities to your application
Stylos

Build Status Codecov Software License

Webpack plugin that automatically generates and injects CSS utilities to your application.

What is it?

Stylos is a Webpack plugin that automatically generates and injects CSS utilities into your application. All you have to do is specify utility classes on DOM elements; webpack will identify and generate the properties with relevant values and inject them to your application.

As you can see, all you have to do is specify the classes having shorthand for the CSS property key, required value and optionally the unit. Stylos will understand it and generate the CSS for you.

Don't use it for everything!

You should always prefer to use semantic CSS class names

Stylos is not meant to be used for everything; you should always always prefer semantic CSS class names. The idea behind stylos is to be used for the little UI differences that you may need here and there. For example mostly for me in the cases where there is no clear design specs, or during prototyping or when reusing components, I find myself playing around with margins, paddings etc and it is tedious to modify CSS files every single time and thus for the cases like this I made Stylos to automate the job.

Features

  • Supports HTML as well as JSX
  • Works well in vanilla JavaScript apps as well as frameworks e.g. Angular, React or Vue.js
  • Plays nicely with webpack-dev-server / webpack serve
  • Integrates with html-webpack-plugin
  • Helps you make those little UI changes without any accidental broken UI

Supported Shorthands

Here is the the list of known shorthand formulas that you can use in your DOM classes.

Shorthand CSS Property Example Usage
p padding p10 will translate to padding: 10px
pt padding-top pt20 will translate to padding-top: 20px;
pb padding-bottom pb10 will translate to padding-bottom: 10px;
pr padding-right pr20 will translate to padding-right: 20px;
pl padding-left pl23 will translate to padding-left: 23px;
m margin m20 will translate to margin: 20px
mt margin-top mt20 will translate to margin-top: 20px;
mb margin-bottom mb20 will translate to margin-bottom: 20px;
ml margin-left ml50 will translate to margin-left: 50px;
mr margin-right mr30 will translate to margin-right: 30px;
w width w200 will translate to width: 200px
h height h60 will translate to height: 60px;
br border-radius br5 will translate to border-radius: 5px;
fs font-size fs15 will translate to font-size: 15px
fw font-weight fw400 will translate to font-weight: 400px
lh line-height lh20em will translate to line-height: 20em
t top t6 will translate to top: 6px;
l left l30 will translate to left: 30px
b bottom b20em will translate to bottom: 20em;
r right r20em will translate to right: 20em;

For the units, you can specify them after the value and relevant CSS unit will be used

  • Units including px, pt, em, p, vh, vw, vmin, ex, cm, in, mm, pc will translate to the same unit in CSS
  • If you don't provide any unit px will be used
  • If you need % specify it as p e.g. w50p will get translated to width: 50%
  • If no unit is needed, specify n e.g. fw600n will translate to font-weight: 600

Installation

First, install Stylos as a development dependency:

yarn add --dev stylos

Then, import Stylos into your Webpack configuration and add it to your list of plugins:

// webpack.config.js
const Stylos = require('stylos');

module.exports = {
  // ...
  rules: [
    // ...
    // Add the rule to use the loader for HTML or JSX files
    {
      test: /(\.js|\.jsx|\.html)$/, // Relevant regex
      exclude: /node_modules/,
      use: Stylos.Loader,
    }
  ],
  plugins: [
    // ...
    // new HtmlWebpackPlugin(..),  // <-- You must have it installed and set up
    // Add the plugin right after the HTMLWebpackPlugin
    new Stylos.Plugin()
  ]
}

You can optionally pass setImportant option to loader to make the generated CSS use !important i.e.

// webpack.config.js
const Stylos = require('stylos');

module.exports = {
  // ...
  rules: [
    // ...
    // Add the rule to use the loader for HTML or JSX files
    {
      test: /(\.js|\.jsx|\.html)$/, // Relevant regex
      exclude: /node_modules/,
      use: [
        {
          loader: Stylos.Loader,
          options: {
            setImportant: true
          }
        }
      ],
    }
  ],
  plugins: [
    // ...
    // new HtmlWebpackPlugin(..),  // <-- You must have it installed and set up
    // Add the plugin right after the HTMLWebpackPlugin
    new Stylos.Plugin()
  ]
}

Contributions

  • Open pull request with improvements
  • Report any bugs
  • Discuss ideas in issues
  • Spread the word
  • Reach out with any feedback Twitter URL

License

MIT © Kamran Ahmed

About

Webpack plugin to automatically generate and inject CSS utilities to your application

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published