I found this super informative and useful article about globalization using angular's gettext directive and grunt. Problem is, it seems to extract from .html files only and I can't really get it running with jade.
I am using Node.js for my server, together with Express.js, so I convert my .jade files to .html files on the fly, on each user request. I really like the way express and jade fit together, so I am searching for a solution, which extracts translations from those jade files.
For now I tried changing the grunt task snippet to:
grunt.initConfig({
nggettext_extract: {
pot: {
files: {
'po/template.pot': ['**/*.jade']
}
}
}
});
And also adding the translation directive as I do for all other angular directives, e.g.:
h3(translate) About
To add jade file support to angular-gettext you would need to modify extract.js in the angular-gettext-tools project because that is what is actually scanning and extracting the text. It doesn't look like a trivial change.
I would suggest a different approach. See if you can generate html for all the jade files as part of a build process and then run the angular-gettext tools against that. Then you continue to develop as you like but you do not to need to add jade support to angular-gettext.
Related
I just committed and pushed a minor CSS tweak. On my server I git pull, npm run build, and forever restart __sapper__/build
Now there seems to be more than one version of the same CSS rule across different files, as per the below screenshot (this is after disabling browser cache):
The correct rule is the third one (vertical-align: top; margin-top: 1px;), which seems to be a combination of CSS files.
Any idea where the 'old' rules are coming from? Cached somewhere somehow?
/EDIT This is my rollup.config.js: https://gist.github.com/Bandit/bbcfd6c70ace5800765313dfe6021854
/EDIT2 The styles in question are in a /style/global.scss file, which is included using the following code in /routes/_layout.svelte:
<style lang="scss" global>
#import "./style/global.scss";
main {
background-color: white;
padding: 5rem 1rem 0 1rem;
}
</style>
Guessing this is somehow the issue? Where is the right place to 'inject' global stylesheet for colours/theme/typography etc?
/EDIT3 The styles being included via _layout.svelte are being included more than once in dev as well, here's a screenshot:
These selectors don't seem to come from a Svelte component, since they're not scoped (e.g. .split-button.svelte-a9ylb1)? Or are you using :global(.split-button) in a Svelte component?
Anyway... I failed to reproduce your issue, but my intuition is that your problem probably comes from the postcss plugin. It has an inject option that is enabled by default. What this option does is injecting a <style> tag in the <head> of your doc; the code that does this is appended to your modules' JS by the postcss plugin. This behaviour might very well clash with what svelte-preprocess or rollup-plugin-svelte is doing.
Try adding inject: false in the 3 places where you're using postcss in your Rollup config, and see if this helps.
Another possibility might be the service worker. I don't think an issue there could produce your result you get, but we never know... You should try options like "Update on reload" and "Bypass for network" (I don't know what are the equivalent options in your browser) to see if that makes a difference.
Otherwise, you may have to show more of your code. Where does this precise CSS rule come from (e.g. style tag in a Svelte component, SCSS file in node_modules, ...)? How is it imported into your project (e.g. import './app.css', #import './app.scss', etc.), and where? Also, I'm surprised that you have the postcss rollup plugin only in the server (the one that is not registered in sveltePreprocess)... What do you need this for, that you don't need on the client?
EDIT: Follow up
Wait, what? You've got some style files under your routes directory?? routes/style/global.scss?
Even with that, I don't appear to be able to reproduce your problem, but it's worth noting that Sapper will try to include every file it encounters under this directory. If you've got a plugin that lets you import *.scss files, then Sapper will actually see a global.scss.js, so it will think it's a server route. Without a plugin that can eat SCSS, it should... crash. If the plugin in question is postcss with its default inject option still to true, to me it looks like a star suspect...
Anyway, some further points of clarification...
svelte-preprocess enables lang="xxx", global attribute in <style global ...>, in .svelte files only.
rollup-plugin-postcss can additionally be added, directly in plugins array (i.e. not as an option of svelte plugin). It gives support for import './foo.scss', in .js files, as well as in the <script> part of .svelte files.
(Of course, SASS support by PostCSS, or PostCSS support by Svelte preprocess are depending on the config you feed them.)
OK. So now there are multiple places where some CSS / SCSS can enter your build. That I can think of, there are the following ways:
<link rel='stylesheet' href='global.css'> in src/template.html: this one will copied as is without processing.
I suppose you can also have such a "custom" <link> tag in the markup (~HTML) part of a .svelte file, and it would be included as is in the resulting HTML (you'd still have the responsibility that the reference CSS file be accessible at the given URL).
import 'something.css' or 'import 'something.scss'in a.jsor JS part of a.sveltefile: these will get processed by bundler & plugins, and converted to some JS code, with optionally additional assets that the JS can reference (typically, a proper CSS file is generated, and some JS code dynamically injects atag for it at runtime; another approach is to generate some JS that will inject every CSS rule in the doc). PostCSS withinject: true` uses the CSS + inject tag method.
the CSS / SCSS style that you write in the <style> part of a .svelte file will also be processed by the Svelte plugin in a similar way as described just before (preprocess option required to accept anything else than raw CSS); depending on the plugin configuration, it may also try to write a '.css' file for your application (see docs. With the emitCss option, that is apparently needed for Sapper, it should output one CSS file per component (or maybe entrypoint).
In your case, you say that you've removed rollup-plugin-postcss from your config, so the 3rd point (import css from js) should not be possible anymore.
Well... I just hope this can help you investigate further.
I've pushed a Sapper + PostCSS example on a branch on this repo. As far as I can tell, it doesn't have the issue you're describing here. So maybe you can find the problem by comparing with what you have. See this commit for the diff with the vanilla official template.
I tried to also add rollup-plugin-postcss, like you initially had in your config, in order to be able to import .scss from outside of Svelte components. But I failed to find a way to do this that don't conflict with Sapper.
EDIT 2
Oh, and just to be sure... Be sure to try a little rm -r __sapper__ && rm -r src/node_modules/#sapper (notice: node_modules under src, not the one in your project's root) before pursuing your investigation. I'm sure you've already done that, but better safe than sorry. Stale things can live in there.
I have created the angular project in VS Code using the following command.
ng new my-app --style=scss
by following this github link
Now every style sheet that is being created using angular-cli is with extension of .scss instead of .css
Now there is a requirement to check that how Sass is being converted to css because I am new to Sass. I am facing some issues in designing thus it would be nice for me to look at css file.
I have searched in those folder where scss file exists but there I couldn't find css file. Please help
Update
Look at this picture, when I created the component using cli, it created .scss instead of css so I need to look for css file.
I've been able to find a way to view my compiled .scss files as a .css file.
Before I only saw the raw .scss files when inspecting from Chrome.
The trick was setting some flags in the angular.json file so it will tell webpack (what angular-cli uses to build the app) that I want the .scss files served as .css along with a sourcemap of the file:
./angular.json
{
...
"projects": {
"my-prject": { <-- or whatever your project is named
"architect": {
"configurations": {
"production": { // <-- production is default, you might be working w/ custom configurations [development, test, w/e]
...
"sourceMap": true, <-- will serve source maps w/ the file so you can view it in the browser easily
"extractCss": true, <-- actually serve the .css files and not the .scss files
...
}
}
}
}
}
}
Once that is updated, restart the dev server or rebuild your application
then you can go into chrome dev tools and look at find the styles.css file (or whatever you have the file name set to) and view it:
If you are working on local then:
local {
"sourceMap": true,
...
}
Sass in Angular 2 are always converted into Css in run time when you compile and build the project. However if you are using any other environment like Gulp tasks and watches, you can run 'sass --watch input.scss output.css'
As folks have already mentioned, the css is built at runtime. You can still set the result using inspect in chrome or firefox.
It's definitely a requirement to check the generated CSS when you find something wrong and Chrome Inspector can't help! So this is definitely a good question, which is why I'm here.
To summarize, #y_vyshnevska is right that "you may find your css inlined in script tags at the end of head", and he also gave an in-depth link: https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 on the topic. I put it here in case you neglect it.
It looks not possible to view compiled css files at a runtime.
However, you can do the following trick: angular applies components' styles using <style> attribute. Find the one you need in elements inspector (you can search there using ctrl (or cmd) + f.
After you've found the stylesheet you need, you'll see it's truncated. To see the entire content, click on the style element and select "Store as global variable". After that in console run
copy(Object.values(temp1.sheet.cssRules).map(r => r.cssText).join('\n'))
This will copy all css to your buffer
I've created a application using the MEAN stack which was generated by Yeoman angular-fullstack
I would love to include uncss to my grunt build.
Unfortunately, this is not possible given that the site is SPA.
I've read that I can generate a site map and then use that through uncss; however, could someone please implement uncss and help me through this process for I dont know how to really start?
This can be done with uncss at a command line or with grunt-uncss...although the latter has open issues. The example on the grunt-uncss page you mention, using a WordPress sitemap , is helpful but doesn't clearly explain what to do about SPA's. Hopefully this helps.
1) Command line
As the docs on the github page explain, you can now pass URL's directly into uncss to generate css output. You can pass URL's to uncss instead of files...
Thus, if your SPA is simple enough, you could use the core uncss app like this:
uncss http://localhost:3000/mycoolapp > stylesheet.css
2) grunt-uncss
At the time of writing this answer, there is an open issue with grunt-uncss that needs to be known to use uncss via grunt.
While the url option is depreciated, the alternative approach to put the URL's into the file array won't work because of the open issue. However, the url option can still be used so that an array of URL's can be checked. In this case, the Gruntfile.js would have a section like this:
uncss: {
dist: {
options: {
...some options...
urls : ['http://localhost:3000/mycoolapp', '...'], // This is the line you need
...even more options...
},
The array in urls would need to contain a list of urls. Given that this plugin is still in development, you should watch the github page so you are notified of potentially breaking changes as it builds upon v.0.3.x...
Two notes:
phantom.js will be used for this processing, so as long as your SPA is friendly enough that phantom can do it's work...this should work for you.
you have to enter the array of urls by hand, which is what the WordPress example off the grunt-css page is automating...so if you can similarly automate, life will be easier.
As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?
I am using Polymer.
Thanks!
Laurent
You can make the client compile the LESS to CSS , you should definitely take a look at this :
http://lesscss.org/#client-side-usage
It is advised to compile it yourself to css in a production environment though !
Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?
Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:
src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.
We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.
Simply compile your less and embed the generated CSS file via good old link tag.
I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.
Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ -
To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less
The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file.
Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.
If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS.
Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222
One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.
I'm using Gulp for my build process and I found this module very useful:
https://github.com/MaKleSoft/gulp-style-modules
It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.
Bounty: Bounty given to whoever share a standalone command-line CSS minifier for Windows (that is, run just like JSMin and CSSTidy, but actually minifies rather than 'prettify' and remove properties
Using Visual Studio 2010 Post-Build Events, I'm currently working to reduce our CSS/JS framework by merging and minifying the files into .min for production when building the solution/project.
For the JS I'm using JSmin.exe while for CSS, CSSTidy.exe
All okay for JSmin, but CSSTidy is removing all IE7 *property hacks and other properties used by display-table.htc (-dt-display:). If I use the --preserve_css=true setting, it keeps the comments (which I don't want) and the *property have the * stripped out (which I want).
Example:
.row-fluid .span1 {width: 6.382978723%; *width: 6.329787233638298%;}
Becomes (note it added linebreak as well):
.row-fluid .span1 {
width:6.382979%;
width:6.329787%
}
The question made here is what I'm looking for BUT the answer was given for HTML Purifier (which I don't use) instead of a CSSTidy alternative.
So the questions:
Is it possible to make CSSTidy NOT remove the IE7 hacks nor other invalid properties (which I actually use)?
Is there any other standalone/command-line CSS compressor (specially one which actually minifies rather than just tidy it)? (bounty for that)
Obs.:
The VS solution is TFS shared, can't make all devs install YUI or whatever other framework which isn't standalone, nor other languages frameworks like Ruby/PHP. Currently the jsmin.exe and csstidy.exe were the best since I just added both to the solution and call them on post-events.
After spending all Friday searching and not finding a good tool, today I gave a new shot and finally found a tool that minify both CSS and JS.
The name isn't much straightforward, that's why was hard to find: Microsoft Ajax Minifier
While asks for install, I just copied the folder contents to the project and worked like a charm.
For those who want to use it as Post-Event build:
Considering you have a .js folder and you want to concatenate and minify all .js files that end with .debug.js.
type "$(ProjectDir)\Scripts\*.debug.js" | "$(ProjectDir)tools\AjaxMin" -JS -comments:none –global:jQuery,$ -out "$(ProjectDir)\Scripts\myProject.min.js" -clobber
$(ProjectDir) is the project folder;
type is a cmd.exe command for displaying the contents of one or more files. So I order to get the contents of all *.debug.js files and leave in the STDIN;
Invoke AjaxMin.exe (no need for the .exe that I copied to my \tools\ folder;
pass arguments as needed with -argName:argValue;
use -out and a pathname with a file that will be outputted;
add -clobber to overwrite if file exists
Now everytime I need to update my css and js files, I re/build the project and voilá, minified CSS and JS.