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

Japt v2.0a0, 25 bytes

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

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

Try it

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

JavaScript (ES6), 71 bytes

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

Try it online!

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.

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)

Perl 5 -p, 46 bytes

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

Try it online!

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

Scala 3, 67 bytes

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

Attempt This Online!

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.

Ruby -pl, 44 bytes

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

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

Attempt This Online!

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.