Git Product home page Git Product logo

sublime-postcss-sorting's Introduction

sublime-postcss-sorting

Sublime Text plugin to sort CSS rules content with specified order. Powered by postcss-sorting.

Works only with CSS, SCSS and PostCSS.

Install

Install PostCSS Sorting with Package Control and restart Sublime Text.

You need to have Node.js 6+ installed.
Make sure it's in your $PATH by running node -v in your command-line.
On OS X you need to make sure it's in /usr/local/bin or symlink it there.

Getting started

In a CSS or PostCSS file, open the Command Palette (Cmd + Shift + P (OS X), Ctrl + Shift + P (Windows/Linux)) and choose Run PostCSS Sorting. You can alternatively create one or more selections before running the command to only sort those parts. It should be whole rule.

There is keyboard shortcut also: Ctrl + Shift + S (OS X), Ctrl + Alt + Shift + S (Windows/Linux).

Options

(Preferences → Package Settings → PostCSS Sorting → Settings)

You can specify sort order and other options. See the postcss-sorting documentation for all options.

Default

{
	"sort-on-save": false
}

Project settings

You can override the default and user settings for individual projects. Just add an "PostCSSSorting" object to the "settings" object in the project's .sublime-project file containing your project specific settings.

Example:

{
	"settings": {
		"PostCSSSorting": {
			"properties-order": ["padding", "margin"],
			"sort-on-save": true
		}
	}
}

Acknowledgements

This plugin is based on the sublime-autoprefixer plugin by Sindre Sorhus.

sublime-postcss-sorting's People

Contributors

hudochenkov avatar oversan avatar rusty-key avatar stanislavshabalin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

sublime-postcss-sorting's Issues

Common Config for both stylelint-order and this plugin

I'm switching over to stylelint, using stylelint-order and this sublime text package. Right now I have two copies of my configuration to sort properties: One in the .sublime-project file and another in .stylelintrc.yml is there a way to use only one configuration?

For example, it would be nice if this plugin could look for the stylelint configuration files and use those to determine the sorting.

Auto-sorting on save

Is it possible to automatically sort CSS rules (on every file save, for example)?

Not working with sass

Hi,

I can not make it work with sass. With css it works very well.

Error: 3:13: Missed semicolon

I think it's because postcss only expects css by default?

I also install @csstools/postcss-sass but I do not know how to integrate it into postcss with sublime. Can you help me?

Project settings overwrite user settings

Hello,
I have a problem, when I try to override plugin settings for specific project (just sort-on-save option) plugin stops working. It looks like the user settings are overwritten. Steps to reproduce:

Default settings:

{
	// Please visit https://github.com/hudochenkov/postcss-sorting#options for all plugin options

	// Set true to sort on save every file with supported syntax
	"sort-on-save": false
}

User settings (set some rules):

{
    "order": [
        "custom-properties",
        "dollar-variables",
        "at-rules",
        "declarations",
        {
            "type": "at-rule",
            "name": "media"
        },
        "rules"
    ],
    "properties-order": [
        ...
    ],
    "unspecified-properties-position": "bottom"
}

And then in specific project just overwrite sort-on-save option

{
    "folders":
    [
        {
            "path": "."
        }
    ],
    "settings": {
        "PostCSSSorting": {
            "sort-on-save": true
        }
    }
}

And now plugin doesn't sort properties, even with executing command, so I suppose that properties order is missing. I think correct behaviour should be just overwrite sort-on-save function, not whole plugin configuration. Currently workaround is to copy all user settings to project settings.

Thanks for the plugin.

sublime-postcss-sorting doesn't do anything on my OSx El Capitan

Hello! I used to use your wonderful plugin in my sublime text, which was installed on Linux. And it worked fine. Recently I moved to mac, OSx El captain. And it doesn't work here! I've checked if node is in /usr/local/bin - exe of node is there. Postcss sorting doesn't show any mistakes in sublime. Can you give me some advice, please?

Sorting doesnt work on save

Hi.
I have one more problem.
There are two notebooks, which has the same version ST3 with the same set of plug-ins and with the same settings (copy from one to another).
One notebook sorting works when i save file, the second - is not, only the direct call of the sort menu (or ctrl+ alt+ shift + s).

{

    "sort-on-save": true,
    
    "rule-nested-empty-line-before": [
      "always-multi-line",
      {
        "except": ["first-nested"],
        "ignore": ["after-comment"]
      }
    ],


    "order": [
        "custom-properties",
        "dollar-variables",
        "at-rules",
        "declarations",
        {
            "type": "at-rule",
            "name": "media"
        },
        "rules"
    ],
    "properties-order": [
        "lost-utility",
......................... 
        "stroke"
    ],
    "unspecified-properties-position": "bottom"
}

the settings is equal, no errors on the second notebook, when saving.
can U help me plz?

Error: module.js:339

Just now, I've installed PostCSS via Package Control for Sublime Text 3. In former times it did work, but now there is the following error:

PostCSS Sorting
Error: module.js:339
    throw err;
    ^

Error: Cannot find module './terminal-highlight'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/pl/Library/Application Support/Sublime Text 3/Packages/PostCSS Sorting/node_modules/postcss/lib/css-syntax-error.js:15:26)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)

How can this be solved?

Nothing happens after "Run PostCSS sorting" or stylelint error

On one machine with OS X running PostCSS Sublime will only mark the document to be "changed" but actually nothing happens. There is even no message in console, too. Does anyone know what I can do?

On the second machine I will just get the following error message:

SublimeLinter: WARNING: stylelint output:
Error: No configuration provided for [name and path of current file]
    at module.exports (/usr/local/lib/node_modules/stylelint/lib/utils/configurationError.js:10:14)
    at /usr/local/lib/node_modules/stylelint/lib/getConfigForFile.js:56:11

Any idea what can be done?
Best, hirschferkel

Can't find Node

I'm using nvm.
So it probably seems that there is no node in '/ usr / local / bin'.

Thank you anyway!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.