12
\$\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 \.. You may also backslash-escape any other characters, but doing so is not required.

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;
}
Improve this question
\$\endgroup\$
8
  • \$\begingroup\$ Will input have multiple properties, like in your main text example? \$\endgroup\$ Commented Aug 28, 2023 at 13:19
  • \$\begingroup\$ @bigyihsuan The input will be a single class name. \$\endgroup\$ Commented 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\$ Commented Aug 28, 2023 at 15:41
  • 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\$ Commented Aug 29, 2023 at 11:44
  • 1
    \$\begingroup\$ Several answers also backslash-escape the hyphens. Is that allowed? \$\endgroup\$ Commented Aug 21 at 21:28

12 Answers 12

Reset to default
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.

Improve this answer
\$\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\$ Commented Aug 28, 2023 at 15:23
4
\$\begingroup\$

JavaScript (ES6), 71 bytes

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

Try it online!

Improve this answer
\$\endgroup\$
5
  • \$\begingroup\$ You seem to have a surplus : at the beginning of your template string. \$\endgroup\$ Commented Aug 28, 2023 at 18:09
  • \$\begingroup\$ @Neil Good catch. Thank you. \$\endgroup\$ Commented Aug 28, 2023 at 19:24
  • \$\begingroup\$ You're missing the leading . in the output. \$\endgroup\$ Commented Aug 20 at 22:59
  • \$\begingroup\$ @Shaggy Thanks. I wonder why I missed that and why it remained unnoticed. Now fixed. \$\endgroup\$ Commented Aug 21 at 14:43
  • 1
    \$\begingroup\$ You weren't the only one. You can save a byte by making the whole thing a template literal. \$\endgroup\$ Commented Aug 22 at 7:06
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!

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Unfortunately, the hyphens in the output should not be backslash-escaped. (Would've saved me some bytes in my answer too...) \$\endgroup\$ Commented Aug 21 at 21:23
  • \$\begingroup\$ The OP has clarified that escaping the hyphens is allowed, so please disregard my previous comment. :) \$\endgroup\$ Commented Aug 23 at 17:39
3
\$\begingroup\$

Charcoal, 34 bytes

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

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

≔⪪⁻Ｓ]¦-[θ

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.

Improve this answer
\$\endgroup\$
3
\$\begingroup\$

TypeScript (TS Type system), 141 129

Saved 13 bytes by inlining E (TY noodle person):

type T<S>=S extends`${infer C}-[${infer V}]`?`.${C}-\\[${T<V>}\\]{${C}:${V}}`:S extends`${infer A}.${infer B}`?`${A}\\.${T<B>}`:S

Clever, since the tokens we're looking for are mutually exclusive in each case.

Original solution:

type E<S>=S extends`${infer A}.${infer B}`?`${A}\\.${E<B>}`:S
type T<S>=S extends`${infer C}-[${infer V}]`?`.${C}-\\[${E<V>}\\]{${C}:${V}}`:S

Wasn't sure what to do with invalid input, so I just went with pass-through.

E is the escaper for the .. I assume we do care about stuff like translate(10.5px, 20.75px) where there's more than one dot, hence the recursion.

Usage:

type x = T<"opacity-[0.5]">
type y = T<"background-color-[lightgoldenrodyellow]">

TS Playground

Improve this answer
\$\endgroup\$
4
  • 1
    \$\begingroup\$ Nice solution! Instead of passing-through, you can actually just inline the definition of E as the failure case of T, for 129: playground link \$\endgroup\$ Commented Aug 21 at 3:02
  • \$\begingroup\$ It just occurred to me that you can omit the hyphen in both strings for -2 bytes. \$\endgroup\$ Commented Aug 23 at 16:00
  • \$\begingroup\$ @noodleperson That would introduce an extra hyphen in the property declaration, right? E.g. {opacity-:0.5} \$\endgroup\$ Commented Aug 25 at 15:26
  • \$\begingroup\$ Sorry, that's right, missed that. Just tunnel-visioned for a moment. \$\endgroup\$ Commented Aug 25 at 16:08
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 40 bytes to include the ; and only escape ].[s:

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

Try it online! Link includes test cases. Edit: Saved 1 byte thanks to @DLosc.

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.

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

05AB1E, 29 bytes

'.I…[.]SD'\ì‡I…]-[ā£':æ:…{ÿ}J

Outputs without the optional ; to save 2 bytes.

Try it online or verify all test cases.

Explanation:

'.         '# Push "."
I           # Push the input-string
 …[.]       # Push "[.]" as a list of characters: ["[",".","]"]
     D      # Duplicate it
      '\ì  '# Prepend an "\" in front of each: ["\[","\.","\]"]
         ‡  # Transliterate all "[" to "\["; "." to "\."; and "]" to "\]"
I           # Push the input-string again
 …]-[       # 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 earlier pushed 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
J           # Join everything on the stack together to a single string
            # (after which the it is output implicitly as result)
Improve this answer
\$\endgroup\$
3
  • 1
    \$\begingroup\$ You're missing the leading . in the output. \$\endgroup\$ Commented Aug 20 at 22:59
  • \$\begingroup\$ @Shaggy Thanks for noticing. Fixes at the cost of 3 bytes. \$\endgroup\$ Commented Aug 20 at 23:17
  • \$\begingroup\$ @DLosc Thanks for noticing as well. Fixed at the cost of 2 more bytes. \$\endgroup\$ Commented Aug 21 at 21:43
2
\$\begingroup\$

Japt v2.0a0, 25 bytes

Escapes the -s as now explicitly allowed by the spec.

".{r\WÈi'\}\{{d"-["':']}}

Try it

Improve this answer
\$\endgroup\$
1
\$\begingroup\$

Scala 3, 67 bytes

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

Attempt This Online!

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Unfortunately, the hyphens in the output should not be backslash-escaped. (Would've saved me some bytes in my answer too...) \$\endgroup\$ Commented Aug 21 at 21:18
  • \$\begingroup\$ The OP has clarified that escaping the hyphens is allowed, so please disregard my previous comment. :) \$\endgroup\$ Commented Aug 23 at 17:39
1
\$\begingroup\$

Pip, 30 28 bytes

-2 bytes now that the OP has allowed escaping the hyphens as well.

['.aR`\W`'\._'{;HaR"-["':'}]

Attempt This Online!

Explanation

The default output format for lists is to concatenate all items together, so:

['.aR`\W`'\._'{;HaR"-["':'}]
[                          ]  Print a list of the following items:
 '.                             Period
   a                            Command-line argument...
    R                             replace
     `\W`                         any non-word character
         '\._                     with a backslash concatenated to that character
             '{                 Left curly brace
               ;                (Expression separator)
                H               All but the last character of...
                 a                command-line argument
                  R               replace
                   "-["           that string
                       ':         with a colon
                         '}     Right curly brace
Improve this answer
\$\endgroup\$
0
\$\begingroup\$

Perl 5 -p, 46 bytes

$_=".".s/[[\].]/\\$&/gr."{".s/-\[(.*)]/:$1;}/r

Try it online!

Improve this answer
\$\endgroup\$
0
\$\begingroup\$

Scala 3, 180 149 bytes

Saved 31 bytes thanks to @DLosc (hyphens shouldn't be backslash-escaped)

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

Golfed version. Attempt This Online!

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

Ungolfed version. Attempt This Online!

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

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.