Support arbitrary value

.changeset/silent-steaks-march.md

@@ -0,0 +1,5 @@
+---
+"scalawind": patch
+---
+
+Support arbitrary values

.changeset/wicked-seahorses-rule.md

@@ -0,0 +1,5 @@
+---
+"scalawind": minor
+---
+
+support arbitrary values

README.md

@@ -193,6 +193,20 @@ button(cls := sw(tw.important(tw.text_black).hover(tw.important(tw.text_blue_700
 <button class="!text-black hover:!text-blue-700">Click me</button>
 ```
 
+## Arbitrary value
+
+We have support for [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) with quite similar signature, instead of wrapping your arbitrary value in square brackets, you now use function call. For example:
+
+```scala
+val styles: String = tw.bg_("#bada55").text_("22px")
+
+// ↓ ↓ ↓ ↓ ↓ ↓
+
+val styles: String = "bg-[#bada55] text-[22px]"
+```
+
+Because this is quite "arbitrary" thing that you might not want your team to break your design system, you need to explicitly enable this feature via `--arbitrary-values` (or `-av` alias) flag.
+
 ## Arbitrary variants
 
 We have support for [arbitrary variants](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-variants) feature.
@@ -429,6 +443,15 @@ As you can see, the whole scalawind thing includes two parts:
 - The `case class Tailwind`, the `object tw` and the `extension (tailwind: Tailwind):` is just there for the Fluent Syntax.
 - The `sw` and  `swImpl` is the macro that will compile all those fluent thing into a string
 
+## Troubleshoot
+
+### Method too large
+
+Unlike Tailwind which generate code based on your actual usage of utility classes in your source code, Scalawind needs to generate all the utility classes in advance so that we can benefit from type safety.
+
+This pre-generation behavior might generate a huge `extractClassNames` method used in our macro, which traverse over the fluent method calls to extract utilities classes.
+
+In order to solve this problem, we suggest that you follow the [Reducing Generated Code Size](#reducing-generated-code-size) section.
 
 ## Acknowledgement
 

packages/scalawind/src/commands/generate.js

@@ -13,7 +13,8 @@ const initOptionsSchema = z.object({
   cwd: z.string(),
   output: z.string(),
   packageName: z.string(),
-  previewCompliedResult: z.boolean()
+  previewCompliedResult: z.boolean(),
+  arbitraryValues: z.boolean()
 })
 
 export const generate = new Command()
@@ -34,6 +35,11 @@ export const generate = new Command()
     "enable show preview compiled result",
     false
   )
+  .option(
+    "-av, --arbitrary-values",
+    "enable support for arbitrary values",
+    false
+  )
   .option(
     "-c, --cwd <cwd>",
     "the working directory. defaults to the current directory.",

packages/scalawind/src/generate/index.js

@@ -10,7 +10,7 @@ const scalawindTemplate = fs.readFileSync(path.join(__dirname, "./templates/scal
 
 const template = Handlebars.compile(scalawindTemplate);
 
-export function generateContent(userConfig, packageName = "scalawind", previewCompliedResult = false) {
+export function generateContent(userConfig, packageName = "scalawind", previewCompliedResult = false, arbitraryValues = false) {
   const resolvedConfig = resolveConfig(userConfig);
   const ctx = createContext(resolvedConfig);
 
@@ -70,6 +70,20 @@ export function generateContent(userConfig, packageName = "scalawind", previewCo
     return { prop: fmtToScalawind(s), raw: s, doc: createDoc(css) };
   })
 
+  const candidates = [...candidateRuleMap.entries()];
+  const arbitrary = [];
+  if(arbitraryValues) {
+    for (const [name] of candidates) {
+      const ident = fmtToScalawind(name) + '_';
+      // edge case, we don't want the *_ method
+      if(ident === "*_") {
+        continue
+      }
+
+      arbitrary.push({ methodName: ident, value: `${name}-`})
+    }
+  }
+
   const modifiers = [...variantMap.keys()]
   // Remove * from the list of modifiers to avoid syntax error
   .filter((s) => s !== '*')
@@ -80,7 +94,13 @@ export function generateContent(userConfig, packageName = "scalawind", previewCo
     return ({ name: mod, value: mod})
   })
 
-  const generatedScalawind = template({ package: packageName, modifiers, standard, previewCompliedResult })
+  const generatedScalawind = template({ 
+    packageName, 
+    modifiers, 
+    standard, 
+    previewCompliedResult,
+    arbitrary,
+  })
 
   return generatedScalawind
 }
@@ -147,7 +167,7 @@ export function writeToDisk(path, content) {
 }
 
 export default function generate(userConfig, options) {
-  const { packageName, output, previewCompliedResult } = options
-  const content = generateContent(userConfig, packageName, previewCompliedResult)
+  const { packageName, output, previewCompliedResult, arbitraryValues } = options
+  const content = generateContent(userConfig, packageName, previewCompliedResult, arbitraryValues)
   writeToDisk(output, content)
 }

packages/scalawind/src/generate/templates/scalawind.hbs

@@ -1,4 +1,4 @@
-package {{package}}
+package {{packageName}}
 
 import scala.quoted.*
 import scala.annotation.unused
@@ -10,19 +10,20 @@ case class Tailwind() {
   def important(@unused styles: Tailwind): Tailwind = Tailwind()
   def i(@unused styles: Tailwind): Tailwind = Tailwind()
   def raw(@unused classString: String): Tailwind = Tailwind()
+  def variant(selector: String, styles: Tailwind): Tailwind = Tailwind()
   def opacity(value: Int): Tailwind = Tailwind()
   def o(value: Int): Tailwind = Tailwind()
-  def variant(selector: String, styles: Tailwind): Tailwind = Tailwind()
 }
 
 object tw {
   def apply(): Tailwind = Tailwind()
-
   {{#each standard}}
   {{this.doc}}
   def {{this.prop}}: Tailwind = Tailwind()
   {{/each}}
-
+  {{#each arbitrary}}
+  def {{this.methodName}}(value: String): Tailwind = Tailwind()
+  {{/each}}
   {{#each modifiers}}
   def {{this.name}}(@unused styles: Tailwind): Tailwind = Tailwind()
   {{/each}}
@@ -37,6 +38,10 @@ extension (tailwind: Tailwind)
   {{this.doc}}
   def {{this.prop}}: Tailwind = Tailwind()
   {{/each}}
+  {{#each arbitrary}}
+  def {{this.methodName}}(value: String): Tailwind = Tailwind()
+  {{/each}}
+
 
 inline def sw(inline tailwind: Tailwind): String =
   ${ swImpl('tailwind) }
@@ -50,6 +55,10 @@ def swImpl(twStyleExpr: Expr[Tailwind])(using Quotes): Expr[String] = {
       val classes = extractClassNames(styles).map(clx => s"{{this.value}}:$clx")
       extractClassNames(inner) ++ classes
     {{/each}}
+    {{#each arbitrary}}
+    case Apply(Select(inner, "{{this.methodName}}"), List(Literal(StringConstant(value)))) =>
+      extractClassNames(inner) :+ s"{{this.value}}[$value]"
+    {{/each}}
     case Apply(Select(inner, "opacity"), List(Literal(IntConstant(value)))) =>
       extractClassNames(inner).init :+ s"${extractClassNames(inner).last}/$value"
     case Apply(Select(inner, "o"), List(Literal(IntConstant(value)))) =>

packages/scalawind/tests/cases/basic/basic.test.js

@@ -5,7 +5,7 @@ import { generateContent } from '../../../src/generate'
 import { tailwindConfig } from './config'
 
 test('basic test', () => {
-  const actual = generateContent(tailwindConfig, "scalawind")
+  const actual = generateContent(tailwindConfig, "scalawind", false, true)
   const expected = fs.readFileSync(path.join(__dirname, "./expected.txt"), "utf8")
   expect(actual).toBe(expected)
 })

packages/scalawind/tests/cases/basic/config.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 export const tailwindConfig = {
   theme: {
     colors: {
@@ -8,6 +9,6 @@ export const tailwindConfig = {
     'textColor',
     'container',
     'animation',
-    'width'
+    'width',
   ]
 };

packages/scalawind/tests/cases/basic/expected.txt

@@ -171,14 +171,13 @@ case class Tailwind() {
   def important(@unused styles: Tailwind): Tailwind = Tailwind()
   def i(@unused styles: Tailwind): Tailwind = Tailwind()
   def raw(@unused classString: String): Tailwind = Tailwind()
+  def variant(selector: String, styles: Tailwind): Tailwind = Tailwind()
   def opacity(value: Int): Tailwind = Tailwind()
   def o(value: Int): Tailwind = Tailwind()
-  def variant(selector: String, styles: Tailwind): Tailwind = Tailwind()
 }
 
 object tw {
   def apply(): Tailwind = Tailwind()
-
 
   def container: Tailwind = Tailwind()
   /** {{{
@@ -693,7 +692,10 @@ object tw {
     * }}}
     */
   def text_black: Tailwind = Tailwind()
-
+  def container_(value: String): Tailwind = Tailwind()
+  def w_(value: String): Tailwind = Tailwind()
+  def animate_(value: String): Tailwind = Tailwind()
+  def text_(value: String): Tailwind = Tailwind()
   def first_letter(@unused styles: Tailwind): Tailwind = Tailwind()
   def first_line(@unused styles: Tailwind): Tailwind = Tailwind()
   def marker(@unused styles: Tailwind): Tailwind = Tailwind()
@@ -1379,6 +1381,11 @@ extension (tailwind: Tailwind)
     * }}}
     */
   def text_black: Tailwind = Tailwind()
+  def container_(value: String): Tailwind = Tailwind()
+  def w_(value: String): Tailwind = Tailwind()
+  def animate_(value: String): Tailwind = Tailwind()
+  def text_(value: String): Tailwind = Tailwind()
+
 
 inline def sw(inline tailwind: Tailwind): String =
   ${ swImpl('tailwind) }
@@ -1879,6 +1886,14 @@ def swImpl(twStyleExpr: Expr[Tailwind])(using Quotes): Expr[String] = {
     case Apply(Select(inner, "print"), List(styles)) =>
       val classes = extractClassNames(styles).map(clx => s"print:$clx")
       extractClassNames(inner) ++ classes
+    case Apply(Select(inner, "container_"), List(Literal(StringConstant(value)))) =>
+      extractClassNames(inner) :+ s"container-[$value]"
+    case Apply(Select(inner, "w_"), List(Literal(StringConstant(value)))) =>
+      extractClassNames(inner) :+ s"w-[$value]"
+    case Apply(Select(inner, "animate_"), List(Literal(StringConstant(value)))) =>
+      extractClassNames(inner) :+ s"animate-[$value]"
+    case Apply(Select(inner, "text_"), List(Literal(StringConstant(value)))) =>
+      extractClassNames(inner) :+ s"text-[$value]"
     case Apply(Select(inner, "opacity"), List(Literal(IntConstant(value)))) =>
       extractClassNames(inner).init :+ s"${extractClassNames(inner).last}/$value"
     case Apply(Select(inner, "o"), List(Literal(IntConstant(value)))) =>

packages/scalawind/tests/cases/full/config.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 export const tailwindConfig = {
   theme: {},
 };