8
\$\begingroup\$

TailwindCSS is a utility that lets one write CSS code using only HTML classes, which are then converted to CSS code with the Tailwind compiler. Ordinarily, one would write CSS in a separate file from the HTML, and reference named classes:

<!-- without Tailwind -->
<p class="crazy-monologue">Crazy? I was crazy once. They locked me in a room…</p>
.crazy-monologue {
  background: black;
  color: red;
  opacity: 0.5;
}

With Tailwind, the CSS is auto-generated:

<!-- with Tailwind -->
<p class="background-[black] color-[red] opacity-[0.5]">
  Crazy? I was crazy once. They locked me in a room…
</p>
/* auto-generated by Tailwind */
.background-\[black\]{background:black;}
.color-\[red\]{color:red;}
.opacity-\[0\.5\]{opacity:0.5;}

This is a simplified version of Tailwind; for the purposes of this challenge, all class names will be in the format property-name-[value]. The property name will be a kebab-case string, and the value will be an string consisting of alphanumeric characters and the period .. Note that the brackets [ and ] must be escaped as \[ and \] in the outputted CSS selector, and the period . must be escaped as \..

Task

Given a class name in the above format, output the corresponding CSS. The CSS output is flexible; you may have any amount of whitespace before and after the curly braces and colons, and the semicolon is optional.

This is , so the shortest answer in each language wins.

Test cases

Note that since the CSS output is flexible, your output does not have to be formatted exactly as these are.

/* in: opacity-[0.5] */
/* out: */
.opacity-\[0\.5\] { opacity: 0.5 }

/* in: background-color-[lightgoldenrodyellow] */
/* out: */
.background-color-\[lightgoldenrodyellow\] {
  background-color: lightgoldenrodyellow;
}
\$\endgroup\$
6
  • \$\begingroup\$ Will input have multiple properties, like in your main text example? \$\endgroup\$
    – bigyihsuan
    Aug 28, 2023 at 13:19
  • \$\begingroup\$ @bigyihsuan The input will be a single class name. \$\endgroup\$
    – noodle man
    Aug 28, 2023 at 14:01
  • \$\begingroup\$ A hypothetical regex extension I came up with for the purpose of this challenge, 40 bytes: (\i)-\[(.+)]/$1-\\\[($2/[.-]/\\$3)]{$1:$2}. May write up an answer after I implement it \$\endgroup\$
    – mousetail
    Aug 28, 2023 at 15:41
  • \$\begingroup\$ Side note: been using unocss.dev as an alternative engine to Tailwind - it's quite nice \$\endgroup\$ Aug 28, 2023 at 16:22
  • 1
    \$\begingroup\$ Also worth pointing out that while tailwind allows arbitrary values with the bracket syntax, that's not really how it's meant to be used for the most part. \$\endgroup\$
    – Cubic
    Aug 29, 2023 at 11:44

9 Answers 9

6
\$\begingroup\$

Vyxal, 236 bitsv2, 29.5 bytes

\-/÷₍λ\.øBf:\\vpĿ;‡ḢṪMf`%-%{%:%}`$%

Try it Online!

Truly among sus.

"But lyxal what does that have to do with the challenge?"

Nothing. That's just how golfing at 11:52pm be like.

Explained

\-/÷₍λ\.øBf:\\vpĿ;‡ḢṪMf`%-%{%:%}`$%­⁡​‎‎⁡⁠⁡‏⁠‎⁡⁠⁢‏⁠‎⁡⁠⁣‏⁠‎⁡⁠⁤‏‏​⁡⁠⁡‌⁢​‎‎⁡⁠⁢⁡‏⁠‎⁡⁠⁢⁢‏⁠‎⁡⁠⁢⁡⁢‏⁠‎⁡⁠⁢⁡⁣‏‏​⁡⁠⁡‌⁣​‎‎⁡⁠⁢⁣‏⁠‎⁡⁠⁢⁤‏⁠‎⁡⁠⁣⁡‏⁠‎⁡⁠⁣⁢‏⁠‎⁡⁠⁣⁣‏⁠‎⁡⁠⁣⁤‏⁠‎⁡⁠⁤⁡‏⁠‎⁡⁠⁤⁢‏⁠‎⁡⁠⁤⁣‏⁠‎⁡⁠⁤⁤‏⁠‎⁡⁠⁢⁡⁡‏‏​⁡⁠⁡‌⁤​‎‎⁡⁠⁢⁡⁤‏⁠‎⁡⁠⁢⁢⁡‏‏​⁡⁠⁡‌⁢⁡​‎‎⁡⁠⁢⁢⁢‏‏​⁡⁠⁡‌⁢⁢​‎‎⁡⁠⁢⁢⁣‏‏​⁡⁠⁡‌⁢⁣​‎‎⁡⁠⁣⁡⁢‏⁠‎⁡⁠⁣⁡⁣‏‏​⁡⁠⁡‌⁢⁤​‎‎⁡⁠⁢⁢⁤‏⁠‎⁡⁠⁢⁣⁡‏⁠‎⁡⁠⁢⁣⁢‏⁠‎⁡⁠⁢⁣⁣‏⁠‎⁡⁠⁢⁣⁤‏⁠‎⁡⁠⁢⁤⁡‏⁠‎⁡⁠⁢⁤⁢‏⁠‎⁡⁠⁢⁤⁣‏⁠‎⁡⁠⁢⁤⁤‏⁠‎⁡⁠⁣⁡⁡‏‏​⁡⁠⁡‌­
\-/÷                                 # ‎⁡Split input on '-' and dump
    ₍λ           ;‡                  # ‎⁢Parallel apply the following:
                                     # ‎⁢
      \.øBf:\\vpĿ                    # ‎⁣  Escape '[', '.' and ']'
                   ḢṪ                # ‎⁤  Remove the square brackets
                     M               # ‎⁢⁡Prepend the property to each
                      f              # ‎⁢⁢And flatten
                                 $%  # ‎⁢⁣Formatting into the string
                       `%-%{%:%}`    # ‎⁢⁤"%-%{%:%}"
