{"id":345756,"date":"2021-08-02T11:28:28","date_gmt":"2021-08-02T18:28:28","guid":{"rendered":"https:\/\/css-tricks.com\/?p=345756"},"modified":"2021-08-19T09:19:51","modified_gmt":"2021-08-19T16:19:51","slug":"css-modules-the-native-ones","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-modules-the-native-ones\/","title":{"rendered":"CSS Modules (The Native Ones)"},"content":{"rendered":"\n<p>They are actually called &#8220;CSS Module Scripts&#8221; and are a native browser feature, as opposed to <a href=\"https:\/\/github.com\/css-modules\/css-modules\" rel=\"noopener\">the popular open-source project<\/a> that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. <\/p>\n\n\n\n<p>Native CSS Modules are a part of ES Modules (a lot like <a href=\"https:\/\/css-tricks.com\/ecmascript-proposal-json-modules\/\">JSON modules<\/a> we recently covered):<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ Regular ES Modules\nimport React from \"https:\/\/cdn.skypack.dev\/react@17.0.1\";\n\n\/\/ Newfangled JSON Modules\nimport configData from '.\/config-data.json' assert { type: 'json' };\n\n\/\/ Newfangled CSS Modules\nimport styleSheet from \".\/styles.css\" assert { type: \"css\" };<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>I first saw this from Justin&#8217;s tweet:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">JS and CSS modules with no build in sight!<br><br>With upcoming CSS modules, we&#39;ll soon have:<br><br>\u2705 JS modules<br>\u2705 Bare specifiers<br>\u2705 CSS modules<br>\u2705 Components<br>\u2705 Scoped styles<br><br>all built into the platform, no builds required, usable with `python -m SimpleHTTPServer 8000` \ud83d\ude0e <a href=\"https:\/\/t.co\/Q9zw1Pn1pF\">pic.twitter.com\/Q9zw1Pn1pF<\/a><\/p>&mdash; Justin Fagnani (@justinfagnani) <a href=\"https:\/\/twitter.com\/justinfagnani\/status\/1403436100132110340?ref_src=twsrc%5Etfw\" rel=\"noopener\">June 11, 2021<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>This is a Chrome-thing for now. Relevant links:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/groups.google.com\/a\/chromium.org\/g\/blink-dev\/c\/vCrJCQxNnzo\/m\/OAYI9cPWAQAJ\" rel=\"noopener\">Intent to Implement: CSS Modules V1<\/a><\/li><li><a href=\"https:\/\/chromestatus.com\/feature\/5948572598009856\" rel=\"noopener\">Chrome Platform Status: CSS Module Scripts<\/a><\/li><li><a href=\"https:\/\/github.com\/whatwg\/html\/pull\/4898\/\" rel=\"noopener\">GitHub\/WhatWG: Introduce CSS Module Script<\/a><\/li><\/ul>\n\n\n\n<p>As I write, it only works in Chrome Canary with the Experimental Web Platform Features on. If your question is, <q>When can I use this on production projects with a wide variety of users using whatever browser they want?<\/q> I&#8217;d say: I have no idea. Probably years away. Maybe never. But it&#8217;s still interesting to check out. Maybe support will move fast. Maybe you&#8217;ll work on an Electron project or something where you can count on specific browser features.<\/p>\n\n\n\n<p>This looks like an extension of <a href=\"https:\/\/developers.google.com\/web\/updates\/2019\/02\/constructable-stylesheets\" rel=\"noopener\">Constructable Stylesheets<\/a>, which are also Chrome-only, so browsers that are &#8220;behind&#8221; on this would have to start there. <\/p>\n\n\n\n<p>I gave Justin&#8217;s idea a spin here:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNmvJYK\" src=\"\/\/codepen.io\/anon\/embed\/rNmvJYK?height=450&amp;theme-id=1&amp;slug-hash=rNmvJYK&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNmvJYK\" title=\"CodePen Embed rNmvJYK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If I log what I get back from the CSS Modules import, it&#8217;s a <code>CSSStyleSheet<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1176\" height=\"906\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-31-at-10.47.49-AM.png?resize=1176%2C906&#038;ssl=1\" alt=\"Showing a styles tree with nodes for CSS rules, media, rules, and prototype.\" class=\"wp-image-345758\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-31-at-10.47.49-AM.png?w=1176&amp;ssl=1 1176w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-31-at-10.47.49-AM.png?resize=300%2C231&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-31-at-10.47.49-AM.png?resize=1024%2C789&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-31-at-10.47.49-AM.png?resize=768%2C592&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-31-at-10.47.49-AM.png?resize=1000%2C770&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If you&#8217;re going to actually use the styles&#8230; that&#8217;s on you. Justin&#8217;s idea basically applies the style as a one-liner because it just so happens that <a href=\"https:\/\/lit.dev\/docs\/components\/styles\/\" rel=\"noopener\">lit-html supports <code>CSSStyleSheet<\/code><\/a> (those docs don&#8217;t make that clear, but I imagine they will at some point). For native web components, it&#8217;s not much different: you import it, get the <code>CSSStyleSheet<\/code>, then apply it to the web component like:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">this.shadowRoot.adoptedStyleSheets = [myCSSStyleSheet];<\/code><\/pre>\n\n\n\n<p>I would think the point of all this is:<\/p>\n\n\n\n<ul><li>we needed a way to import a stylesheet in JavaScript and this is basically the first really clear crack at it that I&#8217;m aware of,<\/li><li>now we have programatic access to manipulate the CSS before using it, if we wanted, and<\/li><li>it looks particularly nice for Web Components usage, but it&#8217;s generic. Do whatever you want with the stylesheet once you have it.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>They are actually called &#8220;CSS Module Scripts&#8221; and are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. Native CSS Modules are a part of ES Modules (a lot like JSON modules we recently covered):<\/p>\n","protected":false},"author":3,"featured_media":345806,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"\"CSS Module Scripts\" are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. ","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[669],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":301770,"url":"https:\/\/css-tricks.com\/snowpack\/","url_meta":{"origin":345756,"position":0},"title":"Snowpack","date":"January 13, 2020","format":false,"excerpt":"Snowpack. Love that name. This is the new thing from the Pika people, who are on to something. It's a bundler alternative, in a sense. It runs over packages you pull from npm to make sure that they are ES module-compatible (native imports). This is how I digest it. When\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/pika.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344948,"url":"https:\/\/css-tricks.com\/ecmascript-proposal-json-modules\/","url_meta":{"origin":345756,"position":1},"title":"ECMAScript proposal: JSON modules","date":"July 21, 2021","format":false,"excerpt":"Dr. Axel Rauschmayer looks at JSON modules, which is already live in Chrome 91 (but nothing else). It looks just like an ES Modules-style import, only you asset the type at the end. import configData from '.\/config-data.json' assert {type: 'json'}; How nice is that? Once this makes its way across\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/08\/package-json.png?fit=1200%2C594&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345297,"url":"https:\/\/css-tricks.com\/demystifying-styled-components\/","url_meta":{"origin":345756,"position":2},"title":"Demystifying styled-components","date":"July 26, 2021","format":false,"excerpt":"\u00a0Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey. styled-components seems like the biggest player in the CSS-in-React market. Despite being in that world, I haven't yet been fully compelled by it. I'm a big fan of the basics: scoped styles by way\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-23-at-2.53.27-PM.png?fit=1200%2C584&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320479,"url":"https:\/\/css-tricks.com\/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js\/","url_meta":{"origin":345756,"position":3},"title":"Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS","date":"September 7, 2020","format":false,"excerpt":"We're living through a weird era where there are tons of JavaScript libraries that were meant to be used as <script> tags that expose available globals. AND there are tons of JavaScript libraries that are meant to be used through module loaders. AND there are tons of JavaScript libraries that\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/js-es6.jpg?fit=1200%2C700&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305303,"url":"https:\/\/css-tricks.com\/css-x\/","url_meta":{"origin":345756,"position":4},"title":"CSS X","date":"March 16, 2020","format":false,"excerpt":"My name appears in an article from Bert Bos (co-author of the original CSS spec), so I'll consider that a life accomplishment. Bert makes the point that CSS has evolved and the working group versions things, but the working group hasn't been and doesn't really plan to be involved in\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332790,"url":"https:\/\/css-tricks.com\/life-with-esm\/","url_meta":{"origin":345756,"position":5},"title":"Life with ESM","date":"January 19, 2021","format":false,"excerpt":"ESM, meaning ES Modules, meaning JavaScript Modules. Like, import and friends. Browsers support it these days. There is plenty of nuance, but as long as you've dropped IE, the door is fairly open. Before ESM, the situation for JavaScript projects was: We've got packages we need to use from npm.We'll\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/javascript-v4.png?fit=1200%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345756"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=345756"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345756\/revisions"}],"predecessor-version":[{"id":350200,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345756\/revisions\/350200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/345806"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=345756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=345756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=345756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}