what's the difference between the coffeescript 'extends' and '#extend'? Extend is for inheritance but then is #extend for a mixin, but you only get one object you can mix in?
#extend is not for inheritance, it's about a mixin – enabling the addition of members from another object without inheritance
Related
I'm trying to make use of the #extend of sass so that I don't mix markup and html together. As explained in this article.
In short, instead of writing
<div class="alert alert-primary>This is an alert!</div>
You'd instead write something like
<div class="banner">This is an alert!</div>
.banner {
#extend .alert;
#extend .alert-primary;
}
Such that styling and content stay nicely separated.
The problem: When using this with webpack (sass-loader) and components (e.g. Vue.js or Angular), I run into a problem where including a bootstrap partial will now result in the complete compilation of the entire bootstrap file into css.
This results into a class .btn[data-v-3614b62c] and another .btn[data-v-45ac961c] etc. for every component that uses the partial bootstrap/scss/_buttons.scss and that for all classes defined in that partial.
Even if I don't use it.
In the long run, this will be detrimental for the application since its size will increase rapidly and I image the browser will slow down with that many css classes to parse.
The question(s): How do I make sure sass doesn't duplicate the entire imported partial?
Can I enable some kind of tree shaking where it only includes the classes I use?
Do I have to change my file structure so that sass understands I only need certain classes inside the partial rather than everything?
Code example
This is a vue component using bootstrap
<template>
<form class="form">
<input type="text" class="input">
<button class="button-submit">Send</button>
<button class="button-cancel">Cancel</button>
</form>
</template>
<style lang="scss" scoped>
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
#import "node_modules/bootstrap/scss/root";
#import "node_modules/bootstrap/scss/buttons";
.form {
.button-submit {
#extend .btn;
#extend .btn-primary;
}
.button-cancel {
#extend .btn;
#extend .btn-danger;
}
}
</style>
This will result in the entire partial _buttons.scss to be compiled into css instead of only .form .button-submit and .form .button-cancel.
Live example
https://codesandbox.io/embed/musing-feynman-8w2kx.
To see the problem I have:
Right click on the example to the right and click Inspect
In the Elements tab, navigate to #document > html > head
At the bottom you'll have several style elements
Two of them will contain all the button css where only the [data-v-######] attribute is different and at the end are my couple of lines code.
Note that the same happens for production builds. The css is then simply bundled up in a single file, but duplicates are still around.
If you are #importing the same CSS rules into different components, then you will get the same rules duplicated across all modules. That's just how it works.
You should only be #importing modules that define abstract declarations like variables, mixins, functions, etc, not actual styles.
The only way you can de-duplicate the styles globally is if you use something like mini-css-extract-plugin to extract and combine all the CSS into a single file and then run it through something like cssnano which will discard duplicate rules (although with scoped CSS, this probably won't work).
Modules are typically built independently of other modules and there isn't a simple way to know if a rule has been declared already by a previous module. In development you may be using style-loader which operates on a per-module basis and injects styles into the webpage on demand; there's just no way it can work out which styles should be injected in case some particular style has already been injected by another component.
It just gets messy; keep it simple by not duplicating styles in the first place.
If you really want to use #extend, then make a separate .scss file which is the only module that #imports the bootstrap styles, and define all your extensions in there.
For a project where Vue is dropped in, is using style or similar available to components?
Vue.component('vue-sup', {
template: '<div>Sup</div>',
style: '* { color: blue; }'
})
I tried adding the styles inside the template like:
<div>
<style>
.here{}
</style>
<div>Sup</div>
</div>
which didn't work because the template parser detected a tag with side effects
Vue's implementation of scoped css is entirely a feature of vue-loader, and thus only works with compilation. Scoped css momentarily made a debut into Html 5 but saw almost no adoption and was dropped entirely as far as I know. There is the anticipation that "Shadow DOM" may be supported broadly and could be use to add scoped css, but adoption is not there yet either.
So at this point you can add unique classes or ids obviously to a parent container and scope your css that way, but is understandably not what you are asking for nor is it always practical.
The best alternative is a pollyfill. There are several that are available. Here is one by Sam Thorogood and another by Thomas Park but if you do a quick search you will likely discover more.
I came across the same problem and I'm able to insert styling inside Vue template
by creating a component that will dynamically insert a <style> tag on the DOM. This might be impractical like #skribe said but it allows me to have separate CSS from JS without using .vue extension.
You can take a look at this
I want to know that why does some code uses classes and styles in vue.js
Can anyone will let me know, well I do know about the usage when to apply CSS by classes and styles. Is this the same reason?
If I understand correctly, you're trying to understand the purpose of class in Vue. You're right in saying that class can be used as a selector for styles. However in Vue, binding to class using the syntax
:class
allows you to apply dynamic styling which can be very useful for manipulating specific elements.
Taking the example you provided,
:class="{ completed: todo.completed, editing: todo == editedTodo }"
this is saying if todo.completed is truthy, then apply the 'completed' style or if the todo item equates to the value of editedTodo, then apply the 'editing' style.
Usually, these styles would be defined on the Vue component, but can also be changed in-line using the :style binding.
The Vue documentation lays this out very clearly:
https://v2.vuejs.org/v2/guide/class-and-style.html
Also, it should be noted that class and :class can co-exist on an element.
I am trying to override the .Select-control css component in react-select.
I want to set a custom height (the default is 36px) so it will look more closely to my other input fields
I have tried to add my own className prop as suggested in the docs however it does not seem to work and just pushes everything down (which makes sense since it's the wrapper for the component)
Is it possible to override the component itself?
I just started working with react-select and ended up overriding the components to bring the elements in line but also had success with passing in my own classes.
.Select-control {
height: 32px
}
I noticed that some of the css selectors can be pretty specific so referencing the css file helped to make sure I overrode the included styles. If you're using ES6 syntax I think you need to import your css after importing the react-select css in order to override.
Hope that helps
Proposition:
G'day, I have a question for the collective dart wisdom-trust. I made an observation while trying to resolve a mysterious error with Dart and Dart-Polymer (see: related).
The thing I came across relates to dart-polymer (and dart-polymer) Element code-reuse; during my investigation of the aforementioned bug, I created two cloned dart-polymer elements:
<x-fred> and
<z-fred>
Both are clones of the Stopwatch element in the dart-polymer example.
Define a Custom Element tutorial.
The only change from the original is element name(s).
What occurs to me, is that to be able to code-reuse a nice 'stock element' such as a stopwatch I minimally need a distinct fred.html for each Element I code-reuse.
That presupposes that I can organise my project such that this is convenient and simple to maintain.
Question(s):
The real question is about how-can a developer do the following things ... ?
code-reuse an Element layout definition without needing to make a clone (or copy).
Is there a dart-polymer pattern to (at least) allow a project to code-reuse the base dart code for cloned dart-polymer elements?
Is there a way to code-reuse an Element definition, using a declarative or "what-not-how" pattern so that I can say:
<z-fred> is-a stopwatch-element (for example).
Are there patterns or recipes to let you be-a stopwatch-element and configure and/or customise an instance to certain styling, parameters, or behaviours.
If not, then these things need to be set-down for discussion. Where does that happen for dart and [dart:polymer]? Is there an comp.lang.dart? :-)
Example:
Assume I have a Polymer element called <z-fred>. And I want to subclass the z-fred element to produce a new (daughter) element definition: <x-fred>
How can I do this?
I'd expect to be able to do something like ...
<!DOCTYPE html>
<polymer-element name="x-fred">
<link rel="import" href="elements/zfred/fred.html">
<template>
<style>
:host { /* override zfred defiitions */
background-color: blue;
text-align: center;
display: inline-block;
border: solid 1px;
padding: 10px 10px 10px 10px;
}
</style>
<div>
<x-fred>
<h1>X-Fred: {{counter}} </h1>
<p>Fred X is a count-down timer. Fred Z is a normal stopwatch (count-up).</p>
<override>
<button on-click="{{stop}}" id="stopXFredButton">Stop</button>
</override>
</x-fred>
<div>
<p>this is a count-down timer. Remaining time at end: {{ counter }} </p>
</div>
</div>
</template>
<script type="application/dart" src="xfred.dart"> </script>
</polymer-element>
See? My example won't work because what's required here is that XFred.polymer inherits from ZFred.polymer.
That said, there is nothing I've seen to bind .html plus .dart into a 'element module' of some ilk. In my small way I wanted to do that by putting each widget in its own folder. For this to work (and there will be better mechanics), the daughter needs to be able to override parent Public and Protected attributes (not private).
I was thinking that xfred.dart would implicitly inherit zfred.dart (since lexically) both Dart files are unrelated to the Polymer element. At this juncture there are product design questions to be explored. Options like:
HTML files have independent inheritance tree to the .Dart files.
That means that zfred and xfred might use (share) the same underlying implementation, per various examples.
Alternately, one could 'invoke' a suitable .Dart implementation of a defined interface.
A blended 'widget' element made up of .html and .dart code specifications.
In a real user interface, I may want to combine a variety of base UI elements into different kinds of sub-elements to make-up a page, form or layout. I think life remains less messy following concept #1. That satisfies another requirement for me, to do with being able to manage alternate code-behind behaviour for the same element.
At the end of the day. The main question I'm asking is how much is part of the framework and how much is manual hack work to ensure things stay happy? :-)
You can inherit from existing polymer elements.
Polymer.dart Extending DOM elements
Seth Ladds dart-polymer-dart-examples
For discussions the best place are the Dart Google groups
https://groups.google.com/a/dartlang.org/forum/#!forum/misc
https://groups.google.com/a/dartlang.org/forum/#!forum/web
https://groups.google.com/a/dartlang.org/forum/#!forum/vm-dev
https://groups.google.com/a/dartlang.org/forum/#!forum/compiler-dev
https://groups.google.com/a/dartlang.org/forum/#!forum/editor