When using devtools, the classnames are sometimes difficult to differentiate.
Emotion js has here a good solution: https://emotion.sh/docs/labels
Basically they use the "Label" Property in css to append that to the generated class name.
Here some examples:
css-a281on-some-name
css-1i3s76n-another-name
Does something like this exists for styled-components?
I could not find it.
If not, I would make a feature request.
You should try the babel plugin for styled-components. If the component ABC is created with styled-components in the file SomeFile.js, the class name for that component will look like SomeFile__ABC-fBdEtY JrIAq. Add the plugin to your babel config, either in .babelrc or in options.plugins in babel-loader if you use webpack.
Related
Colleagues, I'm trying Parcel as an alternative to webpack project builder and I like it, but there are two BUTs that I still can't beat (here are links to starting builds - build on Parcel
and build on webpack):
1) In the assembly under the webpack, I used svg-sprite-loader to create svg sprites, which adds immediately after opening body svg with symbols like this:
there is no such plugin in the parcel assembly, I tried to install parcel-plugin-svg-sprite, but it does not compile a separate sprite (at least I did not find such a solution in the documentation).
As a result, for now, I am inserting svg in the way described in the parcel documentation (I use a pug in the project):
svg
use (href = "../../ icons / facebook.svg")
but in this case, I only get an empty space ((
2) When building a project, i get one folder with a lot of files, which is not very convenient, in the documentation I found that i can use the -d flag to set a name for the folder in which building the project, but did not find how to separate html/css/js/imgs by folders.
Thanks in advance for any help.
I don't think that there is yet a plugin for parcel2 that will allow you to easily create svg sprites. The parcel-plugin-svg-sprite package you mentioned is for parcel 1, so it is not expected to work. (In general, you can expect parcel 2 plugins to conform to this naming scheme - packages that start with parcel-plugin are probably for parcel 1).
As a workaround, the easiest way to use svgs in a pug template built with parcel would be to use an <img> or an <object> tag with a src property, e.g:
img(src="../../icons/facebook.svg")
or
object(data="../../icons/facebook.svg")
Doing it this way, where the svg file is "external" has a few limitations(discussed in the docs), notably there will be an extra round trip to download each svg (this would be good for caching, but bad if there were hundreds of svgs on your site). Also, you can't style the svg with css from the surrounding document.
You can avoid the first limitation (extra server round trip) by using css background-image/background property with a data URL (see docs)
.pug file
.icon-test
.(s)css file
.icon-test {
background-image: url('data-url:../../icons/facebook.svg');
}
(In react-based projects there is a way to avoid both these limitations and get parcel to inject the SVG as inline JSX through the #parcel/transformer-react-svg plugin (see docs), but I'm not aware of a similar plugin (yet) for pug templates.)
You can control the structure of the output files in parcel's dist folder by writing a custom namer plugin. I explained how to do this in this answer.
The plugin developer for the first parcel made the build for the parcel v2, and I say thank you! Here is the plugin, tested it with html and pug, everything works! https://github.com/Epimodev/parcel-plugin-svg-sprite
Here is a npm package I am using:
http://blueprintjs.com/docs/#components.usage
I would like to use their component with CSS, but I don't their CSS affect to my own CSS. Is this possible to allow the CSS package ONLY affected in that npm components? Thanks.
Precisely what #barry-johnson said in his comment above: we use pt- as a namespace for all of our CSS classes to avoid collisions with your own application styles. For instance, you could use your own .custom-button alongside our .pt-button with no conflicts.
However, if you use a Blueprint React component, then it's going to use the Blueprint classes, and you're going to want to use our CSS (because it's not just pretty colors, there's some useful layout stuff in there too). Hope that helps!
I use chosen 1.2.0 from nuget. My chosen.css file contains class like .chosen-container, .chosen-container. When i call my dropdownlist class using .chosen() function. Resulted css class will be chzn-container, chzn-container-multi. It causes display ugly. but functionality work. I have no error in browser console.
When i check another sites, both generated markup and chosen.css contains chzn-container, chzn-container-multi classes only.
Nuget adds only css. It is not add chosen.jquery.js. I don't know why.
The Nuget package named simply "chosen" does not, as the OP says, contain the .js.
You need to search for Harvest.Chosen. Hopefully this will help someone in the future.
For a recent site, the client has 5 different brand styling colours. So to keep track of everything in the less files (which we use node to compile to one final css file), I've defined the colours as less variables and used the .button-variant() mixin to generate the styles. e.g.
#color-cta-light: #df134d;
#color-cta-dark: #860c2f;
#color-cta-background: #fcf7fa;
.btn-cta {
.button-variant(#ffffff, #color-cta-light, #color-cta-dark);
}
That works fine. However, I've done this with panels as well, and I've now ended up with an 11,000 line long css file. It is this long because we need the majority of the default Bootstrap styling (such as .btn styling) as well as my custom styles.
What I am wondering is, (and keeping it simply by using just buttons as an example) is there a good easy way to remove the lines in the css that pertain to the default Bootstrap button styling, i.e. btn-success, btn-warning, etc. By easy, I mean automatically. We're using the node lessc modules to compile the less files (using a grunt watcher), so I imagine whatever it is that would need to happen would be run after the compile.
Alternatively, should I just amend the default bootstrap mixins to do nothing, and use my own custom mixins? I feel like that should work but that would mean a bit of extra time each new version of Bootstrap (currently 3.1) spent making sure that the custom mixins are up to date.
What I'm hoping to end up with is a single stylesheet, with default button styling from button.less without the additional overload of unused CSS. With my understanding, it's not possible but I'm hoping there are some tools out there that I don't know of that would help my situation.
If I understand you correctly, looking at both your question and your comment to Bass Jobsen, you want to keep Bootstrap styling, but not for the "button styling."
I believe the LESS (reference) feature is still what you want, but just selectively applied.
Assuming you are using the "bootstrap.less" file, add the reference notation just before the "buttons.less" file, like so (I've elided much of the normal "boostrap.less" file for brevity):
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
...
// Core CSS
...
#import (reference) "buttons.less";
// Components
...
// Utility classes
#import "utilities.less";
#import "responsive-utilities.less";
This will totally deactivate all classes from "buttons.less" from being generated in your output css code, but still keep those classes available for mixin purposes. Should you need a particular piece from that code, let us say you wanted to keep the base .btn class, then you would have to add it back into your css, like so:
.btn {
.btn;
}
The outer .btn will reform a class in your code, while the inner .btn will use the referenced "buttons.less" .btn to generate the code.
Using (reference) in this way lets you selectively remove aspects of boostrap by module, while keeping those aspects accessible for the rest of bootstrap and for any mixin uses you have for it. This is probably a preferable method if you desire to remove most of the code from a module (if you actually wanted to keep most of the code, it would probably be best to just let the unused portion remain and import it normally).
You can use import with reference:
#import (reference) "bootstrap.less";
#color-cta-light: #df134d;
#color-cta-dark: #860c2f;
#color-cta-background: #fcf7fa;
.btn-cta {
.button-variant(#ffffff, #color-cta-light, #color-cta-dark);
}
This will give you only the CSS for you button. (and some :before : after pseudo classes which seems a bug for me).
I need do something like that:
I have theme "panel" in /themes/panel and there layout /themes/panel/views/layouts/main.php with example content
<a>$content</a>
I have module "admin" in /protected/modules/admin and there layout /protected/modules/admin/view/layouts/main.php with example content
<b>$content</b>
And on the end i want
<a><b>view</b></a>
Also in /themes/panel/views/layouts/main.php i need load css file from module.
In other explanation:
I have one template for all panels (header, css files, footer), but each of panels need separate layout (only the middle of content change like menu etc.) and one or more individual css file.
Also some images will be include from main theme, other will be individual for modules.
You can use the renderPartial function for load the parts of layout.
<?= $this->renderPartial('webroot.themes.' . Yii::app()->theme->name . '.views.layouts.' . Yii::app()->layout . '.<PART_OF_LAYOUT>') ?>
I disagree that in many help forums of the Internet, when someone asks abot theming a module, everyone suggests a path alias to the themes folder. I think this is wrong, because it implies modules to be splitted, and modules are supposed to be a black-box that can be used across projects. The advice given in such forums would only be valid if a theme is shared among several modules. If someone wants to "package" a theme inside a module, she can:
-add an init function to the controller of the module
-inside that init, use the class attribute layout and a path alias, like this, supose a module whose id is "Sample":
then you add, to SampleCOntroller.php:
public function init() {
//BELOW: it will use the layouts/main.php inside the module.
$this->layouts = "sample.views.layouts.main";
}
Yo can check about path alias here:
http://www.yiiframework.com/doc/guide/1.1/en/basics.namespace