Comments (6)
hudochenkov
commented on June 15, 2024
Could you share your .postcss-sorting.json?
from postcss-sorting.
hudochenkov
commented on June 15, 2024
Oh, you use following ES6 syntax sorting({ sortOrder }) which is equivalent to ES5 sorting({ sortOrder: sortOrder }). Try to remove curly brackets: sorting(sortOrder).
from postcss-sorting.
hanakin
commented on June 15, 2024
i tried it with no luck
here is my sorting file contents
{
"order": [
"custom-properties",
"dollar-variables",
"at-rules",
"declarations",
{
"type": "at-rule",
"name": "media"
},
"rules"
],
"properties-order": [
{
"emptyLineBefore": false,
"properties": [
"-moz-osx-font-smoothing",
"-webkit-font-smoothing",
"font",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"line-height",
"text-align",
"text-align-last",
"vertical-align",
"white-space",
"text-decoration",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-indent",
"text-justify",
"letter-spacing",
"word-spacing",
"writing-mode",
"text-outline",
"text-transform",
"text-wrap",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"word-wrap",
"word-break",
"tab-size",
"hyphens"
]
},
{
"emptyLineBefore": false,
"properties": [
"background",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-size",
"interpolation-mode",
"filter"
]
},
{
"emptyLineBefore": false,
"properties": [
"border",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset"
]
},
{
"emptyLineBefore": false,
"properties": [
"box-decoration-break",
"box-shadow",
"text-shadow"
]
},
{
"emptyLineBefore": false,
"properties": [
"color",
"opacity"
]
},
{
"emptyLineBefore": false,
"properties": [
"position",
"z-index",
"top",
"right",
"bottom",
"left"
]
},
{
"emptyLineBefore": false,
"properties": [
"display",
"visibility",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"clip",
"zoom",
"flex",
"flex-direction",
"flex-order",
"flex-pack",
"flex-align",
"flex-basis",
"flex-grow",
"flex-shrink",
"flex-wrap",
"justify-content",
"align-items",
"align-self"
]
},
{
"emptyLineBefore": false,
"properties": [
"box-sizing",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
{
"emptyLineBefore": false,
"properties": [
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image"
]
},
{
"emptyLineBefore": false,
"properties": [
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"cursor",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"transition",
"transition-delay",
"transition-timing-function",
"transition-duration",
"transition-property",
"transform",
"transform-origin",
"animation",
"animation-name",
"animation-duration",
"animation-play-state",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"pointer-events"
]
}
],
"unspecified-properties-position": "bottomAlphabetical"
}from postcss-sorting.
hudochenkov
commented on June 15, 2024
This should work theoretically, if sortOrder is an object with every option for postcss-sorting:
var sortOrder = require('./.postcss-sorting.json');
gulp.task('sort', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
sorting(sortOrder)
])
).pipe(
gulp.dest('./css/src')
);
});If it's not working, are you sure your CSS hasn't sorted yet? :)
If you still can't found a problem, please create a repository with reproducible problem.
from postcss-sorting.
hanakin
commented on June 15, 2024
hmm seems this may be an issue with stylefmt https://github.com/morishitter/stylefmt/
postcss-sorting sorts everything correctly, but then stylefmt is run which unsorts everything somehow even though the order is the same in my stylelintrc.json file and in my postcss-sorting.json file
here is my full task
gulp.task('css', function () {
var css = gulp
.src(build.scss + '*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
indentType: 'tab',
indentWidth: 1,
outputStyle: 'expanded',
precision: 10,
onError: console.error.bind(console, 'Sass error:')
}))
.pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(
postcss([
sorting(sortOrder),
torem({
rootValue: 16,
unitPrecision: 7,
propWhiteList: [
'font',
'font-size',
'margin',
'margin-left',
'margin-right',
'margin-top',
'margin-bottom',
'padding',
'padding-left',
'padding-right',
'padding-top',
'padding-bottom'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
})
])
)
.pipe(stylefmt())
.pipe(rename({
suffix: '.' + pkg.version,
extname: '.css'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(build.css));
return css;
});from postcss-sorting.
hudochenkov
commented on June 15, 2024
stylefmt has opinionated sorting order. It may sort differently, because it has hardcoded order.
from postcss-sorting.
Related Issues (20)
- Bootstrap 5 support? HOT 8
- CSS in HTML HOT 1
- Feature request: sort simple media queries by query parameter values HOT 1
- 01:24:53 [vite] Internal server error: Cannot read properties of undefined (reading 'length') HOT 2
- Error when using with postcss-sass: Cannot read properties of undefined (reading 'includes') HOT 2
- suggestion: wildcards to prevent re-ordering to affect the visual outcome HOT 1
- SASS mixins not getting sorted alphabetically HOT 1
- Error when run with error `TypeError: Cannot read property 'includes' of undefined` HOT 1
- Support for alphabetical sort with specific properties before all HOT 1
- postcss-sorting not working as expected HOT 5
- security vulnerability PostCSS HOT 1
- Extend sorting rule from another file HOT 1
- Less variables order in declaration block HOT 3
- Feature request: Non-standard CSS compatible HOT 2
- Migration to v3 Postcss Sorting HOT 5
- Could we support *.vue file? HOT 5
- Compine at rules with properties in sorting HOT 1
- rule sorting HOT 3
- Using astroturf composes HOT 4
- Add limited sorting support for CSS-in-JS with interpolation HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from postcss-sorting.