Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
class-types.macro
Advanced tools
Types for your CSS classes. This is a combination of a PostCSS plugin and babel macro.
Types for your CSS classes. This is a combination of a PostCSS plugin and babel macro.
Add this package:
with npm
npm i class-types.macro
npm i -D postcss-class-types
or using yarn
yarn add class-types.macro
yarn add -D postcss-class-types
You may need to add the babel macros plugin: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md Some projects such as create react app may already have this installed.
Next configure the PostCSS plugin, you'll want to add this after tailwind (or similar library), but before purgeCSS or any libraries that optimize your CSS builds.
// postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require("postcss-class-types"),
require('autoprefixer'),
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
There's an optional, but nice to have eslint plugin that'll give your classes a consistent order.
Install eslint-plugin-class-types
:
npm i -D eslint-plugin-class-types
yarn add eslint-plugin-class-types -D
Add class-types
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": [
"class-types"
]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"class-types/class-order": 2
}
}
import React from "react";
import ct from "class-types.macro";
export default () => <div className={ct("bg-blue-200", "flex", "mx-auto")} />;
The first time you compile your CSS after adding the PostCSS plugin you'll notice 2 files were generated:
@types/class-types/classTypes.d.ts
@types/class-types/index.d.ts
You can customize the path where these files are saved by passing a directory option in your postcss config.
require('class-types.macro').postcss({ directory: 'custom-directory/path/' }),
Treat these files as you would yarn.lock or package-json.lock, commit them when you have changes, but don't edit them by hand.
Confidently make changes to your tailwind config.
Ever make a change like this?
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
blue: {
'900': '#1e3656',
}
}
}
}
}
and find out later (in prod) you accidentally wiped out blue shades 100 - 800? this plugin guards against that!
function calls are compiled to strings via babel macro!
// this:
<div className={ct("bg-blue-200", "flex", "mx-auto")} />
// gets compiled to this:
<div className="bg-blue-200 flex mx-auto" />
Tailwind provides the @apply
directive to make using collections of classes easier. This unfortunately works against utility CSS's promise of no duplicate styles being delivered.
Class Types solves this problem by allowing users to assign groups of classes to a variable. The variables will also be assigned a union string type containing the classes so you can see what classes are in a given variable.
// type: "text-green-500"
const brandColor = ct(
"text-green-500"
);
// type: "font-medium" | "text-3xl" | "leading-tight" | "tracking-tight" | "sm:text-4xl" | "md:text-5xl" | "xl:text-4xl"
const heading = ct(
"font-medium",
"text-3xl",
"leading-tight",
"tracking-tight",
"sm:text-4xl",
"md:text-5xl",
"xl:text-4xl",
);
const Page = () => {
<main>
<h1 className={ct(heading, brandColor, "flex")}></h1>
</main>;
};
Never wonder again if z-index is incremented by 10 or 100!
this
<div className="absolute overflow-x-hidden inset-x-0 w-11/12 mx-auto mt-5 overflow-y-auto bg-white outline-none border border-gray-300 border-solid rounded shadow-lg opacity-100" />
turns into this:
<div
className={ct(
"w-11/12",
"bg-white",
"border-gray-300",
"rounded",
"border-solid",
"border",
"shadow-lg",
"inset-x-0",
"mx-auto",
"mt-5",
"opacity-100",
"outline-none",
"overflow-y-auto",
"overflow-x-hidden",
"absolute"
)}
/>
FAQs
Types for your CSS classes. This is a combination of a PostCSS plugin and babel macro.
The npm package class-types.macro receives a total of 1 weekly downloads. As such, class-types.macro popularity was classified as not popular.
We found that class-types.macro demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.