plain old <style> tag — @scope css

[abernier]

Goals

Now that we have @scope css, what about supporting plain old <style> tag

it will basically allow us to:

function Foo() {
  return (
    <div>
      <style>
      @scope {
        /* prelude omitted => automatically scoped to the <style> element's enclosing parent element. */
        p {color:red;}
      }
      </style>

      <p>
        Fore sure, scoped CSS is the <del>past</del><ins>future(maybe)</ins>!
      </p>
    </div>
  )
}

Non-Goals

I could probably help if anyone could guide me into

Background

css-in-js

Proposal

simply by allowing plain <style> tag in react components

Colophon

• https://www.youtube.com/shorts/ioM3cKiTzDc

[abernier]

omg, I've just tested out with this <style>{`/* plain old css string */`}</style> syntax:

<style>{`
  @scope {
    p {
      color: red;
    }
  }
`}</style>

and it appears to be already working ✌️ https://stackblitz.com/~/github.com/abernier/poc-scope-css-nextjs?file=app/Foo.tsx:L12-L15&file=app/page.tsx:L8-L9

[abernier]

also tried with client component with dynamic values: 👌

"use client";

import { useState } from "react";

const colors = ["red", "green", "blue"];

export function Foo() {
  const [index, setIndex] = useState(0);

  return (
    <div onClick={() => setIndex((index) => (index + 1) % colors.length)}>
      <style>{`
        @scope {
          p {
            color: ${colors.at(index)};
          }
        }
      `}</style>

      <p>
        I am a Foo paragraph, `@scope`-style in red. I do not affect other
        paragraphs.
      </p>
    </div>
  );
}

[abernier]

to allow & or > chars in our css string without them being converted to & or <, we must actually:

<style
  dangerouslySetInnerHTML={{
    __html: `...`,
  }}
/>

but works great

[abernier]

so to recap:

function Foo() {
  return (
    <div>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            @scope {
              p {color:red;}
            }
         `,
        }}
      />

      <p>
        Fore sure, scoped CSS is the <del>past</del><ins>future(maybe)</ins>!
      </p>
    </div>
  )
}

will be my new defacto pure CSS styling solution ✌️