From 65738f5053c58d5bf1eeca85cc0be360e8b0a28a Mon Sep 17 00:00:00 2001
From: RayoGundead <RayoGundead@users.noreply.github.com>
Date: Fri, 9 Apr 2021 10:05:38 +0000
Subject: [PATCH] Register styles in `components` layer when using `class`
 strategy

Using the `class` strategy makes it work like a collection of form component styles and shouldn't be in the `base` layer.

Also addresses #64.
---
 src/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index 4d65324..aa86862 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.bas
 const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme
 
 const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
-  return function ({ addBase, theme }) {
+  return function ({ addBase, addComponents, theme }) {
     const strategy = options.strategy
 
     const rules = [
@@ -249,7 +249,10 @@ const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
       },
     ]
 
-    addBase(
+    ({ 
+      'base': (rules) => addBase(rules),
+      'class': (rules) => addComponents(rules)
+    })[strategy](
       rules
         .map((rule) => {
           if (rule[strategy] === null) {