Comments (30)
from framework.
@EisenbergEffect Hi, you've mentioned CSS Modules plugin for Aurelia earlier - is it available? Maybe there are any other ways of doing CSS Modules + Aurelia (+webpack)?
from framework.
You should be able to do this entirely as a loader plugin. FYI, you can use link
tags in your view to bring in CSS when the view is loaded also. Will keep this open to consider this for the future, but not at the top of the list right now...
from framework.
Combined with scoped css this would be quite awesome...
from framework.
It would also be great if encapsulation would work correctly.
right now for custom element you would have to place a style tag inside the shadow dom to make it work.
<style>
:host {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
:host(:hover) {
opacity: 1;
}
:host(:active) {
position: relative;
top: 3px;
left: 3px;
}
</style>
would be great if this style can be placed in an external css file that will be injected into the shadow dom when the element is created.
@Alxandr is that what you meant with scoped css ?
from framework.
@Aaike http://css-tricks.com/saving-the-day-with-scoped-css/
Scoped css just means you don't even need shadowdom. At least if I've understood it correctly.
It only applies css t othe "scope" it's in (current html node and descendents). So if we injected the css into the template, it would only apply to, well, the template. Meaning you could have css per view easily.
from framework.
that is very nice, and there is even a polyfill to make it work all the way back to IE6
from framework.
Just do it :)
from framework.
Stylesheets in shadowdom views is a big deal IMO. As a developer who tends to work on very large applications, the ability to build widgets/components that work in isolation is critical, and in fact the number one thing I am looking for in a framework.
Taking the getting started tutorial, the nav-bar
custom element is a great example of a re-usable component. It isn't coupled with the application at all, it just has a dependency on the router which can be exposed via a required property. I would like to be able to style the nav-bar and package it up to be re-used by other developers. However, I have to be careful that none of my styles or naming choices collide with theirs.
Enter Shadow DOM. The shadow DOM solves this problem perfectly. The only problem is, I have been unable to find a nice clean way to get the styles written into the Shadow DOM. In a perfect world, the following would work:
import {Behavior} from 'aurelia-framework';
import "font-awesome/css/font-awesome.min.css!";
export class NavBar {
static metadata(){ return Behavior.withProperty('router').useShadowDOM; }
}
At the moment this code does not work because font-awesome ends up outside the shadow DOM so the contents of the shadow DOM are not styled by it.
What this should do is embed font-awesome.min.css into my view inside the Shadow DOM element. Ideally, it would copy from the cached font-awesome.min.css if available via the jspm module loader.
from framework.
Alternatively, a link to a stylesheet inside of a view should end up inside the shadow DOM if you use the useShadowDOM() behavior.
from framework.
@Zoltu while i think shadow dom is really great , the first thing we need to worry about is creating a polyfill so that it works for IE9+.
Then we can go crazy with implementing scoped and encapsultated css , and treat css like real modules with a dependency tree.
from framework.
ShadowDOM is a bit up in the air in terms of whether or not it will land as an official spec. However, we are looking into making this work now.
from framework.
I've been lurking this project and I am nobody special, but I'd also welcome anything that helps do what @Zoltu suggests.
As a developer who tends to work on very large applications, the ability to build widgets/components that work in isolation is critical, and in fact the number one thing I am looking for in a framework.
Our project is also going to build off of a widget/ component basis and as a platform we want users of the platform to be able exchange components amongst themselves. The isolation part means to us that the users can insert their own content, yet import the proper styles needed for the component to render properly, so it is styled to their own pages, but without seriously breaking the page. So actually being able to import style sheets would be a killer feature. Though, I have to agree, it does sound more like a plug-in kind of feature, and if it can be done with Aurelia easily as a plug-in, great.:)
Scott
from framework.
Regarding using SASS from Modularizing Stylesheets #87
I am just now testing support for SASS in the build scripts, I will push a forked repo of the skeleton nav when done, but here is working code, you can delete the path materialize or replace it with a path to another sass lib like bootstrap-sass-official. This is not aurelia specific just a plain old sass task to gulp, as far as adding a css or scss file along with html and js of the same name, I think that still needs to be worked out, this just gets you up and running using sass.
Add to build\tasks\build.js
Add as another require statement
var sass = require('gulp-sass');
Add as another build task
gulp.task('build-sass', function () {
gulp.src(paths.sass + '**/*.scss', {base: paths.sass})
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/[email protected]/sass',
],
errLogToConsole: true
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.cssOutput))
});
Add to build\tasks\watch,js
Add as another watch task
gulp.watch(paths.sass + '**/*.scss', ['build-sass',browserSync.reload]).on('change', reportChange);
Add to build\paths.js
sass: appRoot + 'sass',
Replace styles: with css: appRoot + 'css/**/*.css',
I renamed and adjusted the styles: because I like it named css better and also instead of the folder being in the root I moved under src, just my preference
Add sass: appRoot + 'sass','
Add cssOutput: outputRoot + 'css',
Add gulp-sass to package.json by running npm install gulp-sass --save-dev
That's it you should be able to create a styles.scss file in a folder called sass under the src folder, then run gulp build or gulp watch
from framework.
Would it be a good idea to set a convention to prefix CSS classes with module names so that they don't overlap, or make the framework take care of this sort of namespacing?
from framework.
a solution for this can now be tracked here : aurelia/templating#65
from framework.
Going out in tomorrow's release we now have support for css via the require element. So, from a view, you can do this:
<template>
<require from="./my-styles.css"></require>
...
</template>
That will ensure that the styles are loaded as part of the view load process. It uses the module loader's text plugin so that the css can also be bundled. When used in this way the css will be added to the head of the document. You can also do this though:
<template>
<require from="./my-styles.css" as="scoped"></require>
...
</template>
In this case, if the element is rendering to ShadowDOM, the styles will be injected into the ShadowDOM root. If the component is not using ShadowDOM, the styles will be injected into the custom html element's view and the scoped
attribute will be applied to the style element.
from framework.
I love this new require feature to load per-view css files. I got it to work for main views, but somehow I encounter an error for children view:
TypeError: __cjsWrapper is undefined
Unhandled promise rejection
TypeError: __cjsWrapper is undefined
Evaluating http://localhost:9000/dist/top-bar.html
Error loading http://localhost:9000/dist/top-bar.html!text
Error loading http://localhost:9000/dist/top-bar.html!template-registry-entry
The file structure is the following:
app.html
<template>
<require from="./app.css"></require> <!-- This loading works> -->
<require from="top-bar"></require>
<require from="map"></require>
<top-bar></top-bar>
<map></map>
</template>
top-bar.html
<template>
<require from="./top-bar.css"></require> <!-- this raises the error -->
<div id="top-bar">Top</div>
</template>
map.html
<template>
<require from="map.css"></require> <!-- This raises an error as well -->
<div id="map">
map
</div>
</template>
Notes:
- (I've not mentionned the
.js
and.css
files here, but they are present. - I've also added a gulp watch/build task in order to copy the
.css
files from/src
to/dist
Am I doing anything wrong ?
from framework.
Can you give me a few simple instructions to reproduce this in a skeleton nav sample?
from framework.
Yes sure. Here is a ZIP file to replace the /src folder in the skeleton. It will provide the use case in the app.html file.
http://myaccount.dropsend.com/file/a617263fb1bd35d7
from framework.
Ok, it worked fine for me...pending one change to my build. The skeleton wasn't set up to copy all css files over to the dist folder. Once I did that everything was in working order. Perhaps you are missing that. I'm about to commit a fix for this to the skeleton master. Wait a few minutes and you can check there to see the commit.
from framework.
Thanks for your answer. Unfortunately it doesn't solve the problem on my side (I had already modified the gulp tasks to build/watch the css files in /dist). I tried the new skeleton version as well.
Here is a screenshot of the error if it can help to give a hint... Could it be that I'm doing something else wrong?
from framework.
That error relates to the module system. It's possible you have an old version of jspm or system.js. You could install the latest jspm, then re-install all modules.
from framework.
I'm running JSPM 0.16.6. I tried clearing node_modules and jspm_packages folders and re-install all-modules. I still get the error.
from framework.
I got the same issue when running in Firefox. With Chrome, there is no issue.
from framework.
I get this issue
TypeError: __cjsWrapper is undefined
only when Firebug is enabled (just as You can see from @ben-girardet screenshot ;) ) - so this seems like it could be related to systemjs/systemjs#814, but the error message is different.
For some reason when i used SystemJS v0.19.0 (that comes through jspm 0.16.6) it worked with skeleton-navigation, but not with my other aurelia application (haven't taken the time to pin-point the problem).
from framework.
Hey @EisenbergEffect
When you do <require from="./my-styles.css" as="scoped"></require>
I understand these styles are scoped to the component and CSS selectors only apply to the current component. Is that correct?
What happens when such component is removed from the DOM with a route change? Are these scoped styles removed as well or kept in memory?
And finally, is there a plan to be able to write scoped CSS in the same component file like Vue does? Having a single file for HTML and CSS (even JS) is awesome for team work.
from framework.
Good questions. First the as="scoped"
designation only works if you are using shadow dom (and the browser natively supports it) or if you are using a browser that supports scoped css, such as firefox. If this is true the css will be scoped and added/removed along with the component.
However, this isn't the majority of browsers today. So, this is best thought of as a "future" capability. It would be possible to polyfill it, but quite complicated.
That said, we are working on some other ideas for styles. For example, we have an early implementation of CSS Modules, which is quite elegant, using our view pipeline. Here's where you can check out that experiment: https://github.com/bryanrsmith/aurelia-binding-loader
from framework.
Thanks for the fast answer Rob!
I will keep an eye on those CSS modules.
from framework.
Are there any updates on CSS Modules? It's been a while since the last communication regarding this happened here. Is there still no reliable way to implement this right now? For IE10+?
I tried <require as="scoped"></require>
and it didn't scope the css properly (the css contents were appended to the <head>
element). And even if it did work, there's still the polyfill problem (right?).
Has anyone efficiently implemented a fully-modular CSS Modules implementation with Aurelia? That works with CLI setups?
from framework.
Related Issues (20)
- Many aurelia libraries are broken in iOS 16 HOT 47
- example link for codesandbox in README.md HOT 1
- How to fetch data from a JSON file in aurelia framework? HOT 4
- How to bind repeat.for on the async array variable? HOT 5
- aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn'); is broken? HOT 5
- Building all public files to www folder
- set object that has observed properties breaks the observing system HOT 4
- Issue with compose element and composition
- Combination of `@dynamicOptions` and `primaryProperty` HOT 5
- Publish Aurelia project with visual studio 2017. HOT 1
- Allow better typing for module configuration HOT 4
- Upgrade gulp to v4.
- Staging a component for testing
- UI is not re-rendered when Set is used. HOT 5
- Binding Engine seems to strip CR from text HOT 1
- Component inheritance with bindings on the base doesn't work as expected
- Content of repeat for on tr tag rendered outside of tag HOT 1
- How to use aurelia in qiankun HOT 2
- Content editable div inside a parent div that has a mousedown event on it cannot be edited in Aurelia HOT 1
- npm audit warning for aurelia-framework - XSS vulnerability in default HTML sanitizer implementation HOT 15
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 framework.