Option to use only css modules without $style. prefix #13
Comments
|
Hi @non25 thank you for your feedback.
Definitely, using the svelte parser and walker would be smarter and less prone to errors.
The use of the prefix Thus, we could add an attribute to
I don't think the native scoping will be dropped. It does work well on a full svelte application and has the advantage to allow the use of simple html tag as selector instead of adding a class on every single element. (Except that part though sveltejs/svelte#4374)
Yes, that was the main reason for creating the preprocessor. Class inheritance on hybrid project. To summarize, getting rid of <p class="serif externalClass">My lorem ipsum paragraph</p>
<p class="green serif">My green lorem ipsum paragraph</p>
<style module>
p {
font-size: 18px;
}
:global(.serif) {
font-family: serif;
}
.green { color: green }
</style>generating <p class="serif externalClass svelte-vg78j0">My lorem ipsum paragraph</p>
<p class="green-1ErDT serif svelte-vg78j0">My green lorem ipsum paragraph</p>
<style>
p.svelte-vg78j0 {
font-size: 18px;
}
.serif {
font-family: serif;
}
.green-1ErDT { color: green }
</style>Anything else we should consider ? |
I didn't mean it would be dropped. I meant that a user could install
That part, and the part where you try to patch global classes from within the component without overriding too much. Like svelte-scoped
There should be an option to output selectors wrapped with globals when using Here's the problem with the approach you are trying to stick to. <p class="green">My green lorem ipsum paragraph</p>
<style module>
p {
color: red;
font-size: 18px;
}
.green {
color: green;
}
</style><p class="green-1ErDT">My green lorem ipsum paragraph</p>
<style>
p.svelte-vg78j0 {
/* now this selector will have more weight than .green-1ErDT */
color: red;
font-size: 18px;
}
.green-1ErDT {
/* this rule will get overriden */
color: green;
}
</style>Also So to conclude, the only acceptable way of doing it that I see now is: Look for class selectors in the style tag, I'd like to help you achieving that and then propose to Thanks for response. 🙂 |
Yes that makes sense, if you add a class
Like you would prefer to have every selectors treated as global instead of using the provided solution This will happen if every tag selectors are treated as global. <!-- Parent Component -->
<div class="myClass">
<h3>Loren Epsom Title</>
<p>Lorem ipsum paragraph</p>
<ChildComponent />
</div>
<style module>
.myclass p {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
</style>
<!--- Child Component --- >
<div class="child">
<p>A child lorem ipsum paragraph</p>
</div>
<style module>
/* Overrides parent component styles */
.child p {
font-size: 16px;
font-weight: regular;
text-transform: none;
}
</style>It is something to consider (and yes CSS Modules works that way css-modules/css-modules#131)
Yes I know, tag selectors have more weight than a css modules className because they are scoped with a class. I can see it happening <ul>
<li>Home</li>
<li class="active">About</li>
</ul>
<style module>
li {
color: gray;
}
/* this will never be applied */
.active {
color: blue;
}
/* forcing us to that that instead */
li.active {
color: blue;
}
</style>or rewriting the component such as <ul>
<li class="item">Home</li>
<li class="item active">About</li>
</ul>
<style module>
.item {
color: gray;
}
.active {
color: blue;
}
</style>I believe it's just the way we style our components. The CSS modules philosophy is to apply a class to every elements requiring styling. A tag selector is always global or within the scoped of its parent class. As I match the functionality of the preprocessor to the way I style my components, I kept the native scoping so that I could use the approach I wanted.
Yes, this is already happening In conclusion, It would definitely be nice to have the full CSS Modules approach available for developers familiar with it as well as the option to mix it with scoped tag for other developers who want it. Adding a global settings Mode <p>Lorem ipsum paragraph</p>
<p class="red-Bf90i">Red lorem ipsum paragraph</p>
<style>
p {
font-style: italic;
}
.red-Bf90i {
color: blue;
}
</style>Mode <p class="svelte-we78ty">lorem ipsum paragraph</p>
<p class="red-Bf90i svelte-we78ty">Red lorem ipsum paragraph</p>
<style>
p.svelte-we78ty {
font-style: italic;
}
.red-Bf90i {
color: blue;
}
</style>And maybe even a third mode <p class="svelte-we78ty">lorem ipsum paragraph</p>
<p class="red-Bf90i svelte-we78ty">Red lorem ipsum paragraph</p>
<style>
p.svelte-we78ty {
font-style: italic;
}
.red-Bf90i.svelte-we78ty {
color: blue;
}
</style>We could also add the possibility to override the global settings by doing it locally The version 2 of the preprocessor will then include
I appreciate that, unfortunately at this stage, I don't think we can both work simultaneously on it, splitting tasks, as the library is very small and everything is connected (basically redoing the parsing), we would be coding the same things on the same files. I will have do to some preparation first, I will let you know. Your inputs and suggestions were already helpful, thank you for that. In the meanwhile, if you follow the cssModules approach of a class on every elements, you shouldn't encounter overriding issues. |
https://svelte.dev/repl/90ac3d2588644eedb81bde4c24b11051?version=3.36.0 Here's an example, I'm not sure you will find it reasonable.
Exactly. I'm used to css cascade, but I don't want to get used to unexpected selector weight wars. 🙂
Yeah, options never hurt. I would expect native scoping to be the default one.
That's a hard one to name. I can't think of something shorter than And now I came to a realization that I wouldn't be able to override child-component styles like Interestingly enough, that behavior is altered when toggling I guess the way to style button components correctly would be I like your proposed way of doing it, however I don't see myself using I guess I'm out of useful input. 🙂 |
|
I made a first draft which can be installed from The Readme is still very minimum yet, I will work on it. For your issue regarding the button, not sure the native mode will solve it by itself, you may have to chain the modifier classes like you said. |
|
Wow, this is so cool. 😀 I've tried it out and as far as I tested, for me this implementation is 3 steps away from being perfect. 🙂
Thank you! This is amazing. Edit: read readme more carefully and it looks like I can use component path as a seed just by modifying options like it is done in webpack. 🤔 |
|
External classes are scoped, but it looks like styles aren't being applied. 🤔 https://github.com/non25/svelte-template-webpack/tree/css-modules-micantoine |
If as a seed, you mean to use it within the className , yes you can set your own localIndentName
That is something I didn't think of, I'm checking every node type
Please, can you explain more what you have in mind, I don't understand here
Basically class directive shorthand cannot have dynamic value, so when transforming the directive classname into css modules, it doesn't match the variable name anymore.
This is a bug from the external import along with the Thank for your tests. |
I wanted something like
There's a myth that somebody somewhere uses component
That is clever. Cool. 👍
Thank you for the great work. 🙂 |
|
New version available Check the readme for further details Features
Fixes
Example of use
// Preprocess config
...
preprocess: [
cssModules({
hashSeeder: ['filepath'],
})
],
...<button class="success">Ok</button>
<button class="cancel">Cancel</button>
<style module>
.success { background-color: green; }
.cancel { background-color: gray; }
</style>Generating <button class="success-yr6RT">Ok</button>
<button class="cancel-yr6RT">Cancel</button>
<style>
.success-yr6RT { background-color: green; }
.cancel-yr6RT { background-color: gray; }
</style>
// Preprocess config
...
preprocess: [
cssModules({
allowedAttributes: ['data-color', 'classname'],
})
],
...<button class="red" data-color="red">Red</button>
<button class="red" classname="blue">Red or Blue</button>
<style module>
.red { background-color: red; }
.blue { background-color: blue; }
</style>Generating <button class="red-yr6RT" data-color="red-yr6RT">Red</button>
<button class="red-yr6RT" classname="blue-aE4qW">Red or Blue</button>
<style>
.red-yr6RT { background-color: red; }
.blue-aE4qW { background-color: blue; }
</style> |
|
Yeah, I've been monitoring and building v2 since yesterday. 😁 |
|
I fixed few other bugs from the the native parsing after doing further testing. I also added another feature New version |
|
Fixed in |
Hi.
Amazing project.
Recently I started to really getting fed up with svelte's default style scoping, mostly due to it changing selectors weight thus making some intuitive css overrides unintuitive and the inability to override some leaf-component styles without wrapping it with divs...
Maintainers obsession with css properties and div wrapping is beyond me.
I like SFC format and the terseness of
class="some-class"in the template in comparison to something likeclass="{style.someClass}".What do you think about parsing to AST using svelte internal parser like it is done in
svelte-trimand more safely changing classes in the markup through that ?It would enable to safely omit
$style.prefixes and get more "native" experience. 😁In a perfect world that takes maintainers attitude towards other scoping mechanisms, or stripping whitespace I would love to see css modules included in
svelte-preprocessto increase adoption and make it a drop-in replacement for svelte's native style scoping.Another day one sad man in svelte chat wanted to strip base classes from a widget "scoped" styles to prevent outer page affecting the widget... Sent him a link to your preprocessor. 🙂
What do you think? 🤔
The text was updated successfully, but these errors were encountered: