Comments (15)
Right, thanks. CSS builds are now supported by default inlining into bundles as of yesterday. Update jspm and the CSS plugin to see this working, it's documented at https://github.com/systemjs/plugin-css.
from registry.
Yep, I was wondering if it's best to add dependency to CSS loader and shim CSS file into page when someone imports bootstrap. May be good for quick hacking, but often developers chain CSS/LESS/SASS files from libraries into their own build process and then include only one file.
from registry.
It's supposed to be, but the override seems to be out of date. Contributions welcome.
from registry.
So to be clear, when some JS library requires CSS file(s) to look/work properly, I must shim it in the override? It is not optional or dependent on the developer but it is mandatory?
So what should I do, when I don't want to load multiple CSS files, but control it on my own? I guess forking (and modded package.json in the fork) is again my only option until persistent local overrides work. :)
from registry.
@smajl if you want to do your own control, you can do something like:
import 'some-package'; // import js
import 'some-package/style.css!'; // import css separately
We're going to be adding support to Bootstrap for importing just the JS eventually, but for now that is not possible to provide both options through config.
Local overrides are really not a solution - I know it seems easier, but it breaks shared dependencies.
from registry.
@guybedford To be more specific, I just wanted to make a PR for one angular module which needs CSS to work properly. So I am probably supposed to shim that CSS in the override for others. But I don't want to be forced to load that CSS, I want to merge it with my other styles into one file. It's like biting your own tail here... :D
from registry.
@smajl what do you mean you want to merge it with your other styles into one file? How is creating an override shim stopping you from doing that?
from registry.
@guybedford It's not stopping me, I can do that, but I would then load the package's CSS twice. Once shimmed and once in my CSS build.
dep1.css+dep2.css+my.css
vs dep1.css!, dep2.css!, dep1.css+dep2.css+my.css
from registry.
Can you clarify why you would be loading the CSS twice?
from registry.
Me or someone else adds angular-loading-bar to registry:
{
"directories": {
"lib": "build"
},
"main": "loading-bar",
"registry": "jspm",
"dependencies": {
"angular": "^1.2.0",
"css": "*"
},
"shim": {
"loading-bar": {
"deps": ["angular", "./loading-bar.css!"]
}
}
}
This means, when I do import 'angular-loading-bar'
in my code, it will add link
tag to my page head and asynchronously download the loading-bar.css
file. For some developers it might by OK, but I don't want N-HTTP requests from N-packages which shim some CSS files.
I have my LESS file, which builds automatically and imports other CSS/LESS files, e.g.:
@import (inline) '../../jspm_packages/github/chieffancypants/[email protected]/loading-bar.css';
@import 'other-library';
// my own less
.body {}
And then I have one link
tag and one HTTP request. If package offers LESS source for their CSS, I can also easily override variables in their LESS files, etc.
That is why I am againt shimming of CSS files. Interestingly, e.g. font-awesome
is basically just all about CSS and it doesn't shim anything and leaves me in control.
from registry.
Well, seems like I will have to change my workflow then:
- Don't use any
link
stylesheet tags in document head. - Use something like this:
import 'dep1'; // loads dep1.css in the process
import 'dep2; // loads dep2.css in the process
import 'my.css!';
// my JS code
- Don't import CSS/LESS from dependencies in my CSS build (which produces my.css), let the jspm handle that when bundling.
Just one last thing, I would have to ensure, that my.css
files gets loaded last (to ensure that last CSS rule defined overrides any previous, conflicting rules). How to do that?
from registry.
I'd suggest that yes.
You can also use the separateCSS
option to create a CSS file along with each bundle that can be included with a link tag.
In terms of order, it's advisable to rely on specificity over order if using this CSS approach. I've updated the docs at https://github.com/jspm/jspm-cli/wiki/Plugins#css-builds about this stuff.
Apologies if it's messing with your workflow, feedback would be great to hear.
from registry.
Well, I really love the idea of almost zero config install-and-forget packages including everything you need, but it takes time to do that mind shift from current habits. :) I haven't realized that we should omit 'link' tags at first. :) And relying on specificity is OK with me.
Thanks for updating the docs and your time, you've been a great help.
from registry.
Thanks, glad to know it's not too much of a pain!
from registry.
Hi guys,
I know this is a old thread... but I was using jspm lastly and it is really nice... and a question came to my mind, since everthing is installed using packages how to load the styles related to them...
lol, yes I know the css-loader... I was using requirejs for some years. But still as smajl said, when you need to override... and reuse style, as in the case of less, sass,... you need to be able to set the configuration of a "global" style, at least for now ( itcss explains this well)
Here the "import" problem is solved in js... that could be a tricky option sometimes for styling... so I was guessing if there are some other options... so I have found also plugins related with less like:
https://github.com/sebasrodriguez/jspm-less
https://github.com/richardlawley/less-plugin-jspm-import
also this plugin to load sass resolves paths to jspm packages:
https://github.com/mobilexag/plugin-sass
I wanted to write them here for others like me :D.
from registry.
Related Issues (20)
- Difference between Jenkins and local build HOT 7
- Slow/flaky npm.jspm.io registry HOT 7
- intro.js overrides? HOT 1
- npm Debug package override not applying HOT 3
- some fetch errors while making ts bundle HOT 1
- Latest d3 breaks jspm install HOT 3
- registry CI failure caused by transitive dependency update
- GitLab endpoint? HOT 1
- I'm confused by the module format documentation in the wiki HOT 2
- Is there a way in my package.json to tell JSPM not to install a specific dependency? HOT 14
- Mapping a dependency to `@empty` changes the import path
- Bootstrap install fails HOT 5
- `jspm install` not outputting anything in Windows bash
- React Router Dom 404
- new HOT 1
- Question: how much can I use dev.jspm.io? HOT 2
- kasperlewau.github.io/registry is not found HOT 1
- Licensing information. Can this project make it explicit?
- @shopify/app-bridge-utils is missing all new versions for the last 9 months HOT 2
- Self-hosting JSPM? HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from registry.