I was used to using the 7-1-pattern to structure my Sass codebase.
Now I started analyzing my project with Google Lighthouse, and basically it tells me that I should removed my unused CSS. The unused CSS however is there because I include my main.sass, which includes all styles independently from the page I'm on.
How do you guys usually deal with this? Page-specific imports (breaking the 7-1-pattern) or are there other tweaks?
Related
I am trying to set up sass with Angular Dart but I'm a bit lost and couldn't find a documentation past 2016 (a good one)
I currently have the following structure:
However I cannot reference a main.css file as it is not found and if in a component I put something like this
styleUrls: ['lib/assets/sass/main.scss']
The webdev serve command fails
My pubscpec is
dependencies:
angular: ^5.0.0
angular_components: ^0.9.0
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
sass_builder: ^2.1.1
build_runner: ^0.10.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
mockito: ^3.0.0
test: ^1.3.2
I cannot figure out what's wrong and also the structure I should use
Should I put in my top component main.scss (or the compiler main.css) and do not set any other file reference or should I include it at every component? And also how can I generate this compiled file when I run webdev serve
Thanks,
Alexi
So the references for styleUrls should always be the compiled css not the Sass file. Also the Urls need to be either relative to the file, or package format. So either 'main.css' or 'package:your_project/assets/sass/main.css'
I would also suggest not having separate asset directories. I tend to find having the sass file next to the component to be easier to maintain.
AngularDart also has style encapsulation by default; meaning CSS won't leak outside of the Components by default. Given this I find it better to have the CSS local to that component and be next to that component. You'll find that is the pattern on the angular components, and gallery.
One small note on the components, and gallery. They use the pattern style.scss.css instead of style.css which breaks the convention of Sass. The reasoning behind it is so that we can quickly tell what the source of the CSS file was. Was it written by hand, or did it come from Sass. This is achieved by having different settings in the build.yaml file. I don't think you should do this for your project tho.
I have a Visual Studio 2015 ASP.Net Core project which uses Gulp and RequireJS. Gulp is used at compile-time, and RequireJS is used at run-time.
The typescript definitions for Gulp include the definitions for node, and this causes a definition collision with RequireJS:
TS2403 Build:Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'Require'.
Is there a way to work around this?
Manually Editing the Definitions
I don't want to manually edit the definition files as that would create maintenance problems compared to just getting them directly from NPM.
Also it wouldn't fully solve the problem as require would have the wrong type in one of the situations depending on which I commented out.
Relevant SO Questions
I found this question: Unable to use requireJS and Node's Require in the same TypeScript project.
It has an answer suggesting using CommonJS everywhere, but as I don't own the Gulp or RequireJS typings I can't change that.
Hopefully you're using two tsconfig.jsons, one for compile-time concerns and one for run-time concerns. With two configs you can explicitly choose which types to apply to each target with the types compiler option.
I've configured stylelint to read SCSS and I keep getting browser hack warnings on SCSS items like $variables and !default. I loaded in the stylelint-scss plugin thinking this might fix it but it hasn't. I want the browser hacks rule to be enabled for true browser hacks but I'll have to turn this off if it fails on all of the SCSS items.
Does anyone know how I can keep the browser hack rule enabled but not have it fail on non-browser hacks like the standard variables for SCSS?
The no-browser-hacks rule is not compatible with SCSS syntax. This is documented in the rule's README.
I can think of three options available to you:
Continue to use SCSS and turn off the no-browser-hacks rule.
Continue to use SCSS and contribute SCSS compatibility to stylehacks (the underlying library that powers the rule). The author of the library is happy to accept a Pull Request for this.
Discontinue using SCSS in favour of using standard CSS syntax and constructs.
Adding the stylelint-scss plugin will not resolve the issue as it provides additional rules specific to SCSS syntax and constructs. It does not change stylelint's core rules.
I've run into a rather annoying issue.
We have a very large code base which is mostly legacy code, and we have just begun implementing bootstrap. We have to "namespace" or "wrap" the bootstrap code in a class so that we can apply bootstrap to only parts of a page without affecting anything else.
If you're familiar with this technique, the common workaround is this:
.bootstrap-wrapper {
#import (less) "bootstrap.css";
}
See this issue: https://github.com/less/less.js/issues/1709
This works great as long as bootstrap.css is not minified. For whatever reason (probably something to do with semicolons), the minified version is not valid less even though it is valid css, and the less compiler errors out.
This wouldn't be much of an issue, except we are using Web Essentials (for VS 2013 update 4) to automatically compile our less into minified css files, and there is no granularity whatsoever.
We have the option to compile the unminified css files turned off, because we have no use for them, and only need the minified files. Since Web Essentials is all or nothing, there's no way for me to compile the unminified file in just this one case. We would have to carry an extra css file for every single compiled less file just to support this one case.
Are there any alternatives to creating a wrapper class this way, or is there anything I can do with Web Essentials to make this work?
I am new to browser development, so I have no prior experience with AMD, CommonJS, UMD, Browserify, RequireJS, etc. I have been reading a lot about them and I believe I generally understand the JavaScript story but I am still very confused as to how to make everything work together.
I have a library written in TypeScript. It is a pure TypeScript library, it doesn't interact with a browser or any browser framework nor any node or NPM things.
I also have a TypeScript client application that leverages this library. The client application may leverages a web framework as well (e.g., jQuery).
Now when I compile my two TypeScript files (which we will assume are in separate projects, isolated from each other and built separately), each will generate a .js file. In Visual Studio I have to choose AMD or Common as my module loader.
This is where things fall apart. My research tells me that if I want to work on the web I either need to use Browserify or RequireJS. Browserify appears to require I first install Node on my machine and then use a command line tool as a post-build step to generate a file and as far as I can tell this isn't available as a NuGet package. Alternatively, I can use RequireJS but then all of the examples stop working. Something about not doing things on window load and instead doing them somewhere else, but nothing that I have found really explains that well.
So, what is the story here? I want to use TypeScript but at the moment it really feels like it is just a language, there aren't any compelling usage stories available to me as a developer as I have grown accustomed to in the Microsoft ecosystem.
TypeScript does support AMD and CommonJS just as JavaScript. But in addition it also supports internal modules. When using internal modules in conjunction with a decent build system like gulp-typescript you'll find that internal modules can cover lot of use cases where one would choose AMD/CommonJS in traditional JavaScript projects.
TypeScript gives you the freedom to decide yourself. If you need asynchronous module loading you are free to use AMD via external modules. You can also use CommonJS and/or use browserify to link together your code into a single file.
I've found that when you are a library developer - that is you ship your TypeScript compiled JS code to other developers - internal modules are a good compromise. You don't force your target audience (developers) to use any special module system like AMD/CommonJS, but instead ship isomorphic JS that runs in the browser as well as in node. Yet you still have a way of modularizing your code internally, just as AMD/CommonJS would allow you.
TL;DR: When you use TypeScript you get internal modules for free, and they provide you with a flexibility that would else only be achieved by AMD/CommonJS. Yet external modules still have their advantages. In the end, you should decide what is the best fit for your project.
TypeScript is a superset of JavaScript so its story is the story of JS, not of .NET or any other Microsoft product.
If you compile your TypeScript modules to AMD, then you load them through an AMD module loader like RequireJS (or Dojo, or curl) in your entrypoint HTML file, which can be as simple as this (using RequireJS):
<!DOCTYPE html>
<title>Application name</title>
<script src="scripts/require.js" data-main="scripts/client"></script>
(Assuming that your built TypeScript module is scripts/client.js.)
The Start page for RequireJS or the Dojo Introduction to AMD modules are both resources that can tell you more about how to load AMD-formatted modules in a browser.
You got a really good technical answer from C Snover, but the answer you're actually looking for is "don't use external modules". By external modules, I mean "AMD" or "CommonJS" modules.
If you actually need what external modules offer, they can be very useful, but they come at a significant cost in terms of build/deployment complexity and concepts that you need to understand.
Just because external modules are way more complicated doesn't mean they're better; the TypeScript compiler itself is written using internal modules.
You can convert an external module back to an internal module by omitting any export statements on the module itself (and by not having an export = statement at the end of the file either). For example, this is an internal module:
module MyLibrary {
export class MyClass {
public Foo = 1;
}
}
If you are using internal modules, all you have to do is reference them in the right order via script tags in your HTML files and they will work without having to deal with any sort of loader system.
<script src="MyLibrary.js"></script>
<script src="MyUICode.js"></script>