vue-emotion
twin.macro
Our great sponsors
vue-emotion | twin.macro | |
---|---|---|
2 | 57 | |
223 | 7,798 | |
- | - | |
0.0 | 6.1 | |
8 months ago | 11 days ago | |
JavaScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
vue-emotion
-
The Skinny on CSS in Vue Single File Components
Notice that in development mode those styles will go into a in the
and Vite's latest version will even add a
data-vite-dev-id
attribute with the url and generated hash of the CSS file it extracts from the SFC. Of course when building your app for production, your bundler of choice will put this code into a separate.css
file.So it's that easy to create scoped styles in Vue.js. Fun fact the scoped attribute on the style tag actually comes from a W3C draft for implementing native scoping for CSS, which was unfortunately abandoned.
Working around child selectors
Now there is one small problem with this method of scoping CSS.
Let's say you have an API that delivers raw HTML text, that content editors add using the WYSIWYG editor of some CMS.
Now inserting raw HTML to Vue templates is trivial with the v-html directive, but you also want to style these tags independently, so you create a
component to encapsulate their CSS.
This would all look like this:
<template> class="rich-text" v-html="props.text" /> template> <script setup> const props = defineProps({ text: String }) script> <style lang="scss" scoped> .rich-text { p { margin: 0 0 1rem 0; } ol { list-style-type: lower-alpha; } ul { list-style-type: circle; } // some more styles for all possible tags... } style>
Enter fullscreen mode Exit fullscreen modeNow your component will render the following CSS.
.rich-text p[data-v-60170f23] { margin: 0 0 1rem 0; } .rich-text ol[data-v-60170f23] { list-style-type: lower-alpha; } .rich-text ul[data-v-60170f23] { list-style-type: circle; }
Enter fullscreen mode Exit fullscreen modeBut the tags inserted by
v-html
won't receive thedata-v-
attributes as the other tags in your component.You can change the CSS output so that the scoping will also work for nested elements.
<style lang="scss" scoped> .rich-text { :deep(p) { margin: 0 0 1rem 0; } :deep(ol) { list-style-type: lower-alpha; } :deep(ul) { list-style-type: circle; } // some more styles for all possible tags... } style>
Enter fullscreen mode Exit fullscreen modeNow the styles generated will look like this:
.rich-text[data-v-60170f23] p { margin: 0 0 1rem 0; } .rich-text[data-v-60170f23] ol { list-style-type: lower-alpha; } .rich-text[data-v-60170f23] ul { list-style-type: circle; }
Enter fullscreen mode Exit fullscreen modeThe
data-v-
goes in front of the parent selector so child selectors will get applied and scoping will be maintained.Syntax variations
If you've googled this problem before you may have found some alternate syntaxes to do the same thing, so let's clarify things a bit.
You've may seen this:
.alert ::v-deep h1 { … }
Enter fullscreen mode Exit fullscreen modeOr this
.alert /deep/ h1 { … }
Enter fullscreen mode Exit fullscreen modeOr even this
.alert >>> h1 { … }
Enter fullscreen mode Exit fullscreen modeIn Vue 3 and Vue 2.7 all of these have been deprecated, so while your code may work, the compiler will show a warning and they will stop working in some future release. So it's best to use
:deep()
, unless you are on Vue >2.7.Also note that if you are using SCSS, the
>>>
and/deep/
syntax will throw an error in Vue 3, while the::v-deep
will still work but with a warning.Bottom line is, just use
:deep()
on all newer versions of Vue.New CSS features in Vue 3
With Vue 3 we've got two new combinators next to
:deep()
.Scoped styles for slots
First we have
:slotted()
which lets you target any HTML that's inserted to one of the slots of your component.Let's say you want to add another slot in the component and you'd want whatever element that goes in that slot to have a specific styling defined by it.
<template> class="alert"> name="header" /> />
template> <style scoped> .alert { --base-gutter: 0.4rem; padding: calc(var(--base-gutter) * 2); border: 1px solid #ffea2a; background-color: #fff48d; border-radius: var(--base-gutter); } h1 { font-size: 1.8rem; border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: calc(var(--base-gutter) * 2); margin-top: 0; padding-bottom: calc(var(--base-gutter) * 2) } style>
Enter fullscreen mode Exit fullscreen mode<template #header>
Hi there!
template> This is some warning for the user from the system.Enter fullscreen mode Exit fullscreen modeThis of course won't work. If you look at what CSS was generated, you'll find this selector.
h1[data-v-3f4a8ec2] { // our h1 styles }
Enter fullscreen mode Exit fullscreen modeThis would work if we would have the
tag in our component and only its text content coming in via a props, but for whatever reason we don't want to do that.
To make this work we can change our component's CSS like so:
:slotted(h1) { font-size: 1.8rem; border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: calc(var(--base-gutter) * 2); margin-top: 0; padding-bottom: calc(var(--base-gutter) * 2) }
Enter fullscreen mode Exit fullscreen modeNow it works! And what's even cooler is, if that you add another style block to the
...
h1 { color: red }
Enter fullscreen mode Exit fullscreen mode...and a this line of code to the template.
I'm hard coded in the component
Enter fullscreen mode Exit fullscreen modeYou'll see that the
we pass through the
#header
slot doesn't get red, while it's rules won't affect the "hard-coded".
If you are wondering how Vue.js does this, it's very easy. The difference in the rendered output is literally one character.
h1[data-v-3f4a8ec2] { // styles for the tag inside the component }
Enter fullscreen mode Exit fullscreen modeh1[data-v-3f4a8ec2-s] { // styles for the tag coming from the slot }
Enter fullscreen mode Exit fullscreen modeThe generated
:scoped()
selector gets an extra-s
appended to the file name hash that's used to scope elements inside the components.Global styles
The
:global()
combinator provides an escape hatch from the scoped styles. A good use case for this would be if you have some page identifier class on the maintag, which is normally out of scope of your Vue application, but you want to keep your styles that hook into these classes inside your page components.
<style scoped> .App { color: #000; } :global(body.home-page) { background-color: antiquewhite; } style>
Enter fullscreen mode Exit fullscreen modeAlso note that this could be achieved by adding two
</code> tags in your SFC, one with the <code>scoped</code> attribute and one without it.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight vue"><code><span class="nt"><</span><span class="k">style</span><span class="nt">></span> <span class="nt">body</span><span class="nc">.home-page</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">antiquewhite</span><span class="p">;</span> <span class="p">}</span> <span class="nt"></</span><span class="k">style</span><span class="nt">></span> <span class="nt"><</span><span class="k">style</span> <span class="na">scoped</span><span class="nt">></span> <span class="nc">.App</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span> <span class="nt"></</span><span class="k">style</span><span class="nt">></span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <h3> <a name="jsincss-the-vue-way" href="#jsincss-the-vue-way"> </a> JS-in-CSS the Vue way </h3> <p>This last one is the most exciting and solves a lot of the use cases for which you would have had to turn to CSS-in-JS libraries like <a href="https://github.com/egoist/vue-emotion">vue-emotion</a> in the past.</p> <p>You can use the v-bind directive as a CSS value and extrapolate any JS value inside the <code><style></code> tag of the SFC just as you would in your <code><template></code>.</p> <p>This is great for every use case where you want your styles to react directly to some user input or state change without having to write a bunch of predefined classes.</p> <p>To demonstrate how powerful this feature is, I've added a small demo with a color picker.</p> <p><iframe src="https://stackblitz.com/edit/vitejs-vite-va5yn3?embed=1&file=src/App.vue" width="100%" height="500" scrolling="no" frameborder="no" allowfullscreen allowtransparency="true" loading="lazy"> </iframe> </p> <p>If you look at the rendered code you'll see that Vue.js is generating CSS custom properties that are inserted into inline styles and then they cascade down the component.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><div</span> <span class="na">data-v-45e5ffe2</span> <span class="na">style=</span><span class="s">"--45e5ffe2-color:rgb(230, 74, 25);"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">data-v-45e5ffe2</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"vc-color-wrap transparent"</span> <span class="na">data-v-11bd4fe5=</span><span class="s">""</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"current-color"</span> <span class="na">data-v-11bd4fe5</span> <span class="na">style=</span><span class="s">"background: rgb(230, 74, 25);"</span><span class="nt">></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"example"</span> <span class="na">data-v-45e5ffe2</span><span class="nt">></span>Click on the square to select a color!<span class="nt"></p></span> <span class="nt"></div></span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.example</span><span class="o">[</span><span class="nt">data-v-45e5ffe2</span><span class="o">]</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--45e5ffe2-color</span><span class="p">);</span> <span class="p">}</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>I hope you've found this post useful and it will help you write CSS more effectively in your next Vue.js project!</p>
-
Dynamic styling in Vue.js
Besides of styled-components library, there are also other CSS-in-JS libraries usable for Vue.js, for example Emotion through vue-emotion package.
twin.macro
-
Tailwindcss in Styled-Components
Twin Macro Github Repo. This is a great resource to help you pick up Twin’s syntax, learn more about the package, and keep up to date with the latest releases.
-
CSS Style Guide for Web Dev?
Personally I like twin.macro the most. It’s similar to the above but based on Tailwind.
-
Cool Tailwindcss Tools For Everyone
twin.macro is a library that allows you to use these styles in your JavaScript code. This library works exactly like styled-components.
- How do you css?
-
Fixing Class Composition in Tailwind CSS
One of the more promising alternatives is twin.macro - a Babel macro that processes Tailwind classes to generate JS objects understandable by various CSS-in-JS libraries. The developer experience (DX) of using it is amazing as you not only get all of Tailwind’s features without much change to your code, but you also get much more flexibility - all that on top of the traditional benefits of CSS-in-JS. Here’s an example code:
-
Setup Nextjs Tailwind CSS Styled Components with TypeScript
twin.macro
-
What unpopular webdev opinions do you have?
If you use Tailwind with React a lot, and are wanting support for Styled Components, give Twin Macro a look. They're close to finishing support for TW v3 in their Releases section :)
- Are utility classes horrible design or am I dumb?
- What's the proper way to write Tailwind with React?
-
Stailwc: an swc plugin for transpiling tailwind directives at compile time
The blocker for us using it is our use of an excellent library called twin.macro which is built against babel's transpilation APIs to parse tailwindcss directives at compile time so that they may be used with css-in-js libraries. This efficiently bundles your css so that you only ship the precise css you use. The problem is, it's all quite slow.
What are some alternatives?
goober - 🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
twind - The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
Tailwind CSS - A utility-first CSS framework for rapid UI development.
vue-styled-components - Visual primitives for the component age. A simple port for Vue of styled-components 💅
tailwindcss-classnames - Functional typed classnames for TailwindCSS
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
jest-styled-components - 🔧 💅 Jest utilities for Styled Components
styled-system - ⬢ Style props for rapid UI development
tailwind-safelist-generator - Tailwind plugin to generate purge-safe.txt files
tailwindcss-intellisense - Intelligent Tailwind CSS tooling for Visual Studio Code
tsdx - Zero-config CLI for TypeScript package development