CSS Modules (The Native Ones)

No Comments

They’re really known as “CSS Module Scripts” and are a local browser characteristic, versus the favored open-source mission that primarily does scoped types by creating distinctive class title identifiers in each HTML and CSS.

Native CSS Modules are part of ES Modules (so much like JSON modules we not too long ago coated):

// Common ES Modules
import React from “https://cdn.skypack.dev/react@17.0.1”;

// Newfangled JSON Modules
import configData from ‘./config-data.json’ assert {kind: ‘json’};

// Newfangled CSS Modules
import styleSheet from “./types.css” assert { kind: “css” };

I first noticed this from Justin’s tweet:

JS and CSS modules with no construct in sight!

With upcoming CSS modules, we’ll quickly have:

✅ JS modules
✅ Naked specifiers
✅ CSS modules
✅ Parts
✅ Scoped types

all constructed into the platform, no builds required, usable with `python -m SimpleHTTPServer 8000` 😎 pic.twitter.com/Q9zw1Pn1pF

— Justin Fagnani (@justinfagnani) June 11, 2021

It is a Chrome-thing for now. Related hyperlinks:

Intent to Implement: CSS Modules V1Chrome Platform Standing: CSS Module ScriptsGitHub/WhatWG: Introduce CSS Module Script

As I write, it solely works in Chrome Canary with the Experimental Net Platform Options on. In case your query is, When can I take advantage of this on manufacturing initiatives with all kinds of customers utilizing no matter browser they need? I’d say: I do not know. Most likely years away. Possibly by no means. But it surely’s nonetheless attention-grabbing to take a look at. Possibly help will transfer quick. Possibly you’ll work on an Electron mission or one thing the place you’ll be able to rely on particular browser options.

This seems to be like an extension of Constructable Stylesheets, that are additionally Chrome-only, so browsers which are “behind” on this must begin there.

I gave Justin’s thought a spin right here:

CodePen Embed Fallback

If I log what I get again from the CSS Modules import, it’s a CSSStyleSheet:

When you’re going to really use the types… that’s on you. Justin’s thought mainly applies the type as a one-liner as a result of it simply so occurs that lit-html helps CSSStyleSheet (these docs don’t make that clear, however I think about they’ll sooner or later). For native internet elements, it’s not a lot completely different: you import it, get the CSSStyleSheet, then apply it to the online part like:

this.shadowRoot.adoptedStyleSheets = [myCSSStyleSheet];

I’d suppose the purpose of all that is:

we would have liked a solution to import a stylesheet in JavaScript and that is mainly the primary actually clear crack at it that I’m conscious of,now now we have programatic entry to govern the CSS earlier than utilizing it, if we needed, andit seems to be significantly good for Net Parts utilization, but it surely’s generic. Do no matter you need with the stylesheet upon getting it.

The submit CSS Modules (The Native Ones) appeared first on CSS-Methods. You possibly can help CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment