Coder Social home page Coder Social logo

Comments (30)

EisenbergEffect avatar EisenbergEffect commented on May 5, 2024 22

from framework.

ogliznutsa avatar ogliznutsa commented on May 5, 2024 6

@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.

EisenbergEffect avatar EisenbergEffect commented on May 5, 2024

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.

Alxandr avatar Alxandr commented on May 5, 2024

Combined with scoped css this would be quite awesome...

from framework.

Aaike avatar Aaike commented on May 5, 2024

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.

Alxandr avatar Alxandr commented on May 5, 2024

@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.

Aaike avatar Aaike commented on May 5, 2024

that is very nice, and there is even a polyfill to make it work all the way back to IE6

from framework.

kristianmandrup avatar kristianmandrup commented on May 5, 2024

Just do it :)

from framework.

MicahZoltu avatar MicahZoltu commented on May 5, 2024

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.

MicahZoltu avatar MicahZoltu commented on May 5, 2024

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.

Aaike avatar Aaike commented on May 5, 2024

@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.

EisenbergEffect avatar EisenbergEffect commented on May 5, 2024

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.

smolinari avatar smolinari commented on May 5, 2024

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.

delebash avatar delebash commented on May 5, 2024

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.

omidkrad avatar omidkrad commented on May 5, 2024

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.

Aaike avatar Aaike commented on May 5, 2024

a solution for this can now be tracked here : aurelia/templating#65

from framework.

EisenbergEffect avatar EisenbergEffect commented on May 5, 2024

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.

ben-girardet avatar ben-girardet commented on May 5, 2024

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.

EisenbergEffect avatar EisenbergEffect commented on May 5, 2024

Can you give me a few simple instructions to reproduce this in a skeleton nav sample?

from framework.

ben-girardet avatar ben-girardet commented on May 5, 2024

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.

EisenbergEffect avatar EisenbergEffect commented on May 5, 2024

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.

ben-girardet avatar ben-girardet commented on May 5, 2024

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?

capture d ecran 2015-09-11 a 02 53 43

from framework.

EisenbergEffect avatar EisenbergEffect commented on May 5, 2024

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.

ben-girardet avatar ben-girardet commented on May 5, 2024

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.

danghongthanh avatar danghongthanh commented on May 5, 2024

I got the same issue when running in Firefox. With Chrome, there is no issue.

from framework.

atsu85 avatar atsu85 commented on May 5, 2024

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.

PierBover avatar PierBover commented on May 5, 2024

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.

EisenbergEffect avatar EisenbergEffect commented on May 5, 2024

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.

PierBover avatar PierBover commented on May 5, 2024

Thanks for the fast answer Rob!

I will keep an eye on those CSS modules.

from framework.

indfnzo avatar indfnzo commented on May 5, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.