0.41.0 • Published 4 years ago

ct.macro v0.41.0

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

ct.macro

Types for your CSS classes. This is a combination of a PostCSS plugin and babel macro.

Setup

Add this package:

yarn add ct.macro

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('ct.macro').postcss(),

    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

ESLint setup

Install eslint-plugin-ct.macro:

yarn add eslint-plugin-ct.macro -D

Add ct.macro to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "ct.macro"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "ct.macro/class-order": 2
    }
}

Usage

import React from "react";
import ct from "ct.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/ct.macro/classNames.d.ts

@types/ct.macro/index.d.ts

You can customize the path where these files are saved by passing a directory option in your postcss config.

require('ct.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.

Why use this library

TypeScript types for your tailwind classes

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!

type error from missing class

Zero runtime cost

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" />

Editor autocomplete

Never wonder again if z-index is incremented by 10 or 100!

autocomplete suggestions for z index

Auto-reorder classes via ESLint plugin/rule

ESLint auto fix for class order

Better prettier formatting for long classes

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"
  )}
/>
0.41.0

4 years ago

0.40.0

4 years ago

0.39.0

4 years ago

0.38.0

4 years ago

0.37.0

4 years ago

0.36.0

4 years ago

0.35.0

4 years ago

0.34.0

4 years ago

0.33.0

4 years ago

0.32.0

4 years ago

0.31.0

4 years ago

0.30.0

4 years ago

0.29.0

4 years ago

0.28.0

4 years ago

0.27.0

4 years ago

0.26.0

4 years ago

0.21.0

4 years ago

0.25.0

4 years ago

0.24.0

4 years ago

0.23.0

4 years ago

0.22.0

4 years ago

0.20.0

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago

0.17.0

4 years ago

0.15.0

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.10.0

4 years ago

0.11.0

4 years ago

0.8.0

4 years ago

0.7.0

4 years ago

0.6.0

4 years ago

0.5.0

4 years ago

0.3.0

4 years ago

0.2.0

4 years ago

0.1.0

4 years ago