NativeScript/nativescript-dev-sass

Saving CSS files while LiveSync running uglifies file

Opened this issue · 5 comments

lukeramsden commented

If I save a .css file while I have tns run android running, it minifies the file to one line.

toddanglin commented

Is this a file that does not have an associated .sass or .scss file?

The expected behavior is that the .css output generated by this plugin is minified and compressed. But I don't think it should be doing that to plain .css files if there is no matching SASS source.

lukeramsden commented

There isn't.

Here are my packages for reference:

  "nativescript": {
    "tns-android": {
      "version": "2.5.0"
    },
    "tns-ios": {
      "version": "2.5.0"
    }
  },
  "dependencies": {
    "lodash": "4.17.4",
    "nativescript-camera": "0.0.8",
    "nativescript-dialog": "0.1.0",
    "nativescript-drop-down": "1.5.3",
    "nativescript-effects": "0.3.0",
    "nativescript-email": "1.4.0",
    "nativescript-i18n": "0.1.6",
    "nativescript-iqkeyboardmanager": "1.0.1",
    "nativescript-loading-indicator": "2.3.2",
    "nativescript-orientation": "1.6.1",
    "nativescript-phone": "1.3.0",
    "nativescript-platform": "1.1.0",
    "nativescript-platform-css": "1.4.0",
    "nativescript-plugin-firebase": "3.11.3",
    "nativescript-ratings": "1.0.1",
    "nativescript-videoplayer": "2.5.0",
    "tns-core-modules": "2.5.2",
    "tns-platform-declarations": "2.5.2"
  },
  "devDependencies": {
    "@types/lodash": "4.14.62",
    "babel-traverse": "6.24.1",
    "babel-types": "6.24.1",
    "babylon": "6.16.1",
    "lazy": "1.0.11",
    "nativescript-custom-entitlements": "0.2.0",
    "nativescript-dev-sass": "1.1.0",
    "nativescript-dev-typescript": "0.4.2",
    "typescript": "2.2.2"
  }
toddanglin commented

I added this scenario to the demo app for testing (and future regression checks).

I am able to reproduce the behavior you reported: on LiveSync, a plain CSS file is compressed/minified. Let me investigate and deploy a quick patch.

toddanglin commented

This may be a little trickier to "solve" than I thought.

I believe what we're seeing is the default behavior of the node-sass library (which underpins this plugin). By default, it is processing all files, and there does not seem to be an easy way to make it "ignore" plain CSS files.

Simplest workaround is to just rename all of your existing .css files to .scss. This will have the effect of preserving your original CSS comments/formatting. Probably the best choice.

Will keep investigating to see if there is another option for ignoring CSS that does not have a related SCSS file.

lukeramsden commented

Alright, will do