Why does uglify-js report 'WARN: Output exceeds 32000 characters'? - css

build pipeline is: Typescript, browserify, browserify-css, uglify.
runtime libraries: react, bootstrap.
My application so far has very little functionality (that's why I'm asking if this is going to bite me later, even though it appears to work for now). Later on it will get bigger (react-router, redux, other js libraries like Auth0, maybe even some actual functionality.)
I have an app.css that contains:
#import url("node_modules/bootstrap/dist/css/bootstrap.css");
I then import that into my index.tsx with:
import './app.css';
This all appears to work in that my helloworld react component displays "hello world".
But, during the build, uglify reports:
WARN: Output exceeds 32000 characters
Should I ignore it? And if so, is there a way to suppress it?
Looking at the file produced by uglify shows that it seems to make sure no lines are > 32000 characters - most lines truncate at just short of 32000 (one at 31999).
But there's one line var css='/*!\n * Bootstrap v3.3.7 ...' that is 120K characters long. I assume this is what Uglify is trying to tell me, but what's the big deal?

As per DavidG's comment, you can tell Uglify not to complain about this with the max-line-len option.
But, you can't just add that option, because it only works if you're "beautifying" the code. Which then does other stuff that you may not want to do.
The solution to that is to use the -b option to enable beautification, but then tell Uglify not to actually beautify. o_O
"scripts": {
"uglifyjs":"uglifyjs -b beautify=false,max-line-len=120000"
}
The above will set the line length to 120K - which made the warning go away.
This is more of a workaround than an answer though - it answers the "how do I suppress it" part of my question. I still don't know why it's warning me about that - problems with older browsers or whatever, I don't know.

Related

NextJS Error - HookWebpackError: Expected a pseudo-class or pseudo-element

I get the following error when running next build:
HookWebpackError: Expected a pseudo-class or pseudo-element.
at makeWebpackError (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:308185)
at /Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:105236
at eval (eval at create (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:34:1)
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
at /Users/eliot/Developer/eliothertenstein.com/static/css/66780ddc5f37cb3b.css:906:3
at Root._error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78465)
at Root.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:124360)
at Parser.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:86811)
at Parser.expected (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93145)
at Parser.pseudo (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:89313)
at Parser.parse (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92668)
at Parser.loop (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92233)
at new Parser (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78322)
at Processor._root (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95242)
at Processor._runSync (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95749)
caused by plugins in Compilation.hooks.processAssets
(See the full error at https://pastebin.com/JLQ2aR2f)
I've been trying to debug this issue for ~3hrs, and it's driving me crazy. I would appreciate any help on how I could better debug the next build command? I tried using the --debug flag, but it didn't seem to do anything.
So far I know this is an issue with tailwindcss (I assume postcss), as when I remove that section of my global.scss the program works again (or actually after I comment out the full file EXCEPT for tailwind it still breaks, commenting out tailwind leads to other issues).
Oh, some other debugging I've tried:
Searching through my entire project w/ regex to find any invliad tailwind classes (using (["'])(.*\b\w+: )(.*)(\1) to locate classes like md: text-red-600 but not md:text-red-600)
reinstalled all node_modules
commenting out all CSS files (which stops the issue!)
used both yarn classic and node to run the command (and npx) as opposed to yarn v3 which is what I currently use for development
Any help is appreciated!
It turns out the answer was an error in tailwind.config.js. One of my keyframes looked like this:
expand: {
...
'80%:': {
opacity: 0.5,
},
...
},
Notice the double colon after 80%.
I would encourage everyone with this issue to check classNames, .css files, and also tailwind.config.js for any extra colons.

Fail a grunt build when debug prints exist in source

I am working on a PHP/Javascript project where I've nicely set up a build workflow. It involves testing, minifying, compressing into the final zip deliverable, and a whole lot of other nice stuff.
I want to build a task that fails when there are certain patterns in the source code. I would like to look for any print_r(), error_log(), var_dump(), etc functions, and halt the build process if there are any. Perhaps later I would like to check for things in Javascript or CSS so this is not only a PHP question.
I know it can be done with grunt-shell and grep but I'd like to know the following:
Are there any grunt plugins specific to this task? Ideally I would like to be able to specify a list of regexes per file type, and to set whether to continue or fail the build on pattern match.
How do others tackle the problem of double-checking the packaged source for the most common debug statements or other patterns?
Not a complete answer to my question, but I've recently come across this grunt plugin which is somewhat related. It removes console.log statements from JavaScript. Haven't tried it yet. Looks good. I still would like to know if there's something similar for PHP though.
http://grunt-tasks.com/grunt-remove-logging-calls/
Edit: Seeing as there's only tumbleweeds rolling in the wind here, I'm posting my workaround that's based on grunt-shell. However this is not what I was looking for. It's not perfect because it doesn't do proper syntax parsing:
shell: {
check_debug_prints: {
command: '(! (egrep -r "var_dump|print_r|error_log" --include=*.php src || egrep -r "console\.\w+|debugger;" --include=*.js src) ) || (echo "Debug prints in source - build aborted" && false )'
}
},
and
grunt.loadNpmTasks( 'grunt-shell' );
Edit 2: I finally found the exact grunt plugin I was looking for. It is grunt-search. There is a failOnMatch boolean option that lets you indicate if a particular regex pattern should cause the build to fail when found.

Gulp — how to get lazy, ‘make’-like building?

I am using gulp for css and js processing. Sometimes I am missing the good old lazyness of the unix make command:
only generate transformed (whatsover, e.g. compilation) files from original files, that have actually changed (based on time stamps).
this is true from stage 1 to 2 (.cpp -> .o), stage 2 to 3 (linking or other stuff) whatever your dependency graph gives...
Make is not limited to source code: You can do image manipulation in several steps (efficiently ‘lazy’ generation of downscaled thumbs for example) or much else. All based on the fairly simple rule: „is at least one of the source files newer in respect to the current output file(s)?“
Unlike gulp, every step generates (more or less temporary) files, not a continuous pipe.
Is there a way, to get the same kind of lazyness in gulp**, i.e. when generating css?
only transform those (less|sass|stylus) files➝css if something changed (on the very respective file)
same for adding in browser prefixes, concat, minify
Admittedly, beyond the first 1 or 2 steps, the output is most likely already a single stream. So any change means ‘touched’. Still, when playing for example with minify options, I'd rather be lazy about the early transpile, prefixing and concat stages (drawing prior results from a temp file). Also on the javascript side ( typeScript, ... )
lazypipe and gulp-cache sound tempting but are something else, if I understand correctly. Saying .watch() is also only a partial answer, for the very first stage.
Is there a more generic approach?
If you're set on using Gulp, then this would seem to be the way to do it. It involves the gulp-cached and gulp-remember plugins.

SCSS compiler not working properly in PyCharm

I am trying to set up a SCSS transpiler in PyCharm for Django project.
Basically, what I need is to convert /static/scss/main.scss to /static/css/main.css
Here are the configurations of SCSS File Watcher:
Program: /home/maverick/.rvm/gems/ruby-2.2.3/bin/scss
Arguments: --no-cache --update /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
Working directory: /home/maverick/Documents/DjangoProjects/timberg/static/scss
Output paths to refresh: /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
What is happening is that main.css is being generated where it should. But it contains only errors, not the expected css, like this:
/*
Error: Inconsistent indentation: 2 spaces were used for indentation, but the rest of the document was indented using 8 spaces.
on line 39 of /home/maverick/Documents/DjangoProjects/timberg/static/css/main.css
and etc.
What is wrong here? How can I fix it?
The problem was in the Arguments part.
It should be:
$FileName$:/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
not just:
/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
My mistake was leaving out $FileName$: at the beginning.

Compile LESS files with source maps

How can I compile a LESS file to output a source map file (.css.map) in addition to a CSS file? Is there a way to do it on both command line (NodeJS's lessc) and on any GUI-based programs?
Update: New shortest answer
The docs have been updated! As new features hit LESS, sometimes the docs lag behind a bit, so if you're looking for bleeding-edge features, you're still probably better off running lessc (see longer answer) and checking what pops out of the help text.
http://lesscss.org/usage/
Short answer
You're looking for any number of the following options from the command line:
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline puts the map (and any less files) into the output css file
--source-map-url=URL the complete url and filename put in the less file
As I write this I'm not aware of any GUI options that generate maps (source maps were only added to LESS in the last few months) -- sorry to not have any better news. I'm sure they'll add support in as they update over the next year.
Longer answer
If you run lessc from the command line without any parameters it will give you all the options. (In my experience, this is more up to date than their documentation, so it'll at least get you pointed in the right direction.) with all the most recent map stuff included.
The easiest combo to use for dev is --source-map-less-inline --source-map-map-inline as that will give you your source maps embedded in your output css.
If you'd like to add a separate map file, you can use --source-map which, from my.less will output my.css and my.css.map
For reference: when I run my copy (v 1.6.1 at the moment) I get
usage: lessc [option option=parameter ...] <source> [destination]
If source is set to `-' (dash or hyphen-minus), input is read from stdin.
options:
-h, --help Print help (this message) and exit.
--include-path=PATHS Set include paths. Separated by `:'. Use `;' on Windows.
-M, --depends Output a makefile import dependency list to stdout
--no-color Disable colorized output.
--no-ie-compat Disable IE compatibility checks.
--no-js Disable JavaScript in less files
-l, --lint Syntax check only (lint).
-s, --silent Suppress output of error messages.
--strict-imports Force evaluation of imports.
--insecure Allow imports from insecure https hosts.
-v, --version Print version number and exit.
-x, --compress Compress output by removing some whitespaces.
--clean-css Compress output using clean-css
--clean-option=opt:val Pass an option to clean css, using CLI arguments from
https://github.com/GoalSmashers/clean-css e.g.
--clean-option=--selectors-merge-mode:ie8
and to switch on advanced use --clean-option=--advanced
--source-map[=FILENAME] Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline puts the map (and any less files) into the output css file
--source-map-url=URL the complete url and filename put in the less file
-rp, --rootpath=URL Set rootpath for url rewriting in relative imports and urls.
Works with or without the relative-urls option.
-ru, --relative-urls re-write relative urls to the base less file.
-sm=on|off Turn on or off strict math, where in strict mode, math
--strict-math=on|off requires brackets. This option may default to on and then
be removed in the future.
-su=on|off Allow mixed units, e.g. 1px+1em or 1px*1px which have units
--strict-units=on|off that cannot be represented.
--global-var='VAR=VALUE' Defines a variable that can be referenced by the file.
--modify-var='VAR=VALUE' Modifies a variable already declared in the file.
-------------------------- Deprecated ----------------
-O0, -O1, -O2 Set the parser's optimization level. The lower
the number, the less nodes it will create in the
tree. This could matter for debugging, or if you
want to access the individual nodes in the tree.
--line-numbers=TYPE Outputs filename and line numbers.
TYPE can be either 'comments', which will output
the debug info within comments, 'mediaquery'
that will output the information within a fake
media query which is compatible with the SASS
format, and 'all' which will do both.
--verbose Be verbose.
If the command line doesn't suite you, Grunt is great at this type of thing. You can configure the grunt-contrib-less plugin to generate inline maps with a config like this:
less: {
options: {
sourceMap:true,
outputSourceFiles: true
},
lessFiles: {
expand: true,
flatten:false,
src: ['**/*.less'],
dest: ['dist/'],
ext: '.css',
}
},
https://github.com/gruntjs/grunt-contrib-less
Example to Create Map and CSS file from Less File
Install latest Node JS and go to command prompt and run npm install less, Now less installed successfully
Go to Command Prompt and move to less file folder that we are going to create
For e.g., I am going to change HelloWorld [Less File]
In Command prompt go to C:\Project\CSS or give the correct path in the below command.
Run following Command in Command Prompt
lessc HelloWorld.less HelloWorld.css --source-map=HelloWorld.css.map –verbose
Now CSS and Map file is generated in the respective folder.
For more reference check the link : royalarun.blogspot.com

Resources