PostCSS Perspective Style Class Plugin

Ignition
1

Hello all! This started as a tool for my own use, then turned into an exercise in for developing some CD skills, and now into something I'd like to share publicly.

Background

postcss-perspective-style-class is a PostCSS plugin for generating Perspective Style Class selectors using attribute syntax.

If you're not familiar with PostCSS, I highly encourage you to checkout their documentation, but here's the TL;DR:

  • It's a tool for transforming styles with JS plugins.
  • There are are a wide range of plugins (200+) that add features to CSS.
  • After running your plugins, you are left with vanilla .css files that can be used anywhere.

Motivation

I have found the CSS class names required for working with Style Classes difficult to look at and unwieldy to write, especially when nested beyond a single folder. This plugin allows you to develop your CSS in a more natural syntax.

Example

[psc=Folder1/class] { 
  color: black; 
}

[psc=Folder1/Folder2/class] { 
  color: black; 
}

[psc=Folder1/class1].otherClass1 .otherClass2 { 
  color: black; 
}

will be processed into:

.psc-Folder1\/class { 
  color: black; 
}

.psc-Folder1\/Folder2\/class { 
  color: black; 
}

.psc-Folder1\/class1.otherClass1 .otherClass2 { 
  color: black; 
}

and, a list of Style Classes is made available to the plugin's callback function:

[
  'Folder1/class',
  'Folder1/Folder2/class'
  'Folder1/class1'
]

Download

So please, check it out and feel free to contribute!

npm install --save-dev postcss postcss-perspective-style-class

Next Steps

My main use for the callback function is to automatically generate Style Class import files.
The workflow I'd like to have is:

  1. Develop Perspective themes using PostCSS plugins for nesting/convenience features.
  2. Use this plugin to:
    • Manage the Style Classes references in the theme files.
    • Automatically generate a bundle of Style Classes that can be directly imported into Ignition.
  3. Import the generated theme and Style Classes into directly into Ignition with little to no friction.

I'm interested in hearing what others think about this, and if there are any ideas on how to improve this even further.

3 Likes