I need to safelist all margin values with the respective responsive sizes.
Example:
'mb-10'
'md:mb-10'
'xl:mb-10'
and so on.
Here is what I have right now in my tailwind.config.js but it doesn't seem to work for the responseive variants:
safelist: [
{
pattern: /\-?m(\w?)-/,
},
],
Is there an easy way to achieve this with regex patterns or do I need any other specific configuration? I would of course like to avoid listing them all manually.
So I would like to preface this by saying that this behavior is not recommended if this is meant for a production site. Tailwind docs explicitly state safelisting is a last ditch effort. The file produced by this safelisting alone would be upwards of 80kb.
That said, the part you're missing for responsive variants is the variants option as stated in the docs. But your regex pattern would also be grabbing more than just margin utilities.
In order to prevent the inclusion of other classes that contain m- (bottom- and scroll-m-) you can add them in a non-capturing group before looking for the margin string.
module.exports = {
content: [],
safelist: [
{
pattern: /^(?!(?:scroll|bottom)$)m\w?-/,
variants: ['sm', 'md', 'lg', 'xl', '2xl'],
},
],
}
Related
When I apply the following SASS in my component's style, it works as supposed to.
$test-color: pink;
div{ background-color: $test-color; }
However, when I move the definition to styles.scss, it doesn't. I've tried adding the (now, apparently, deprecated) #import "../styles.scss"; and also the currently recommended #use "../styles.scss";. I even tried to put the color definition in colors.scss and add that reference to angular.json. The styles for classes declared in styles.scss work (even without importing/using, due to it being references in the assets). But the variable, doesn't.
According to this suggestion, it should work with #include. In this docs, it's shown how to assign the values. I found this linking to this but I can't see how that differs from my case. I tried to understand this blog but couldn't see any relevant hints on what I'm doing wrong. I also tried adding the following (as shown here).
"stylePreprocessorOptions": { "includePaths": [ "src" ] }
I still get the error below, though.
ERROR in ./src/app/.../some.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
14 │ background-color: $test-color;
___ │ _________________ ^^^^^^^^^^^^
src\app...\some.component.scss 14:23 root stylesheet
Googling the actual error gave me this saying that the variable isn't there. But as far I can tell, it is! A related, although a bit different, question was asked here but with no relevant answer.
What am I missing and how do I investigate it further?
The error is due to wrong syntax as pointed out. It needs to reference the source of the colors.
background-color: colors.$test-color;
Furthermore, the import is required but needs to be done by reference to the module and not to the file.
#use "colors";
In a wholesome code base, one should put the following in the file src\colors.scss.
$test-color: pink;
Then you could use it like this.
#use "colors";
div{ background-color: colors.$test-color; }
In the config file angular.json, the following needs to be set.
"styles": { ... },
"stylePreprocessorOptions": { "includePaths": [ "src" ] },
"scripts": { ... },
Also, it's should be noted that files prefixed by an underscore are subject to a different processing and as such, _colors.scss is preferred. While it's valid and working to place the auxiliary files directly in /src (as is the case with styles.scss, the convention dictates to place them in /src/assets/styles, altering the pre-processor's options as below.
"stylePreprocessorOptions": { "includePaths": [ "src/asses/styles" ] }
I have minifyCSS set to true in my Gruntfile.js htmlmin section like so:
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true,
minifyJS: true,
minifyCSS: true
...
But unfortunately, it is now mangling some of my Handlebars code, turning this:
<style type="text/css">
{{#each list}}
.aClassWithBgImage{{#index}}{background-image:url({{images.thumbnailBoxImage}})}
{{/each}}
</style>
into this:
<style type="text/css">{background-image:url({{images.thumbnailBoxImage}})}</style>
...when really what I wanted (was expecting) is this:
<style type="text/css">{{#each list}}.aClassWithBgImage{{#index}}{background-image:url({{images.thumbnailBoxImage}})}{{/each}}</style>
Any quick fixes for this? Otherwise, I'm sure I can just restructure my code differently
With help from this answer here, I've discovered that there is an ignoreCustomFragments option within the html-minifier documentation. Using it, you can tell htmlmin to skip trying to compress your {{}} tags, using code like this in your Gruntfile.js:
htmlmin: {
...
options: {
ignoreCustomFragments: [/<%[\s\S]*?%>/, /<\?[\s\S]*?\?>/, /{{[\s\S]*?}}/], //last item in array is the one for Handlebars. The previous 2 items are the default code tags to be ignored, listed in the documentation
...
So the key part is adding the /{{[\s\S]*?}}/ RegEx. (You could, of course, just replace the whole ignoreCustomFragments array with that one RegEx if you wanted to.) NOTE: You might want to escape the curly braces '{}' in the RegEx, but it seems to work fine without.
UPDATE
So actually, the /{{[\s\S]*?}}/ RegEx seems to leave a space " " in my code... and if I change it to /{{.*}}/ , the spaces are removed, but some of my CSS styling becomes uncompressed... so for now, I consider these 2 RegExs somewhat of a "half-solution" . I also tried using customAttrSurround as listed in the Wiki but I couldn't even get that code to work at all in my Gruntfile.js .
I'm having a strange issue I haven't seen occur. I am trying to do some basic addition to some variables like this:
#screen-break-sm: 768px;
#screen-break-md: 992px;
#screen-max-mobile: #screen-break-sm;
#screen-min-desktop: #screen-break-sm + 1;
Then, those values are being used in some media queries. When it is compiled using gulp-less (version ~3.0.0 in package.json) via Gulp, the output ends up being something like:
#media (min-width:768px + 1) {
// CSS
}
I'm expecting:
#media (min-width:769px) {
// CSS
}
I have tried doing the addition as both #screen-break-sm + 1 and also screen-break-sm + 1px. I've also tried removing the px part of the original values and doing the add and appending the px afterwards, but that doesn't add either.
In case it is relevant, this is one of the gulp scripts that builds a section where I first ran into this issue:
module.exports = function (build) {
return function () {
var pagesPath = build.options.styles.buildPath + '/pages/';
return build.gulp.src('./resources/assets/less/pages/**/*')
.pipe(build.plugins.less({
paths: [ build.plugins.path.join(__dirname, 'less', 'vendor', 'theme', 'bootstrap') ]
})).on('error', build.errorHandler)
.pipe(build.plugins.minifyCss()).on('error', build.errorHandler)
.pipe(build.plugins.extReplace('.min.css')).on('error', build.errorHandler)
.pipe(build.gulp.dest(pagesPath));
};
};
Any ideas why LESS is concatenating/appending instead of performing addition?
[EDIT]
While the solution is the same as the other question that was identified as a possible duplicate, that question does not discuss the problem that users will encounter directly, and therefore I think this question is much better suited for searching purposes. I never found that solution after an hour of Googling and only after getting the answer and the "strict math" verbiage did that other question show up.
Look at strict math option which default value is OFF. Are you sure that for some reason you don't have it set to ON?
lessc -sm=on
lessc --strict-math=on
I want to run grunt-contrib-concat over a directory and match everything in it except for one subdirectory, however, within that subdirectory I want to match one file. So it looks like this:
// Include everything
topDir/
// Include only one file in this specific directory
topDir/**/subdir/onlyIncludeThisFromThisDirectory.whatever
Is there an easy way to do this?
That's easy as:
[
'topDir/**/*.whatevet',
'!topDir/**/subdir/**/*',
'topDir/**/subdir/onlyIncludeThisFromThisDirectory.whatever']`
]
The pattern with leading ! is the excluding pattern.
Remember that you should always include .extension to the matching pattern, when using "Files Array" mapping, because pattern **/* matches directories too.
To avoid this, you can use dynamic mapping:
files: {
expand: true,
cwd: 'topDir/',
src: ['**/*', '!**/subdir/**/*', '**/subdir/onlyIncludeThisFromThisDirectory.whatever'],
dest: 'dest/',
filter: 'isFile'
}
See documentation for more info.
In kendo 2012.3.1114, I ran across a numeric text box issue (see How can I have kendo NumericTextBox keep focus during highlighting in a kendo window?).
I've been unable to find a work around so in the interim I hesitantly decided (because I'm near end of the project release cycle) to try version 2012.3.1315. During my regression testing, I found that issue to be fixed but hideColumn of the grid component to be broken.
Here's a jsfiddle showing the issue
http://jsfiddle.net/e6shF/42/
Here's the code:
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
{"foo": {"bar": 10, "moo": "y", "coo": 4}, "too": "test1"},
{"foo": {"bar": 20, "moo": "z", "coo": 3}, "too": "test1"}
]
},
columns: [
{
field: "foo.bar"
},
{
field: "foo.moo"
},
{
field: "foo.coo"
},
{
field: "too"
}
]
}).data("kendoGrid");
grid.hideColumn("foo.moo");
grid.hideColumn("foo.coo");
Notice that the second call to hideColumn will hide the column header but not the column data. It appears making a grid.refresh call after the second column hide will remedy the issue but this is was not necessary in the previous version (nor does the documentation indicate the call is necessary). I think this is a bug that was introduced, so I guess I'm trading one issue for a new issue (perhaps many issues).
Any thoughts on
1) how to fix this issue without a grid refresh or
2) why hideColumn is not working in the new version or
3) even better on how to fix the numeric text box issue in the other thread so I don't have to worry about hoping to catch and fix other issues in this new version prior to releasing
would be greatly appreciated?
This may not be the answer you're looking for, but I noticed that switching the order of column hiding makes the problem go away:
grid.hideColumn("foo.coo");
grid.hideColumn("foo.moo");
Here's a fiddle showing it working: http://jsfiddle.net/derickbailey/rkmqz/
I'll make the dev team aware of this, too.