💎

Created with the help of Luminespire.

\$\endgroup\$
2
  • \$\begingroup\$ +1 for "That's just how golfing at 11:52pm be like." \$\endgroup\$ Aug 28, 2023 at 14:43
  • 1
    \$\begingroup\$ +1 for HTM in the code \$\endgroup\$
    – Joao-3
    Oct 1, 2023 at 23:00
4
\$\begingroup\$

Python, 67 bytes

import re
lambda x:f'.{re.escape(x)}{{{x.replace("-[",":")[:-1]}}}'

Attempt This Online!

The "-" is also escaped, but that's still legal CSS.

\$\endgroup\$
1
  • 2
    \$\begingroup\$ FYI, you can put the import after the lambda definition so you can have the f= in the ATO header: Attempt This Online! \$\endgroup\$
    – noodle man
    Aug 28, 2023 at 15:23
3
\$\begingroup\$

Retina 0.8.2, 37 36 bytes

-\[(.+)]
$&{$`:$1}
\W(?=.*{)
\$&
^
.

Try it online! Link includes test cases. Explanation:

-\[(.+)]
$&{$`:$1}

Append the CSS declaration block.

\W(?=.*{)
\$&

Escape non-word characters in the class name.

^
.

Prefix the . class selector.

Edit: Saved 1 byte thanks to @noodleman pointing out that the ; is optional. 41 bytes to include the ; and not escape -s:

-\[(.+)]
$&{$`:$1;}
[^-\w](?=.*{)
\$&
^
.

Try it online! Link includes test cases.

29 bytes in Retina 1.0:

((.+)-\[(.+))]
.$\$1\]{$2:$3}

Try it online! Link includes test cases. Explanation: $\ quotes . and [ characters in its argument, but the ] needs to be quoted manually.

\$\endgroup\$
2
  • \$\begingroup\$ The semicolon is optional so you can remove it to save a byte. \$\endgroup\$
    – noodle man
    Aug 28, 2023 at 16:09
  • \$\begingroup\$ @noodleman Thanks for pointing that out, I had overlooked that. \$\endgroup\$
    – Neil
    Aug 28, 2023 at 16:56
3
\$\begingroup\$

Ruby -pl, 44 bytes

After a lot of optimization it effectively became SuperStormer's Python solution.

$_=".#{Regexp.escape$_}{#{sub'-[',?:;chop}}"

Attempt This Online!

\$\endgroup\$
3
\$\begingroup\$

JavaScript (ES6), 68 bytes

s=>s.replace(/[[\].]/g,"\\$&")+`{${[a,b]=s.split(/-\[|\]/),a}:${b}}`

Try it online!

\$\endgroup\$
2
  • \$\begingroup\$ You seem to have a surplus : at the beginning of your template string. \$\endgroup\$
    – Neil
    Aug 28, 2023 at 18:09
  • \$\begingroup\$ @Neil Good catch. Thank you. \$\endgroup\$
    – Arnauld
    Aug 28, 2023 at 19:24
2
\$\begingroup\$

Charcoal, 34 bytes

≔⪪⁻S]¦-[θ.§θ⁰-\[⪫⪪§θ¹.¦\.¦\]{⪫θ:¦}

Try it online! Link is to verbose version of code. Explanation:

≔⪪⁻S]¦-[θ

Remove the trailing ] from the input string, then split it on -[.

.

Output the CSS class selector.

§θ⁰

Output the property name.

-\[

Output the trailing - and the quoted opening [.

⪫⪪§θ¹.¦\.

Output the property value with .s quoted.

\]{

Output the quoted closing ] and the opening { of the declaration block.

⪫θ:

Join the property and value into a declaration and output it.

}

Output the closing } of the declaration block.

\$\endgroup\$
1
\$\begingroup\$

05AB1E, 24 bytes

…]-[ā£':æ:…{ÿ}«„[]SD'\ì‡

Outputs without the optional ; to save a byte.

Try it online or verify all test cases.

Explanation:

…]-[        # Push string "]-["
    ā       # Push a list in the range [1,length] (without popping): [1,2,3]
     £      # Split the string into parts of those sizes: ["]","-[",""]
      ':   '# Push ":"
        æ   # Pop and push its powerset: ["",":"]
         :  # Replace the values in the (implicit) input-string:
            #  All "]" are replaced with "", so basically removed
            #  And all "-[" are replaced with ":"
            #  (the trailing "" of the first list is ignored)
…{ÿ}        # Surround it with curly brackets
    «       # Append it to the (implicit) input-string
„[]S        # Push "[]" as a pair of characters: ["[","]"]
    D       # Duplicate it
     '\ì   '# Prepend an "\" in front of each: ["\[","\]"]
        ‡   # Transliterate all "[" to "\[" and "]" to "\]"
            # (after which the result is output implicitly)
\$\endgroup\$
1
\$\begingroup\$

Scala 3, 67 bytes

x=>s".${x.replaceAll("\\W","\\\\$0")}{${x.replace("-[",":").init}}"

Attempt This Online!

\$\endgroup\$
0
\$\begingroup\$

Scala 3, 180 bytes

A port of @SuperStormer's Python answer in Scala.


x=>{val e=x.replaceAllLiterally("-","\\-").replaceAllLiterally("[","\\[").replaceAllLiterally("]","\\]").replaceAllLiterally(".","\\.");s".$e{${x.replace("-[",":").dropRight(1)}}"}

Attempt This Online!

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.